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 me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

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/