What is the proper way to use React Memo with Flow?

Make sure you have the latest version of flow. When I updated my flow version it just worked. I was missing the // @flow at the top so had to add all=true to my preset config.


I have got the same problem. The problem is not with the Flow but with Babel.

React.memo with Flow

You have got it right. Correct approach really is:

export default memo<Props>(MyComponent);

Compilation problem

There are two ways to solve that.

1. Simple: Adding flow annotation to the top

Add // @flow to the top of the file. The error comes from Babel and it needs the annotation there. Even though you might have all=true in .flowconfig (and Flow work perfectly) you need to do that.

Useful when using create-react-app and do not want to eject.

2. Configuring Babel

Add Babel preset for Flow and specify "all": true option to your .babelrc:

{   
  "presets": [
    ["@babel/preset-flow", {
      "all": true
    }]
  ]
}

However, this needs anyone using create-react-app to eject. (Or might use react-app-rewired but I have no experience with that.)

This solution is mentioned on here (thanks @fl0shizzle for mentioning it) and for discussion about create-react-app solution look on here.