[compiler] Add catching useStates that shadow a reactive value

[everettbu]

Mirror of facebook/react#34392
Original author: jorge-cab

---

---

Stack created with Sapling. Best reviewed with ReviewStack.

• #34437
• -> #34392
• #34391
• #34390
• #34389
• #34388
• #34387
• #34386
• #34385
• #34384

[greptile-apps]

Greptile Overview

Greptile Summary

This PR enhances the React Compiler's validation to detect useState calls that shadow reactive values (props/state). The key improvements include:

• Enhanced Error Categorization: Split the generic EffectDerivationsOfState error into two specific categories:

  • EffectDerivationDeriveInRender: For cases where derived values should be computed during render
  • EffectDerivationShadowingParentState: For cases where local state shadows parent state and should be lifted up

• Improved Detection Logic: Added comprehensive tracking through derivationCache, shadowingUseState, effectSetStates, and setStateCalls maps to identify:

  • Which values derive from props vs state vs both
  • Where useState calls shadow props
  • Whether setState is used both inside and outside effects

• Smarter Error Messages: The validation now distinguishes between:

  • Values that should just be computed in render (simpler case)
  • Local state that shadows props and requires state lifting or conditional updates in render (more complex pattern)

• Comprehensive Test Coverage: Added 13 new test fixtures covering various scenarios including one-time initialization (which correctly passes), mixed deps, shadowed props, conditionals, and side effects

Confidence Score: 4/5

• This PR is safe to merge with good test coverage, though the complex validation logic warrants careful review
• Score reflects solid implementation with comprehensive test coverage (13+ test fixtures), clear separation of concerns in error categories, and well-structured tracking logic. The main validation file has significant complexity with multiple tracking maps and nested loops, but this complexity appears necessary for the feature. No critical bugs identified.
• Pay closest attention to ValidateNoDerivedComputationsInEffects.ts due to its complexity and the intricate logic for tracking derivations through the HIR

Important Files Changed

File Analysis

Filename	Score	Overview
compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoDerivedComputationsInEffects.ts	4/5	Significantly enhanced validation logic to detect useState calls that shadow reactive values and improved error categorization by splitting into two error types (derive in render vs shadowing parent state)
compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts	5/5	Refactored error categories by splitting EffectDerivationsOfState into two more specific categories: EffectDerivationDeriveInRender and EffectDerivationShadowingParentState
compiler/packages/babel-plugin-react-compiler/src/tests/fixtures/compiler/useEffect/derived-state-one-time-init-no-error.js	5/5	New test fixture verifying that one-time initialization with empty dependency array does not trigger validation errors
compiler/packages/babel-plugin-react-compiler/src/tests/fixtures/compiler/useEffect/error.derived-state-from-shadowed-props.js	5/5	Test fixture for detecting state that shadows props with local updates
compiler/packages/babel-plugin-react-compiler/src/tests/fixtures/compiler/useEffect/error.shadowed-props-with-onchange.js	5/5	Test fixture for shadowed props that need onChange callbacks

[greptile-apps]

_{26 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[everettbu]

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