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

---

// contexts/right-rail-context.tsx
'use client';

import { createContext, useContext, ReactNode, useCallback, useLayoutEffect, useState } from 'react';

const RightRailContext = createContext<{ content: ReactNode; setContent: (c: ReactNode) => void } | null>(null);

export function RightRailProvider({ children }: { children: ReactNode }) {
  const [content, setContent] = useState<ReactNode>(null);
  return (
    <RightRailContext.Provider value={{ content, setContent }}>
      {children}
    </RightRailContext.Provider>
  );
}

// This hook causes the bug
export function useSetRightRail(content: ReactNode, updateKey?: unknown) {
  const context = useContext(RightRailContext);

  // Using useLayoutEffect to update context triggers the bug
  useLayoutEffect(() => {
    context?.setContent(content);
    return () => context?.setContent(null);
  }, [context, content, updateKey]);
}

---

// components/editor.tsx
'use client';

import { useState } from 'react';
import { useSetRightRail } from '@/contexts/right-rail-context';

export function Editor() {
  const [isEditing, setIsEditing] = useState(false);

  // This useLayoutEffect update interferes with the state transition
  useSetRightRail(
    isEditing ? <div>EDIT MODE</div> : null,
    isEditing // updateKey
  );

  const startEditing = () => {
    console.log('Before setState:', isEditing); // false
    setIsEditing(true);
    console.log('After setState:', isEditing); // still false (expected, async)
  };

  // On first click, this logs true briefly, then false
  console.log('Render with isEditing:', isEditing);

  return (
    <div>
      {isEditing ? (
        <form>Edit Form Here</form>
      ) : (
        <button onClick={startEditing}>EDIT</button>
      )}
    </div>
  );
}

---

Before setState: false
Render with isEditing: true    // Good!
Render with isEditing: false   // BAD - state reset!
Render with isEditing: false   // Stuck in view mode

---

import { useEffect, startTransition } from 'react';

export function useSetRightRail(content: ReactNode, updateKey?: unknown) {
  const context = useContext(RightRailContext);

  // Use useEffect (not useLayoutEffect) to defer the context update
  useEffect(() => {
    if (context?.setContent) {
      startTransition(() => {
        context.setContent(content);
      });
    }
    return () => {
      startTransition(() => {
        context?.setContent(null);
      });
    };
  }, [context, content, updateKey]);
}

---

const startEditing = useCallback(() => {
  localStorage.setItem('editing-flag', 'true');
  window.location.reload(); // Force fresh mount
}, []);