Bug in rerenderOptimistic: Incorrect mount-or-update check order leads to improper hook state handling #32220
Labels
Status: Unconfirmed
A potential issue that we haven't yet confirmed as a bug
Description
In the rerenderOptimistic function of React, there is a bug where the order of operations is incorrect when determining whether a component is mounting or updating. Specifically, the check for currentHook !== null is performed before calling updateWorkInProgressHook, which causes improper handling of hook state during optimistic updates.
React version
React 18.x (or specify your version if different)
###Steps to Reproduce:
Create a React component that uses the useOptimistic hook for managing optimistic state.
Perform a state update inside the render phase (e.g., inside useEffect or useCallback).
Observe that the hook's state and update behavior are incorrect, leading to inconsistent renders.
This issue typically occurs when the useOptimistic hook is the first hook in the component, and there are updates or transitions that occur later in the render phase.
Link to Code Example:
[CodeSandbox Example or GitHub Repo with Minimal Example]
Current Behavior
The state update and hook processing are incorrect because currentHook is checked before updating it. This causes the component to incorrectly identify whether it is mounting or updating.
Expected Behavior
updateWorkInProgressHook should be called before checking whether currentHook is null, ensuring that the state is properly updated and the correct lifecycle phase (mount or update) is identified. This fix would result in proper optimistic update handling during re-renders.
The text was updated successfully, but these errors were encountered: