mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Joe Savona
9048f59237
Adds a new pass that uses escape analysis and React-specific heuristics to tune the amount of memoization applied. Specifically, the pass ensures that we only memoize: * Values which escape (are directly returned or transitively aliased by a returned value) * ...and that are not JSX elements * OR values which are _dependencies_ of scopes that produce an escaping value. The latter case is necessary to avoid breaking memoization of an escaping value bc a scope happened to have a non-escaping dependency. ## Algorithm 1. First we build up a graph, a mapping of IdentifierId to a node describing all the scopes and inputs involved in creating that identifier. Individual nodes are marked as definitely aliased, conditionally aliased, or unaliased: a. Arrays, objects, function calls all produce a new value and are always marked as aliased b. Conditional and logical expressions (and a few others) are conditinally aliased, depending on whether their result value is aliased. c. JSX is always unaliased (though its props children may be) 2. The same pass which builds the graph also stores the set of returned identifiers 3. We traverse the graph starting from the returned identifiers and mark reachable dependencies as escaping, based on the combination of the parent node's type and its children (eg a conditional node with an aliased dep promotes to aliased). 4. Finally we prune scopes whose outputs weren't marked.
test262
@ 83a46bfe0e
React Forget
React Forget is an experimental Babel plugin to automatically memoize React Hooks and Components.
Development
# tsc --watch
$ yarn dev
# in another terminal window
$ yarn test --watch
Notes
An overview of the implementation can be found in the Architecture Overview.
This transform
- needs plugin-syntax-jsx as a dependency to inherit the syntax from.
- should be run before plugin-transform-react-jsx
- assume the enforcement of rules of hooks, i.e.
- only call hooks from React functions
- only call hooks at the top level
- https://www.npmjs.com/package/eslint-plugin-react-hooks
Scaffolding
- https://github.com/facebook/flow/tree/master/packages/babel-plugin-transform-flow-enums
- https://github.com/babel/babel/blob/main/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts
Reference