mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Joe Savona
575db2b4ea
Updates the ReactiveFunction-based codegen from the previous PR to emit memoization code for each scope. This is currently naive and has some bugs, but it gets the idea across. The core logic is straightforward at this point, all the hard work is in earlier passes: * Compute one change variable per scope dependency, eg `const c_0 = $[0] === maxItems` * Generate one `let` binding for each scope output * Generate an if block where the test is if any of the change variables are true (`||` them together) * Generate the consequent block with the original code block, plus statements to save dependencies and outputs to their cache slots * Generate the alternate block to populate the scope outputs from their cached values ## Todos A few things don't quite work yet: * Codegen is designed to avoid emitting variables for temporary values, but that's causing a few values to sort of disappear n the examples, or get emitted twice. There are a variety of ways to achieve this but we'll need to ensure that this category of values gets assigned to a variable and then reference the variable. This is more involved. * Scopes can end up with zero dependencies, in which case we should check that the first output cache is initialized. This one is more straightforward. * If there are early returns, we don't record that they occurred and replay them in the `else` branch for each scope. We know the algorithm though so i'm okay delaying that for now.
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