A guide to installing and using Flow with React apps
You can install Flow and get started with it in just a couple of minutes. But, what exactly is Flow? Why do you need it in your next React or React Native app?
Flow is a static type checking system developed by the folks at Facebook. What is type checking? Well, it’s the process of comparing the data values with their data types. If the data values provided to the function/program are of the wrong type then an error is bound to occur.
Static type checking is the process of statically identifying these issues due to type mismatch. One more benefit is better auto-completion. If you are already familiar with PropTypes, then in the simplest of terms, it’s a better version of PropTypes. For large code bases, it is imperative to choose a type system like Flow or TypeScript instead of PropTypes.
Install Flow in create-react-app
All you need to install is the Flow binary using:
npm i -D flow-binSource: https://flow.org/en/docs/tools/create-react-app/
Installing Flow in a custom React app
The steps for integrating Flow into an existing app would be:
1. Setup compiler. Most people prefer to use Babel
npm i -D babel-cli babel-preset-flowNow, you need to enable it either in .babelrc or package.json.
//.babelrc {
"presets": ["flow"]
} //package.json "babel": {
"presets": [ "flow" ]
}
2. Install flow binary and setup up scripts
npm i -D flow-bin
//package.json "scripts": {
"flow": "flow"
}
3. You have to initialize flow once before you start using it so that the required folder and files can be created
npm run flow init4. From next time, every time you are coding, make sure to have your flow server running so that flow starts a background process to have type checking work for you automatically. This can be done using:
npm run flow5. To stop the flow server, use:
npm run flow stopSource: https://flow.org/en/docs/install/
Using Flow
Flow is very easy to use. First, make sure that your flow server is running. Now, to let Flow know which files to pickup for type checking, you need to mark those files using a special syntax. Just add the following to the beginning of the file in which you need to use Flow. Something like this:
// @flow[insert code here]
Now to actually see it in action, let's take the example of a React app in which you need to add two numbers. We will use special Flow syntax to denote types here.
As you can see, I made a type mistake by passing the arguments “5” and 6 to the addTwoNumbers function where it was actually accepting both integers or in Flow, numbers. Since, there is a type mismatch error, the editor itself notifies you about the issue, even without you explicitly trying to compile the app and running it.

This is what you will see. I am using WebStorm, so depending on what editor you use, the view may differ slightly.
Right off the bat, we can notice the advantage of using Flow in a large codebase. Where the component authors are different from the component consumers, the end developer might not be aware of what should be used as the data value for a particular prop. Flow can certainly help with these issues.
Learn more about the different Flow types here: https://flow.org/en/docs/types/
Originally published at sarthaklangde.com on September 8, 2018.
