feat(compiler): clarify preserve-manual-memoization error for forward…

[everettbu]

Mirror of facebook/react#35086
Original author: Rithvik914

---

… references

Improve diagnostic when a callback (useCallback/useMemo) depends on a memoized value declared later in the component. Adds explicit guidance to declare memoized values before callbacks that capture them and includes the dependency identifier when available.

Changes:

• Enhance message in ValidatePreservedManualMemoization.ts (StartMemoize visitor) to add declaration-order hint and actionable fix suggestion.
• Update existing snapshot: error.false-positive-useMemo-overlap-scopes.expect.md to reflect new wording.
• Add new failing fixture & snapshot: error.useCallback-references-later-useMemo.* (demonstrates forward reference error)
• Add new passing fixture & snapshot: useCallback-after-useMemo-declared.* (proves correct order is accepted)

Testing:

• Snap runner executed; new fixtures behave as expected.
• Overall compiler tests previously at 1786 total with unrelated failures retained; targeted fixtures pass.

Rationale:
Clearer messaging reduces confusion around declaration order vs dependency inference, speeding developer remediation.

Summary

How did you test this change?

[greptile-apps]

Greptile Overview

Greptile Summary

Improves the diagnostic message in ValidatePreservedManualMemoization when a callback depends on a later-declared memoized value. The enhanced error now includes the dependency name and suggests moving declarations to resolve the issue.

Key changes:

• Enhanced error message extracts dependency name and provides specific guidance about declaration order
• Updated existing snapshot for error.false-positive-useMemo-overlap-scopes test
• Added passing test case demonstrating correct declaration order

Issue found:

• The new failing test fixture error.useCallback-references-later-useMemo.ts has a misleading comment claiming this is a "false positive preserve-manual-memoization error" and "valid pattern in React", but the actual error is from a different validator (InferMutationAliasingEffects) catching legitimate forward references that would cause ReferenceErrors at runtime. The test doesn't actually demonstrate the improved error message from this PR.

Confidence Score: 3/5

• Safe to merge with clarification needed on test fixture intent
• The core code change is solid and improves error messaging, but one of the new test fixtures has a misleading comment that mischaracterizes the error being tested, which could confuse future developers
• Pay attention to error.useCallback-references-later-useMemo.ts - verify the comment accurately describes what is being tested

Important Files Changed

File Analysis

Filename	Score	Overview
compiler/packages/babel-plugin-react-compiler/src/Validation/ValidatePreservedManualMemoization.ts	5/5	Improves error message by adding dependency name and declaration order guidance when detecting forward references
compiler/packages/babel-plugin-react-compiler/src/tests/fixtures/compiler/preserve-memo-validation/error.useCallback-references-later-useMemo.ts	3/5	Test fixture with misleading comment - triggers Immutability error, not PreserveManualMemo error as claimed
compiler/packages/babel-plugin-react-compiler/src/tests/fixtures/compiler/preserve-memo-validation/error.useCallback-references-later-useMemo.expect.md	3/5	Snapshot shows Immutability error for forward reference, not the PreserveManualMemo error this PR improves

[greptile-apps]

_{7 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

logic: Comment describes "false positive preserve-manual-memoization error" but the actual error (see .expect.md) is "Cannot access variable before it is declared" from the Immutability category (ErrorCategory.Immutability in InferMutationAliasingEffects.ts:1278), not from PreserveManualMemo validation.

The comment also claims "This is a valid pattern in React - declaration order doesn't matter" but forward references in JavaScript do cause ReferenceErrors at runtime. The compiler error is correct.

Prompt To Fix With AI

This is a comment left during a code review.
Path: compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useCallback-references-later-useMemo.ts
Line: 4:16

Comment:
**logic:** Comment describes "false positive preserve-manual-memoization error" but the actual error (see `.expect.md`) is "Cannot access variable before it is declared" from the Immutability category (ErrorCategory.Immutability in `InferMutationAliasingEffects.ts:1278`), not from PreserveManualMemo validation.

The comment also claims "This is a valid pattern in React - declaration order doesn't matter" but forward references in JavaScript **do** cause ReferenceErrors at runtime. The compiler error is correct.

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

[everettbu]

Upstream PR was closed or merged. Code is synced via branch mirror.