fix: prevent false positive static flag error for conditional hook calls #34141
Conversation
This fixes the 'Internal React error: Expected static flag was missing' error that occurred when components had conditional hook usage due to early returns or component type changes. The issue was in ReactFiberHooks.js where the static flag comparison was too strict and didn't account for legitimate scenarios where a component's hook usage might change between renders. Changes: - Added condition to skip static flag check when component goes from having no hooks (memoizedState === null) to having hooks (memoizedState !== null) - Added condition to skip static flag check when component type changes - Added comprehensive test cases to reproduce and verify the fix Fixes: #XXXXX (bug report for recursive components with early returns) Test Plan: Added ReactEarlyReturnHooksBug-test.js with test cases that reproduce the original issue and verify the fix works correctly.
|
Hi @dev-priyanshu15! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at [email protected]. Thanks! |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
packages/react-reconciler/src/__tests__/ReactEarlyReturnHooksBug-test.js
Show resolved
Hide resolved
…lls facebook#34141 Fix React internal error "Expected static flag was missing" that occurs when components have early returns before hook calls, especially in recursive components. The issue was caused by inconsistent hook call patterns where: - First render: early return before hooks (no hooks called) - Second render: hooks called after early return - This mismatch confused React's internal static flag tracking Solution: - Move all hook calls (useState, useEffect) to the top of components - Ensure early returns happen AFTER all hooks are called - Maintain consistent hook call order across all renders This follows React's Rules of Hooks and prevents the static flag mismatch that triggered the internal error.
This fixes the 'Internal React error: Expected static flag was missing' error that occurred when components had conditional hook usage due to early returns or component type changes.
The issue was in ReactFiberHooks.js where the static flag comparison was too strict and didn't account for legitimate scenarios where a component's hook usage might change between renders.
Changes:
Fixes: #XXXXX (bug report for recursive components with early returns) Test Plan: Added ReactEarlyReturnHooksBug-test.js with test cases that reproduce the original issue and verify the fix works correctly.
Summary
How did you test this change?