Even Better Support for React in Flow – Flow – Medium

Even Better Support for React in Flow

by @calebmer



#ReactJS #Flow #JavaScript

  • It is time to rethink how Flow models React.In Flow 0.53.0 we are changing how Flow models React and in doing this we can provide better types for higher-order components, strict typing for React children, and fixes for a host of bugs in Flow’s React support.The biggest change we are making is to modify how you define React class components.
  • A React component in 0.53.0 looks like this:type Props = { foo: number,};type State = { bar: number,};class MyComponent extends React.ComponentProps, State { state = { bar: 42, }; render() { return this.props.foo + this.state.bar; }}When your component has no state, you only need to pass in a single type argument.
  • Without state your component definition would look like this:type Props = { foo: number,};class MyComponent extends React.ComponentProps { render() { return this.props.foo; }}If your component has default props then add a static defaultProps property:type Props = { foo: number,};class MyComponent extends React.ComponentProps { static defaultProps = { foo: 42, }; render() { return this.props.foo; }}Flow will infer the type of default props from your static property.
  • For the React Router example above, you would type the Route component’s children as:type Props = { children: (data: { match: boolean }) = React.Node, path: string,};class Route extends React.ComponentProps { /* … */ }To learn more about typing React children read our documentation guide on the topic.The children prop returns a React.Node, which is the type for any value that can be rendered by React.
  • Here is how you would type a simple higher-order component that injects a number prop, foo:function injectPropProps: {}( Component: React.ComponentType{ foo: number } Props,): React.ComponentTypeProps { return function WrapperComponent(props: Props) { return Component {…props} foo={42} /; };}class MyComponent extends React.Component{ a: number, b: number, foo: number,} {}const MyEnhancedComponent = injectProp(MyComponent);// We don’t need to pass in `foo` even though// `MyComponent` requires it!MyEnhancedComponent a={1} b={2} /;Here we use the new React.ComponentTypeProps utility along with an intersection to inject the prop foo.Even MoreThere is a lot more that we fit into this release for our React support.

The first version of Flow support for React was a magical implementation of React.createClass(). Since then, React has evolved significantly. It is time to rethink how Flow models React. In Flow 0.53…

@atomicjolt: Even Better Support for React in Flow

by @calebmer

#ReactJS #Flow #JavaScript

. Since then, React has evolved significantly. It is time to rethink how Flow models React.

In Flow 0.53.0 we are changing how Flow models React and in doing this we can provide better types for higher-order components, strict typing for React children, and fixes for a host of bugs in Flow’s React support.

explicitly. A React component in 0.53.0 looks like this:

foo: number,

bar: number,

class MyComponent extends React.Component {

state = {

bar: 42,

render() {

return this.props.foo + this.state.bar;

When your component has no state, you only need to pass in a single type argument. The second type argument that represents state will default to undefined. Without state your component definition would look like this:

foo: number,

render() {

return this.props.foo;

property:

foo: number,

static defaultProps = {

foo: 42,

render() {

return this.props.foo;

Flow will infer the type of default props from your static property. You don’t need to provide Flow with any type annotations for default props. The same thing will work for functional components:

function MyComponent({ foo }: { foo: number }) {

return foo;

foo: 42,

You will notice that the components in our examples have been returning numbers from their render methods. This is because Flow’s React types have been updated for React 16. Flow will now let you return strings, arrays, and of course numbers from render methods. Once React 16 is released, React will render those values.

Later in this article I’ll discuss why we are no longer inferring the types of props and state. In short, it was confusing to teach and could be bad for performance.

utility, which I’ll also discuss later in the article.

For now let’s move on and talk about what else we are including in Flow 0.53.0 for React.

children, and React Router 4 includes an API that wants a function for children which looks like this:

{({ match }) => (

  • component’s children as:

    children: (data: { match: boolean }) => React.Node,

    path: string,

    class Route extends React.Component { /* … */ }

    To learn more about typing React children read our documentation guide on the topic.

    , which is the type for any value that can be rendered by React. This also brings us to the next feature we are adding to Flow’s React support…

    Modeling advanced React patterns, like higher-order components, is difficult today because the types you would need are either not provided or undocumented. In this release we added a whole suite of utility types which are all documented on our website. Some of the highlights include:

    These are some of the highlights, but there are many more utility types that you can read about in our documentation.

    function injectProp(

    Component: React.ComponentType<{ foo: number } & Props>,

    ): React.ComponentType {

    return function WrapperComponent(props: Props) {

    return ;

    a: number,

    b: number,

    foo: number,

    const MyEnhancedComponent = injectProp(MyComponent);

    // We don’t need to pass in `foo` even though

    // `MyComponent` requires it!

    ;

    There is a lot more that we fit into this release for our React support. If we missed anything in improving our React support let us know.

    Because we fixed a lot of bugs, Flow will likely catch a lot more errors than it did before in your React code. If you see a lot of errors it’s because Flow got a lot better at checking React!

    As you may have noticed we also made a couple of breaking changes which is also why we are announcing…

    is the exact same tool we use to upgrade our code internally at Facebook and it is available as an npm module that anyone can use.

    feature:

    If you have any trouble upgrading, let us know by sending us a message on Twitter: flowtype.

    Even Better Support for React in Flow – Flow – Medium