Using React with Flow

Developers will often use Flow and React together, so it is important that Flow can effectively type both common and advanced React patterns. This guide will teach you how to use Flow to create safer React applications.

In this guide we will assume you know the React basics and focus on adding types for patterns you are already familiar with. We will be using examples based on react-dom, but all of these patterns work in other environments like react-native as well.

Component and Hook Syntax {#toc-component-and-hook-syntax}

Flow has dedicated component and hook syntax for writing React components and hooks, and it is the standard way to write React with Flow. The syntax is enabled by default, gives components and hooks first-class type system support, and lets Flow enforce the Rules of React directly.

Make sure your toolchain is set up using the installation instructions, then read the Component Syntax and Hook Syntax docs. The older function and class component patterns still type-check, but are legacy: prefer component and hook syntax for new code.

Setup Flow with React {#toc-setup-flow-with-react}

Flow and Babel work well together, so it doesn't take much to adopt Flow as a React user who already uses Babel. If you need to setup Babel with Flow, you can follow this guide.

React Runtimes

Flow supports the @babel/plugin-transform-react-jsx runtime options required to use JSX without explicitly importing the React namespace.

If you are using the new automatic runtime, use this configuration in your .flowconfig so that Flow knows to auto-import jsx:

[options]
react.runtime=automatic

See Also {#toc-see-also}

• Component Syntax — Flow's dedicated syntax for declaring React components
• Hook Syntax — Flow's dedicated syntax for declaring custom hooks
• Component Types — typing component references and higher-order patterns
• Render Types — controlling what a component is allowed to render
• Event Handling — typing event handlers and synthetic events
• Refs — typing useRef, createRef, and callback refs
• React Types — React.Node, React.MixedElement, and other built-in types
• Function and Class Components — legacy patterns for typing components without component syntax
• Higher-Order Components — typing HOC patterns