const [isPending, startTransition] = useTransition();
const handleSearch = (query) => {
  setInputValue(query);          // Urgent: update input immediately
  startTransition(() => {
    setFilteredResults(filter(query)); // Non-urgent: can be interrupted
  });
};

Render 1: useState(0) -> useEffect(fn) -> useMemo(fn)
           idx=0           idx=1           idx=2

Render 2 (with conditional): useEffect(fn) -> useMemo(fn)
                               idx=0           idx=1

// BAD: useEffect causes visible flicker
useEffect(() => {
  const rect = tooltipRef.current.getBoundingClientRect();
  setPosition({ top: rect.bottom, left: rect.left });
}, []);
// User sees tooltip at (0,0) for one frame, then it jumps

// GOOD: useLayoutEffect prevents flicker
useLayoutEffect(() => {
  const rect = tooltipRef.current.getBoundingClientRect();
  setPosition({ top: rect.bottom, left: rect.left });
}, []);
// User never sees the wrong position

// Parent component
const Parent = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // Without useCallback: ExpensiveChild re-renders on EVERY parent render
  // (even when only `text` changes)
  const handleIncrement = useCallback(() => {
    setCount(c => c + 1);
  }, []); // stable reference

  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <ExpensiveChild onIncrement={handleIncrement} />
    </>
  );
};
const ExpensiveChild = React.memo(({ onIncrement }) => {
  // Renders 500 items... expensive
});

const countRef = useRef(0);
const [count, setCount] = useState(0);

const logValues = () => {
  setTimeout(() => {
    console.log('ref:', countRef.current);  // Always latest
    console.log('state:', count);            // Stale closure value
  }, 3000);
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'SET_FIELD':
      return { ...state, [action.field]: action.value };
    case 'RESET':
      return initialState;
    case 'SUBMIT':
      return { ...state, submitting: true, error: null };
    default:
      return state;
  }
};
const [state, dispatch] = useReducer(reducer, initialState);

const [state, dispatch] = useReducer(reducer, props, createInitialState);
// Third argument is an init function -- avoids recreating initial state on every render

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handler = () => setSize({
      width: window.innerWidth,
      height: window.innerHeight,
    });
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  return size;
}

const { result } = renderHook(() => useCounter(0));
act(() => result.current.increment());
expect(result.current.count).toBe(1);

const StateContext = createContext();
const DispatchContext = createContext(); // Separate contexts!

function AppProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
}

const withAuth = (Component) => {
  return function AuthenticatedComponent(props) {
    const { isAuthenticated, user } = useAuth();
    if (!isAuthenticated) return <Redirect to="/login" />;
    return <Component {...props} user={user} />;
  };
};

const ProtectedDashboard = withAuth(Dashboard);

class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({ x: event.clientX, y: event.clientY });
  };

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

// Usage - consumer decides what to render
<MouseTracker render={({ x, y }) => (
  <h1>The mouse position is ({x}, {y})</h1>
)} />

<MouseTracker>
  {({ x, y }) => <Crosshair x={x} y={y} />}
</MouseTracker>

// Bad: new function every render
<DataFetcher render={(data) => <List data={data} />} />

// Better: stable function reference
const renderList = useCallback((data) => <List data={data} />, []);
<DataFetcher render={renderList} />

const TabsContext = createContext();

function Tabs({ children, defaultIndex = 0 }) {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);
  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

Tabs.Tab = function Tab({ index, children }) {
  const { activeIndex, setActiveIndex } = useContext(TabsContext);
  return (
    <button
      className={activeIndex === index ? 'active' : ''}
      onClick={() => setActiveIndex(index)}
    >
      {children}
    </button>
  );
};

Tabs.Panel = function Panel({ index, children }) {
  const { activeIndex } = useContext(TabsContext);
  return activeIndex === index ? <div>{children}</div> : null;
};

// Usage -- clean, declarative API
<Tabs defaultIndex={0}>
  <Tabs.Tab index={0}>Profile</Tabs.Tab>
  <Tabs.Tab index={1}>Settings</Tabs.Tab>
  <Tabs.Panel index={0}><ProfileContent /></Tabs.Panel>
  <Tabs.Panel index={1}><SettingsContent /></Tabs.Panel>
</Tabs>

class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    // Update state to render fallback
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // Log to error reporting service (Sentry, DataDog, etc.)
    logErrorToService(error, errorInfo.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return <FallbackUI error={this.state.error} />;
    }
    return this.props.children;
  }
}

<ErrorBoundary
  fallback={<RetryButton />}
  onReset={() => queryClient.resetQueries()}
  resetKeys={[userId]}  // Auto-reset when userId changes
>
  <UserProfile />
</ErrorBoundary>

const Modal = ({ children, isOpen }) => {
  if (!isOpen) return null;
  return ReactDOM.createPortal(
    <div className="modal-overlay">
      <div className="modal-content">{children}</div>
    </div>,
    document.getElementById('modal-root')
  );
};

DOM tree: #root > App, #modal-root > Modal
React tree: App > Modal (parent-child)
Click in Modal bubbles to App in React, NOT to #modal-root's parent in DOM

const ExpensiveList = React.memo(function ExpensiveList({ items, onSelect }) {
  return items.map(item => <ListItem key={item.id} item={item} onSelect={onSelect} />);
});

// Custom comparator for complex cases
const OptimizedChart = React.memo(ChartComponent, (prevProps, nextProps) => {
  return prevProps.data.length === nextProps.data.length &&
         prevProps.data.every((d, i) => d.id === nextProps.data[i].id);
});

// BROKEN: memo never helps because style and onClick are new every render
const Parent = () => {
  return (
    <MemoChild
      style={{ color: 'red' }}            // New object every render
      onClick={() => doSomething()}         // New function every render
    />
  );
};

// Pass primitives instead of objects
<MemoChild color="red" fontSize={14} onClick={stableCallback} />

// Lazy-loaded component -- webpack/vite creates a separate chunk
const Settings = React.lazy(() => import('./Settings'));
const AdminPanel = React.lazy(() => import('./AdminPanel'));

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/settings" element={<Settings />} />
        <Route path="/admin" element={<AdminPanel />} />
      </Routes>
    </Suspense>
  );
}

// Prefetch on hover (load chunk before user clicks)
const Settings = React.lazy(() => import('./Settings'));
const prefetchSettings = () => import('./Settings'); // triggers chunk download

<Link to="/settings" onMouseEnter={prefetchSettings}>
  Settings
</Link>

<ErrorBoundary fallback={<ChunkLoadError />}>
  <Suspense fallback={<Spinner />}>
    <LazyComponent />
  </Suspense>
</ErrorBoundary>

import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

<FixedSizeList
  height={600}
  width={400}
  itemCount={10000}
  itemSize={35}
>
  {Row}
</FixedSizeList>

Each TodoItem has a controlled input for editing
List: ["Buy milk", "Walk dog", "Read book"]
Keys: [0, 1, 2]
User edits "Walk dog" input to "Walk cat"
User deletes "Buy milk"
New list: ["Walk dog", "Read book"], keys: [0, 1]
Bug: Item at key=0 ("Walk dog") still shows the INPUT STATE from old key=0 ("Buy milk")
The edited text "Walk cat" is GONE

// BAD: new key every render, destroys and recreates all components
items.map(item => <Item key={uuid()} />)

// GOOD: stable ID from data
items.map(item => <Item key={item.id} />)

// WRONG: Mutation -- same reference, React sees no change
const handleClick = () => {
  user.name = 'Alice';  // Mutating existing object
  setUser(user);         // Same reference! React skips re-render
};

// RIGHT: New object -- new reference, React detects change
const handleClick = () => {
  setUser({ ...user, name: 'Alice' }); // Spread creates new object
};

import { produce } from 'immer';

// Instead of deeply nested spreads:
const next = {
  ...state,
  user: { ...state.user, address: { ...state.user.address, city: 'NYC' } }
};

// Immer lets you write "mutations" that produce immutable results:
const next = produce(state, draft => {
  draft.user.address.city = 'NYC';
});

// ServerComponent.jsx (default in Next.js App Router)
import { db } from './database';

async function UserProfile({ userId }) {
  const user = await db.user.findUnique({ where: { id: userId } });
  return (
    <div>
      <h1>{user.name}</h1>
      <LikeButton initialCount={user.likes} />
    </div>
  );
}

// LikeButton.jsx
'use client';
import { useState } from 'react';

function LikeButton({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  return <button onClick={() => setCount(c => c + 1)}>{count} Likes</button>;
}

// Enzyme style (fragile)
test('increments count', () => {
  const wrapper = shallow(<Counter />);
  expect(wrapper.state('count')).toBe(0);
  wrapper.find('button').simulate('click');
  expect(wrapper.state('count')).toBe(1);
});

// RTL style (resilient)
test('increments count', () => {
  render(<Counter />);
  const button = screen.getByRole('button', { name: /count: 0/i });
  fireEvent.click(button);
  expect(screen.getByRole('button', { name: /count: 1/i })).toBeInTheDocument();
});

// Bug: no cleanup -- connection leaks on unmount
useEffect(() => {
  const ws = new WebSocket(url);
  ws.onmessage = handleMessage;
}, [url]);

// Fixed: cleanup closes connection
useEffect(() => {
  const ws = new WebSocket(url);
  ws.onmessage = handleMessage;
  return () => ws.close(); // StrictMode tests this
}, [url]);

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <button onClick={() => setCount(c => c - 1)}>Decrement</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
};

// BUG: All three use the same count value
const handleTripleIncrement = () => {
  setCount(count + 1); // count is 0 -> sets 1
  setCount(count + 1); // count is still 0 -> sets 1
  setCount(count + 1); // count is still 0 -> sets 1
};

// CORRECT: Each gets the latest pending value
const handleTripleIncrement = () => {
  setCount(c => c + 1); // 0 -> 1
  setCount(c => c + 1); // 1 -> 2
  setCount(c => c + 1); // 2 -> 3
};

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false; // Race condition guard

    async function fetchUser() {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const data = await response.json();
        if (!cancelled) {
          setUser(data);
          setLoading(false);
        }
      } catch (err) {
        if (!cancelled) {
          setError(err.message);
          setLoading(false);
        }
      }
    }

    fetchUser();
    return () => { cancelled = true; }; // Cleanup on unmount or re-fetch
  }, [userId]);

  if (loading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;
  return <UserCard user={user} />;
}

useEffect(() => {
  const controller = new AbortController();
  fetch(`/api/users/${userId}`, { signal: controller.signal })
    .then(res => res.json())
    .then(data => setUser(data))
    .catch(err => {
      if (err.name !== 'AbortError') setError(err.message);
    });
  return () => controller.abort(); // Actually cancels the network request
}, [userId]);

function usePrevious(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value; // Updates AFTER render completes
  }, [value]);

  return ref.current; // Returns the OLD value (before effect runs)
}

// Usage
function PriceDisplay({ price }) {
  const prevPrice = usePrevious(price);
  const direction = price > prevPrice ? 'up' : price < prevPrice ? 'down' : 'same';

  return (
    <span className={`price ${direction}`}>
      ${price} {direction === 'up' ? '(arrow up)' : direction === 'down' ? '(arrow down)' : ''}
    </span>
  );
}

function usePrevious(value) {
  const ref = useRef({ current: value, prev: undefined });
  if (ref.current.current !== value) {
    ref.current.prev = ref.current.current;
    ref.current.current = value;
  }
  return ref.current.prev;
}

function useDebounce(value, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer); // Cancel previous timer on new value
  }, [value, delay]);

  return debouncedValue;
}

// Usage
function SearchPage() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery) {
      fetchSearchResults(debouncedQuery); // Only fires 300ms after typing stops
    }
  }, [debouncedQuery]);

  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

const Item = React.memo(function Item({ item, onDelete, onToggle }) {
  console.log(`Rendering item ${item.id}`);
  return (
    <li>
      <span style={{ textDecoration: item.done ? 'line-through' : 'none' }}>
        {item.text}
      </span>
      <button onClick={() => onToggle(item.id)}>Toggle</button>
      <button onClick={() => onDelete(item.id)}>Delete</button>
    </li>
  );
});

const TodoList = () => {
  const [items, setItems] = useState(initialItems);
  const [filter, setFilter] = useState('');

  // Stable callback references -- critical for React.memo to work
  const handleDelete = useCallback((id) => {
    setItems(prev => prev.filter(item => item.id !== id));
  }, []);

  const handleToggle = useCallback((id) => {
    setItems(prev => prev.map(item =>
      item.id === id ? { ...item, done: !item.done } : item
    ));
  }, []);

  // Memoize filtered list to avoid recalculation
  const filteredItems = useMemo(
    () => items.filter(item => item.text.includes(filter)),
    [items, filter]
  );

  return (
    <div>
      <input value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <Item
            key={item.id}
            item={item}
            onDelete={handleDelete}
            onToggle={handleToggle}
          />
        ))}
      </ul>
    </div>
  );
};

const [, forceUpdate] = useReducer(x => x + 1, 0);

// Usage: call forceUpdate() to trigger re-render

function Modal({ children, isOpen, onClose }) {
  // Lock body scroll when modal is open
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = ''; };
    }
  }, [isOpen]);

  // Close on Escape key
  useEffect(() => {
    if (!isOpen) return;
    const handleEscape = (e) => {
      if (e.key === 'Escape') onClose();
    };
    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose} role="dialog" aria-modal="true">
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.getElementById('modal-root')
  );
}

function AutoFocusInput({ placeholder }) {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []); // Empty deps = run once on mount

  return <input ref={inputRef} placeholder={placeholder} />;
}

<input autoFocus placeholder="Search..." />

function AutoFocusInput() {
  const focusRef = useCallback(node => {
    if (node !== null) {
      node.focus(); // Called when the DOM node is attached
    }
  }, []);

  return <input ref={focusRef} />;
}

// 1. Create context with default value
const ThemeContext = createContext('light');

// 2. Provider wraps the tree and supplies value
function App() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
      <div className={`app ${theme}`}>
        <Toolbar />
        <button onClick={() => setTheme(t => t === 'dark' ? 'light' : 'dark')}>
          Toggle Theme
        </button>
      </div>
    </ThemeContext.Provider>
  );
}

// 3. Consumer reads the value anywhere in the tree
function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button className={`btn-${theme}`}>
      Current theme: {theme}
    </button>
  );
}

function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserProfile />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

function NotFound() {
  const location = useLocation();
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>No match for <code>{location.pathname}</code></p>
      <Link to="/">Go Home</Link>
    </div>
  );
}

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<Overview />} />
  <Route path="settings" element={<Settings />} />
  <Route path="*" element={<DashboardNotFound />} />
</Route>

<Route
  path="/users/:id"
  element={<UserProfile />}
  errorElement={<RouteErrorBoundary />}
/>

// Hook you want to use
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);
  return width;
}

// Wrapper that bridges hooks to class component
function withWindowWidth(ClassComponent) {
  return function Wrapper(props) {
    const width = useWindowWidth();
    return <ClassComponent {...props} windowWidth={width} />;
  };
}

// Usage
class LegacyComponent extends React.Component {
  render() {
    return <div>Window width: {this.props.windowWidth}</div>;
  }
}
export default withWindowWidth(LegacyComponent);

Render -> setState called -> triggers re-render -> setState called -> triggers re-render -> ...

function List({ items }) {
  const [prevItems, setPrevItems] = useState(items);
  const [selection, setSelection] = useState(null);

  // This is OK -- React allows setState during render IF it is conditional
  // and will not loop (it immediately re-renders with updated state)
  if (items !== prevItems) {
    setPrevItems(items);
    setSelection(null); // Reset selection when items change
  }

  return /* ... */;
}

// React 18: One re-render for all three updates
setTimeout(() => {
  setCount(1);
  setFlag(true);
  setName('Alice');
  // React batches these -> single re-render
}, 1000);

// Same for Promise.then, native event handlers, etc.
fetch('/api').then(() => {
  setData(response);
  setLoading(false);
  // Batched -> single re-render
});