mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Joe Savona
bf631a0bb6
This PR updates the conditions for which variables are promoted to context variables. The previous rule was to promote any variable where the variable was reassigned in some function expression other than the function that declared the variable. Notably, this meant that we did not use context variables for variables which were captured in a function expression, but reassigned _outside_ a function expression. The new rule is more consistent: we promote any variable which is a) reassigned somewhere and b) referenced in some function expression outside of their declaring function. The implementation builds two sets of identifiers, one for each criteria, then takes the union of these two sets. ## Motivation The motivation for this change is to unblock additional validations and optimizations of function expressions. It's currently difficult to translate metadata that we infer about identifiers outside of a function expression into metadata about the identifiers within a function expression — for example to infer types within function expression bodies based on type information outside, propagate constants into functions, infer reference effects, etc. After this change, the only free variables inside function expressions will be variables that are effectively `const` - never reassigned anywhere. Thus it will be safe to renumber those identifiers to match the outer context (during EnterSSA), making it trivial to map metadata from outside the function into the function. This change also more closely models the runtime representation — any variable referenced in a function, and reassigned somewhere, would have to be compiled (ie in a JS engine) to use a context variable.
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