[compiler][poc] Improve impurity/ref tracking #35298
Draft
+623
−155
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
React Core Team
josephsavona
commented
Dec 5, 2025
Comment on lines
+644
to
+648
| // Render the arguments | ||
| { | ||
| kind: 'Render', | ||
| place: '@rest', | ||
| }, |
Member
Author
There was a problem hiding this comment.
we need to add the Render effect
josephsavona
commented
Dec 5, 2025
| ], | ||
| }); | ||
|
|
||
| const EffectHookAliasing: AliasingSignatureConfig = { |
Member
Author
There was a problem hiding this comment.
extracting from useEffect so we can reuse for insertion/layout effects too
josephsavona
commented
Dec 5, 2025
compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts
Outdated
Show resolved
Hide resolved
josephsavona
commented
Dec 5, 2025
Comment on lines
+2189
to
+2190
| if (prop.kind === 'JsxAttribute' && /^on[A-Z]/.test(prop.name)) { | ||
| continue; | ||
| } | ||
| effects.push({ | ||
| kind: 'Render', | ||
| place: prop.kind === 'JsxAttribute' ? prop.place : prop.argument, | ||
| }); |
Member
Author
There was a problem hiding this comment.
consider all props except obvious event handlers as having a render effect, but InferMutationAliasingRanges is smarter about how it applies render effects to functions
josephsavona
commented
Dec 5, 2025
.../src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect.expect.md
Outdated
Show resolved
Hide resolved
josephsavona
commented
Dec 5, 2025
Comment on lines
9
to
11
| const f = () => Math.random(); | ||
| const ref = useRef(f()); | ||
| return <div ref={ref} nonRef={nonRef} state={state} setState={setState} />; |
Member
Author
There was a problem hiding this comment.
needs cleanup but yay, allowing using an impure value in a ref
josephsavona
force-pushed
the
pr35298
branch
2 times, most recently
from
d7beb75 to
6ab3ca1
Compare
We currently model impure functions like `Date.now()` with an `Impure` effect, but the way this works is that the effect is considered an error if it's called at all. But we really want to reflect the fact that the _value_ is impure, and is okay to be used outside of render. For example, `useRef(Date.now())` should be fine.
So this PR changes the Impure effect to describe that an impure value flows `into: Place`. We flow impurity through the data flow graph during InferMutationAliasingRanges, including propagating this to the function's effects. So if a function expression returns a transitively impure value, that's expressed in our inferred signature for that function. Calling it propagates the impurity via our effect system.
We stop this propagation when reaching a ref, allowing `useRef(Date.now())` or `useRef(localFunctionThatReturnsDateNow())`.
This lets us also model accessing a ref as an impure value - we just emit an `Impure` event for PropertyLoad/ComputedLoad off of a ref, and the above tracking kicks in.
A final piece is that we can also use our existing machinery to disallow writing to global values during render to handle writing to refs - except that we need to allow the lazy init pattern. So it probably makes sense to keep the ref validation pass, but scope it back to just handling writes and not reads.
This definitely needs more polish, the error messages would ideally be something like:
```
Error: cannot call impure function in render
Blah blah description of why this is bad...
foo.js:0:0
<Foo x={x} />
^ This value reads from an impure function
foo.js:0:0
x = Date.now();
^^^^^^^^ The value derives from Date.now which is impure
```
Ie show you both the local site (where impurity flows into render) and the ultiamte source of the impure value.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
We currently model impure functions like
Date.now()with anImpureeffect, but the way this works is that the effect is considered an error if it's called at all. But we really want to reflect the fact that the value is impure, and is okay to be used outside of render. For example,useRef(Date.now())should be fine.So this PR changes the Impure effect to describe that an impure value flows
into: Place. We flow impurity through the data flow graph during InferMutationAliasingRanges, including propagating this to the function's effects. So if a function expression returns a transitively impure value, that's expressed in our inferred signature for that function. Calling it propagates the impurity via our effect system.We stop this propagation when reaching a ref, allowing
useRef(Date.now())oruseRef(localFunctionThatReturnsDateNow()).This lets us also model accessing a ref as an impure value - we just emit an
Impureevent for PropertyLoad/ComputedLoad off of a ref, and the above tracking kicks in.A final piece is that we can also use our existing machinery to disallow writing to global values during render to handle writing to refs - except that we need to allow the lazy init pattern. So it probably makes sense to keep the ref validation pass, but scope it back to just handling writes and not reads.
This definitely needs more polish, the error messages would ideally be something like:
Ie show you both the local site (where impurity flows into render) and the ultiamte source of the impure value.