nextjs - 💡(How to fix) Fix useLayoutEffect context update causes local state reset in React 19 [4 comments, 3 participants]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.3.0

Binaries:
  Node: 22.x
  npm: 10.x

Relevant Packages:
  next: 16.1.1-canary.4
  react: 19.0.0
  react-dom: 19.0.0

Turbopack: Enabled

Which area(s) are affected?

App Router, Turbopack

Link to the code that reproduces this issue

https://github.com/jpoindexter/nextjs-useLayoutEffect-state-reset

To Reproduce

1. Clone the repo: git clone https://github.com/jpoindexter/nextjs-useLayoutEffect-state-reset
2. npm install
3. npm run dev
4. Open http://localhost:3000
5. Open browser console
6. Click the "EDIT" button

Describe the Bug

When a component uses useLayoutEffect to update React Context state (via a custom hook), and the component triggers a local state change, the local state appears to "reset" during the render cascade.

Console output on first click:

Click: setIsEditing(true)
Render: true    // Good - state changed!
Render: false   // BAD - state reset!

The context correctly receives the new state (right rail shows "EDIT MODE ACTIVE" briefly), but the component's local state reverts to its previous value.

Expected Behavior

• isEditing becomes true and stays true
• The edit form appears
• Console shows only: Render: true

Actual Behavior

• isEditing briefly becomes true, then resets to false
• The edit form does NOT appear
• Console shows true then false

Workaround

Change useLayoutEffect to useEffect and wrap context updates in startTransition:

useEffect(() => {
  startTransition(() => {
    context?.setContent(content);
  });
  return () => {
    startTransition(() => {
      context?.setContent(null);
    });
  };
}, [context, content, updateKey]);

Additional Context

• This bug does NOT occur in React 18
• Page refresh works correctly (component mounts fresh with correct state)
• The issue is specific to state transitions during useLayoutEffect context updates