mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Joe Savona
1fd4bad525
This is an incremental step to removing `Place.memberPath`. This PR changes how we handle MemberExpressions in rvalue position, converting to a new `PropertyLoad` InstructionValue variant. Example: ``` let x = a.b; x.y = b.c; => Const tmp1 = PropertyLoad a, 'b'; Const x = Place tmp1; Const tmp2 = PropertyLoad b, 'c'; Reassign x.y = tmp2 ``` That we already recently made a chance to ensure that _if_ the lvalue is a member expression, that we convert the RHS to a Place. So although `x.y = b.c` could technically be lowered to a single instruction (with the`b.c` as a PropertyLoad), we force this to a temporary to ensure that we can independently memoize the RHS value. The net result is that the following combinations are possible: * `x = y`, lvalue identifier, rvalue identifier * `x.y = y` lvalue member path, rvalue identifier * `x = y.z` lvalue identifier, rvalue property load As noted above, `x.y = a.b` no longer occurs (and there's an invariant for this in one of the passes). A follow-up PR will add a PropertyStore instruction so that we can remove member paths in lvalue position too.
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