In this article, we analyze few instances of Flow usage

in React source code

What’s Flow?

Flow is a static type checker for JavaScript. Flow’s installation is easy and straightforward.

Do checkout Flow’s Installation docs.

It is important to have @flow flag as a comment in the Javascript files where you need static type checking. Read more.

We pick few instances of Flow usage in React source code.

1. $FlowFixMe

$FlowFixMe[invalid-computed-prop]

Read more at https://flow.org/en/docs/strict/#toc-adoption

2. Types and Interfaces in packages/shared/ReactTypes.js

// picked from https://github.com/facebook/react/blob/main/packages/shared/ReactTypes.js#L22
…
export type ReactPortal = {
 $$typeof: symbol | number,
 key: null | string,
 containerInfo: any,
 children: ReactNodeList,
 // TODO: figure out the API for cross-renderer implementation.
 implementation: any,
};
// The subset of a Promise that React APIs rely on. This resolves a value.
// This doesn't require a return value neither from the handler nor the
// then function.
interface ThenableImpl<T> {
 then(
 onFulfill: (value: T) => mixed,
 onReject: (error: mixed) => mixed,
 ): void | Wakeable;
}

Read more about interfaces and types

Flow DX feels very much like TypeScript. Typescript made its first release in Oct, 2012 and Flow made its first release in Nov, 2014.

Check your code:

The great thing about Flow is that you can get near real-time feedback

on the state of your code. At any point that you want to check for errors,

just run:

# equivalent to `flow status`
flow

The first time this is run, the Flow background process will be spawned and all of your Flow files will be checked. Then, as you continue to iterate on your project, the background process will continuously monitor your code such that when you run flow again, the updated result will be near instantaneous.

About us:

At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

Up skill your team with our advanced courses based on codebase architecture. Reach out to us at hello@thinkthroo.com to learn more!

References:

1. https://flow.org/en/docs/errors/

2.https://github.com/facebook/react/blob/main/packages/react/src/ReactChildren.js#L45C8-L45C18

3.https://github.com/facebook/react/blob/main/packages/shared/ReactTypes.js#L22

4. https://engineering.fb.com/2014/11/18/web/flow-a-new-static-type-checker-for-javascript/

5. https://flow.org/en/docs/strict/#toc-adoption

6. https://flow.org/en/docs/errors/