A guide to installing and using Flow with React apps

Sarthak Langde
Sep 8, 2018 · 3 min read

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-bin

Source: 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-flow

Now, 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 init

4. 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 flow

5. To stop the flow server, use:

npm run flow stop

Source: 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.

Example: Sample code to trigger Flow warning

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.

Flow warning in WebStorm

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.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade