Skip to content

Clarify purity for null-guarded ref initialization #674

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
everettbu wants to merge 1 commit into from
Closed

Clarify purity for null-guarded ref initialization #674

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions ...kages/babel-plugin-react-compiler/docs/passes/49-validateNoRefAccessInRender.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@ if (ref.current == null) {
}
```

This exception only applies to the ref access pattern itself. Other validations
still apply to the initializer expression. In particular, the initializer must
still be predictable during render. Impure calls such as `Date.now()` or
`Math.random()` continue to fail the `purity` rule even when they appear inside
an allowed null-guarded ref initialization.

Error messages produced:
- Category: `Refs`
- Reason: "Cannot access refs during render"
Expand Down
13 changes: 13 additions & 0 deletions compiler/packages/eslint-plugin-react-compiler/__tests__/ImpureFunctionCallsRule-test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,19 @@ testRule(
makeTestCaseError('Cannot call impure function during render'),
],
},
{
name: 'Impure ref initialization still fails purity under a null guard',
code: normalizeIndent`
function Component() {
const ref = useRef(null);
if (ref.current === null) {
ref.current = Date.now();
}
return <div>{ref.current}</div>;

@greptile-apps greptile-apps Bot Mar 10, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ref read in return also violates the Refs rule

ref.current is read inside the JSX return expression, which would itself be a Refs violation in addition to the purity violation being tested. Because this test suite runs only the Purity rule, the refs error is never surfaced, but the test component as written is invalid under both rules.

To keep the test focused solely on the purity regression, consider dropping the ref read from the return value:

Suggested change
return <div>{ref.current}</div>;
return <div />;

This matches the style used in the new valid test in NoRefAccessInRender-tests.ts (line 28) and avoids unintentionally implying that reading ref.current in JSX is acceptable in this context.

Prompt To Fix With AI 
This is a comment left during a code review.
Path: compiler/packages/eslint-plugin-react-compiler/__tests__/ImpureFunctionCallsRule-test.ts
Line: 45

Comment:
**Ref read in return also violates the Refs rule**

`ref.current` is read inside the JSX return expression, which would itself be a `Refs` violation in addition to the purity violation being tested. Because this test suite runs only the `Purity` rule, the refs error is never surfaced, but the test component as written is invalid under _both_ rules.

To keep the test focused solely on the purity regression, consider dropping the ref read from the return value:

```suggestion
        return <div />;
```

This matches the style used in the new valid test in `NoRefAccessInRender-tests.ts` (line 28) and avoids unintentionally implying that reading `ref.current` in JSX is acceptable in this context.

How can I resolve this? If you propose a fix, please make it concise.

Fix in Claude Code Fix in Codex

}
`,
errors: [makeTestCaseError('Cannot call impure function during render')],
},
],
},
);
15 changes: 14 additions & 1 deletion compiler/packages/eslint-plugin-react-compiler/__tests__/NoRefAccessInRender-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,20 @@ testRule(
'no ref access in render rule',
allRules[getRuleForCategory(ErrorCategory.Refs).name].rule,
{
valid: [],
valid: [
{
name: 'allow null-guarded ref initialization',
code: normalizeIndent`
function Component() {
const ref = useRef(null);
if (ref.current === null) {
ref.current = "stable";
}
return <div />;
}
`,
},
],
invalid: [
{
name: 'validate against simple ref access in render',
Expand Down
Loading