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.