dillon1000/react

Commit

[compiler] Debug tool to emit change detection code rather than memoization

Summary: The essential assumption of the compiler is that if the inputs to a computation have not changed, then the output should not change either--computation that the compiler optimizes is idempotent.

This is, of course, known to be false in practice, because this property rests on requirements (the Rules of React) that are loosely enforced at best. When rolling out the compiler to a codebase that might have rules of react violations, how should developers debug any issues that arise?

This diff attempts one approach to that: when the option is set, rather than simply skipping computation when dependencies haven't changed, we will *still perform the computation*, but will then use a runtime function to compare the original value and the resultant value. The runtime function can be customized, but the idea is that it will perform a structural equality check on the values, and if the values aren't structurally equal, we can report an error, including information about what file and what variable was to blame.

This assists in debugging by narrowing down what specific computation is responsible for a difference in behavior between the uncompiled code and the program after compilation.

ghstack-source-id: 50dad3dacfc7fef74be350431aa2ebf5e9cb0031
Pull Request resolved: https://github.com/facebook/react/pull/29656
Browse files
Changed paths11 files
First-parent comparison
M compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts ModifiedM compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts ModifiedM compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts ModifiedM compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts ModifiedA compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nomemo-and-change-detect.expect.md AddedA compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nomemo-and-change-detect.js AddedA compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-pruned-dependency-change-detect.expect.md AddedA compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useState-pruned-dependency-change-detect.js AddedM compiler/packages/react-compiler-runtime/src/index.ts ModifiedM compiler/packages/snap/src/SproutTodoFilter.ts ModifiedM compiler/packages/snap/src/compiler.ts Modified
Patch

Files changed

Rendering syntax-highlighted changes…