// React batches these — only ONE DOM update happens
function Counter() {
  const [count, setCount] = React.useState(0);

  function handleClick() {
    setCount(c => c + 1);  // queued
    setCount(c => c + 1);  // queued
    setCount(c => c + 1);  // queued
    // React 18: all three are batched → single re-render with count+3
  }

  return <button onClick={handleClick}>Count: {count}</button>;
}

// What you write:
const el = <h1 className="title">Hello {name}</h1>;

// What Babel compiles to (automatic runtime):
import { jsx as _jsx } from 'react/jsx-runtime';
const el = _jsx('h1', { className: 'title', children: `Hello ${name}` });

// The resulting object (a React element):
// { type: 'h1', props: { className: 'title', children: 'Hello Alice' }, key: null }

// Parent owns state; child gets read access (prop) and write access (callback)
function Parent() {
  const [value, setValue] = React.useState('');

  return (
    <div>
      <Child value={value} onChange={setValue} />  {/* data down, event up */}
      <p>Current: {value}</p>
    </div>
  );
}

function Child({ value, onChange }) {
  // Cannot set parent state directly — must call onChange
  return <input value={value} onChange={e => onChange(e.target.value)} />;
}

// React 18: both setters batched → ONE re-render
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // Previously: 2 re-renders; now: 1
}, 1000);

// Opt out — force synchronous DOM flush (rare)
import { flushSync } from 'react-dom';
flushSync(() => setCount(c => c + 1));  // DOM updated immediately
flushSync(() => setFlag(f => !f));       // DOM updated immediately

// React matches by type + position by default
// Changing type forces unmount/mount
{showError ? <p>Error!</p> : <span>OK</span>}
// ^ p and span are different types — full DOM swap

// Key forces identity across position changes
{items.map(item => (
  <Row key={item.id} data={item} />  // key=id: Row survives sort/reorder
))}

// ❌ Adds an extra div — breaks table / dl / flex layouts
function Cols() { return <div><td>A</td><td>B</td></div>; }

// ✅ No DOM node emitted
function Cols() {
  return (
    <>
      <td>A</td>
      <td>B</td>
    </>
  );
}

// Named Fragment — needed when key prop is required (lists)
items.map(item => (
  <React.Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.def}</dd>
  </React.Fragment>
))

// main.jsx
import { StrictMode } from 'react';
import { createRoot }  from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

// If your useEffect fires twice in dev, it's StrictMode testing your cleanup:
useEffect(() => {
  const sub = subscribe(channel);     // setup
  return () => sub.unsubscribe();     // ✅ cleanup required — StrictMode verifies this
}, [channel]);

// Legacy — synchronous, blocks main thread
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));

// React 18 — concurrent renderer, opt-in to all new features
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);

// Hydration for SSR
import { hydrateRoot } from 'react-dom/client';
hydrateRoot(document.getElementById('root'), <App />);

// ✅ Reusable — accepts data, delegates actions, passes through props
function Button({ variant = 'primary', loading, children, className, ...rest }) {
  return (
    <button
      className={`btn btn-${variant} ${className ?? ''}`}
      disabled={loading}
      {...rest}  // onClick, type, aria-*, data-* from caller
    >
      {loading ? <Spinner size="sm" /> : children}
    </button>
  );
}

// Usage
<Button variant="danger" loading={isSubmitting} onClick={handleDelete}>
  Delete
</Button>

// ❌ Drilling — Layout and Sidebar don't use user, just pass it on
<App user={user}>
  <Layout user={user}>
    <Sidebar user={user}>
      <Avatar user={user} />    {/* ← only this needs it */}
    </Sidebar>
  </Layout>
</App>

// ✅ Composition — pass Avatar directly, skip intermediate props
function App() {
  const user = useCurrentUser();
  return <Layout sidebar={<Sidebar avatar={<Avatar user={user} />} />} />;
}

function Card({ title, children, footer }) {
  return (
    <div className="card">
      {title && <div className="card-header">{title}</div>}
      <div className="card-body">{children}</div>
      {footer && <div className="card-footer">{footer}</div>}
    </div>
  );
}

// Caller controls body content — Card doesn't care what it is
<Card title="Order Summary" footer={<Button>Pay Now</Button>}>
  <OrderLineItems items={items} />
  <PriceBreakdown total={total} />
</Card>

// TypeScript — compile-time, IDE support, no runtime cost
interface ButtonProps {
  variant?: 'primary' | 'danger' | 'ghost';
  loading?: boolean;
  onClick: () => void;
  children: React.ReactNode;
}

function Button({ variant = 'primary', loading = false, onClick, children }: ButtonProps) {
  return (
    <button className={`btn-${variant}`} disabled={loading} onClick={onClick}>
      {children}
    </button>
  );
}

// TS error: Argument of type '"success"' is not assignable to type '"primary" | "danger" | "ghost"'
<Button variant="success">Go</Button>

// Resetting a form when the selected user changes
// Without key, the form's internal state persists across user switches
function UserEditor({ userId }) {
  return (
    <EditForm
      key={userId}   {/* ← changing userId unmounts old form, mounts fresh one */}
      userId={userId}
    />
  );
}

// Resetting a video player when src changes
<VideoPlayer key={videoId} src={videoUrl} />

// ✅ Idiomatic — destructuring defaults
function Pagination({
  page       = 1,
  perPage    = 20,
  totalItems = 0,
  onPageChange,
  showSummary = true
}) {
  const totalPages = Math.ceil(totalItems / perPage);

  return (
    <nav aria-label="Pagination">
      {showSummary && <span>Page {page} of {totalPages}</span>}
      <button disabled={page <= 1} onClick={() => onPageChange(page - 1)}>Prev</button>
      <button disabled={page >= totalPages} onClick={() => onPageChange(page + 1)}>Next</button>
    </nav>
  );
}

// ❌ Inheritance — don't do this in React
class SpecialButton extends Button { ... }

// ✅ Composition — wrap and extend via props
function IconButton({ icon, children, ...rest }) {
  return (
    <Button {...rest}>
      <i className={`bi bi-${icon}`} /> {children}
    </Button>
  );
}

// ✅ Shared behavior via custom hook
function useFormField(initial) {
  const [value, setValue] = React.useState(initial);
  const reset = () => setValue(initial);
  return { value, onChange: e => setValue(e.target.value), reset };
}

// Expensive list item — only re-renders when item or onSelect actually changes
const ProductCard = React.memo(function ProductCard({ item, onSelect }) {
  console.log('rendering', item.id);
  return (
    <div className="card" onClick={() => onSelect(item.id)}>
      <img src={item.image} alt={item.name} />
      <h3>{item.name}</h3>
      <p>${item.price}</p>
    </div>
  );
});

// Custom comparator — ignore timestamp field
const MemoizedRow = React.memo(Row, (prev, next) =>
  prev.id === next.id && prev.value === next.value
);

// ❌ Stale closure — count captured at render time
function Counter() {
  const [count, setCount] = React.useState(0);
  function addThree() {
    setCount(count + 1);  // all three see same stale count
    setCount(count + 1);
    setCount(count + 1);  // result: count+1, not count+3
  }
}

// ✅ Functional update — always gets latest value
function Counter() {
  const [count, setCount] = React.useState(0);
  function addThree() {
    setCount(c => c + 1);
    setCount(c => c + 1);
    setCount(c => c + 1);  // result: count+3 ✓
  }
}

// Fetch when userId changes — rerun on every userId change
useEffect(() => {
  let cancelled = false;
  fetch(`/api/users/${userId}`)
    .then(r => r.json())
    .then(data => { if (!cancelled) setUser(data); });
  return () => { cancelled = true; };   // cleanup prevents stale updates
}, [userId]);  // ← userId in deps, so effect reruns when userId changes

// ❌ Missing dependency — stale closure
useEffect(() => {
  setInterval(() => console.log(count), 1000); // count never updates
}, []);  // should be [count] or use useRef pattern

function SearchInput() {
  const inputRef = React.useRef(null);

  // DOM reference — focus the input on mount
  React.useEffect(() => { inputRef.current?.focus(); }, []);

  return <input ref={inputRef} type="search" />;
}

// Timer ID that doesn't cause re-renders
function Poller({ url }) {
  const timerRef = React.useRef(null);

  React.useEffect(() => {
    timerRef.current = setInterval(() => fetch(url), 5000);
    return () => clearInterval(timerRef.current);  // cleanup
  }, [url]);
}

function Parent({ userId }) {
  const [items, setItems] = React.useState([]);

  // Without useCallback: new reference every render → MemoizedList always re-renders
  // With useCallback: same reference unless userId changes
  const handleDelete = React.useCallback((id) => {
    setItems(prev => prev.filter(item => item.id !== id));
  }, []);  // no deps — setItems is stable

  return <MemoizedList items={items} onDelete={handleDelete} />;
}

function ProductList({ products, searchTerm, sortBy }) {
  // Recalculated only when products, searchTerm, or sortBy changes
  const filtered = React.useMemo(() => {
    return products
      .filter(p => p.name.toLowerCase().includes(searchTerm.toLowerCase()))
      .sort((a, b) => sortBy === 'price'
        ? a.price - b.price
        : a.name.localeCompare(b.name));
  }, [products, searchTerm, sortBy]);

  return (
    <ul>{filtered.map(p => <ProductCard key={p.id} product={p} />)}</ul>
  );
}

const initialState = { status: 'idle', data: null, error: null };

function fetchReducer(state, action) {
  switch (action.type) {
    case 'FETCH_START':   return { status: 'loading', data: null, error: null };
    case 'FETCH_SUCCESS': return { status: 'success', data: action.payload, error: null };
    case 'FETCH_ERROR':   return { status: 'error',   data: null, error: action.error };
    default:              return state;
  }
}

function UserProfile({ id }) {
  const [state, dispatch] = React.useReducer(fetchReducer, initialState);

  React.useEffect(() => {
    dispatch({ type: 'FETCH_START' });
    fetchUser(id)
      .then(data  => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .catch(err  => dispatch({ type: 'FETCH_ERROR',   error: err.message }));
  }, [id]);

  if (state.status === 'loading') return <Spinner />;
  if (state.status === 'error')   return <ErrorMessage msg={state.error} />;
  return <ProfileCard user={state.data} />;
}

// Reusable async data fetching hook
function useFetch(url) {
  const [state, dispatch] = React.useReducer(fetchReducer, initialState);

  React.useEffect(() => {
    if (!url) return;
    let cancelled = false;
    dispatch({ type: 'FETCH_START' });
    fetch(url)
      .then(r => r.json())
      .then(data  => { if (!cancelled) dispatch({ type: 'FETCH_SUCCESS', payload: data }); })
      .catch(err  => { if (!cancelled) dispatch({ type: 'FETCH_ERROR',   error: err.message }); });
    return () => { cancelled = true; };
  }, [url]);

  return state;
}

// Each component gets its own state instance
function Users()  { const { data, status } = useFetch('/api/users');   ... }
function Orders() { const { data, status } = useFetch('/api/orders');  ... }

// ❌ Conditional hook — call order changes between renders
function Profile({ isLoggedIn }) {
  if (isLoggedIn) {
    const user = useUser();  // sometimes hook 1, sometimes skipped
  }
  const theme = useTheme();  // call order depends on isLoggedIn!
}

// ✅ Hooks at top level, condition inside
function Profile({ isLoggedIn }) {
  const user  = useUser();   // always hook 1
  const theme = useTheme();  // always hook 2
  if (!isLoggedIn) return <Login />;
  return <Dashboard user={user} theme={theme} />;
}

function Tooltip({ children, text }) {
  const ref      = React.useRef(null);
  const [pos, setPos] = React.useState({ top: 0, left: 0 });

  // useLayoutEffect — measure BEFORE paint to avoid flicker
  React.useLayoutEffect(() => {
    const rect = ref.current.getBoundingClientRect();
    setPos({ top: rect.bottom + 8, left: rect.left });
  }, []);

  // useEffect — would cause visible flicker: rendered at 0,0 then moved
  return (
    <>
      <span ref={ref}>{children}</span>
      <div className="tooltip" style={pos}>{text}</div>
    </>
  );
}

function FormField({ label, type = 'text', ...inputProps }) {
  const id = React.useId();   // e.g. ':r0:' — stable across renders

  return (
    <div className="field">
      <label htmlFor={id}>{label}</label>
      <input id={id} type={type} {...inputProps} />
    </div>
  );
}

// Each instance gets its own unique id — no collisions
<FormField label="Email"    type="email"    />  {/* id=":r0:" */}
<FormField label="Password" type="password" />  {/* id=":r1:" */}

function LoginForm() {
  const [form, setForm] = React.useState({ email: '', password: '' });
  const [errors, setErrors] = React.useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setForm(f => ({ ...f, [name]: value }));
    setErrors(e => ({ ...e, [name]: '' }));   // clear field error on change
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.email.includes('@')) return setErrors({ email: 'Invalid email' });
    login(form);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email"    value={form.email}    onChange={handleChange} />
      <input name="password" value={form.password} onChange={handleChange} type="password" />
      <button type="submit">Login</button>
    </form>
  );
}

function SearchBox() {
  const handleKeyDown = (e) => {
    if (e.key === 'Enter') submitSearch();      // consistent across browsers
    if (e.key === 'Escape') clearSearch();
    if (e.ctrlKey && e.key === 'k') openModal(); // modifier keys
  };

  const handlePaste = (e) => {
    const text = e.clipboardData.getData('text');
    // Safe to use async — React 17+ no longer pools events
    setTimeout(() => console.log(text), 0);
  };

  return <input onKeyDown={handleKeyDown} onPaste={handlePaste} />;
}

import { useForm } from 'react-hook-form';

function RegisterForm() {
  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm();

  const onSubmit = async (data) => {
    await registerUser(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('email', {
          required: 'Email is required',
          pattern: { value: /\S+@\S+\.\S+/, message: 'Invalid email' }
        })}
        type="email"
      />
      {errors.email && <span>{errors.email.message}</span>}

      <input {...register('password', { required: true, minLength: 8 })} type="password" />

      <button disabled={isSubmitting}>Register</button>
    </form>
  );
}

function Dropdown({ trigger, children }) {
  const [open, setOpen] = React.useState(false);

  // Close on backdrop click
  React.useEffect(() => {
    if (!open) return;
    const close = () => setOpen(false);
    document.addEventListener('click', close);
    return () => document.removeEventListener('click', close);
  }, [open]);

  return (
    <div>
      <button onClick={() => setOpen(o => !o)}>{trigger}</button>
      {open && (
        <ul onClick={e => e.stopPropagation()}>  {/* prevent closing when clicking items */}
          {children}
        </ul>
      )}
    </div>
  );
}

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email:    z.string().email('Invalid email'),
  password: z.string().min(8, 'Min 8 characters'),
  age:      z.number({ coerce: true }).int().min(13)
});

type FormData = z.infer<typeof schema>;  // { email: string; password: string; age: number }

function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema)
  });

  return (
    <form onSubmit={handleSubmit(data => createAccount(data))}>
      <input {...register('email')} />
      {errors.email && <p>{errors.email.message}</p>}
      <input {...register('age')} type="number" />
      <button type="submit">Sign up</button>
    </form>
  );
}

function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = React.useState(value);

  React.useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);  // cancel on next keystroke
  }, [value, delay]);

  return debounced;
}

function SearchPage() {
  const [query, setQuery] = React.useState('');
  const debouncedQuery    = useDebounce(query, 400);

  // Only fires 400ms after typing stops
  const { data } = useFetch(debouncedQuery ? `/api/search?q=${debouncedQuery}` : null);

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

function AvatarUpload() {
  const [preview, setPreview] = React.useState(null);
  const [file, setFile]       = React.useState(null);

  const handleChange = (e) => {
    const selected = e.target.files[0];
    if (!selected) return;
    setFile(selected);
    const url = URL.createObjectURL(selected);
    setPreview(url);
  };

  React.useEffect(() => {
    return () => { if (preview) URL.revokeObjectURL(preview); }; // cleanup memory
  }, [preview]);

  const handleUpload = async () => {
    const fd = new FormData();
    fd.append('avatar', file);
    await fetch('/api/avatar', { method: 'POST', body: fd });
  };

  return (
    <>
      <input type="file" accept="image/*" onChange={handleChange} />
      {preview && <img src={preview} alt="Preview" style={{ width: 100 }} />}
      {file && <button onClick={handleUpload}>Upload</button>}
    </>
  );
}

import { useActionState } from 'react';

async function submitContact(prevState, formData) {
  const email   = formData.get('email');
  const message = formData.get('message');
  try {
    await sendContactEmail({ email, message });
    return { success: true };
  } catch (e) {
    return { success: false, error: e.message };
  }
}

function ContactForm() {
  const [state, formAction, isPending] = useActionState(submitContact, null);

  return (
    <form action={formAction}>
      <input name="email"   type="email" required />
      <textarea name="message" required />
      <button disabled={isPending}>{isPending ? 'Sending…' : 'Send'}</button>
      {state?.success && <p>Message sent!</p>}
      {state?.error   && <p style={{color:'red'}}>{state.error}</p>}
    </form>
  );
}

// ❌ Index key — breaks when items are added/removed/sorted
{todos.map((todo, i) => <TodoItem key={i} todo={todo} />)}

// ✅ Stable data ID
{todos.map(todo => <TodoItem key={todo.id} todo={todo} />)}

// When no ID exists, derive a stable key from content
{options.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}

// Ternary — two branches
{isLoggedIn ? <Dashboard /> : <Login />}

// && — render or nothing (use !! to coerce falsy to boolean)
{!!items.length && <List items={items} />}  // !! prevents rendering '0'

// Early return — clearest for guards
function Page({ user, loading }) {
  if (loading)  return <Spinner />;
  if (!user)    return <NotFound />;
  return <Dashboard user={user} />;
}

// Variable — complex conditions
const badge = count > 99 ? '99+' : count > 0 ? count : null;
return <button>Notifications {badge && <span>{badge}</span>}</button>;

import { FixedSizeList } from 'react-window';

function Row({ index, style, data }) {
  const item = data[index];
  // style positions the row — must be applied
  return (
    <div style={style} className="row">
      {item.name} — {item.email}
    </div>
  );
}

function UserTable({ users }) {
  return (
    <FixedSizeList
      height={600}
      itemCount={users.length}
      itemSize={48}        // px per row
      itemData={users}
      width="100%"
    >
      {Row}
    </FixedSizeList>
  );
}

function useInfiniteScroll(loadMore) {
  const sentinelRef = React.useRef(null);

  React.useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) loadMore(); },
      { threshold: 0.1 }
    );
    if (sentinelRef.current) observer.observe(sentinelRef.current);
    return () => observer.disconnect();
  }, [loadMore]);

  return sentinelRef;
}

function Feed() {
  const [pages, setPages] = React.useState([1]);
  const loadMore  = React.useCallback(() => setPages(p => [...p, p.length + 1]), []);
  const sentinelRef = useInfiniteScroll(loadMore);

  return (
    <div>
      {pages.map(page => <PageOfPosts key={page} page={page} />)}
      <div ref={sentinelRef} style={{ height: 1 }} />
    </div>
  );
}

function CheckboxList({ items }) {
  const [selected, setSelected] = React.useState(new Set());

  const toggle = (id) => setSelected(prev => {
    const next = new Set(prev);
    next.has(id) ? next.delete(id) : next.add(id);
    return next;
  });

  const toggleAll = () => setSelected(
    selected.size === items.length ? new Set() : new Set(items.map(i => i.id))
  );

  return (
    <ul>
      <li>
        <input type="checkbox" checked={selected.size === items.length} onChange={toggleAll} />
        <label>Select all</label>
      </li>
      {items.map(item => (
        <li key={item.id}>
          <input type="checkbox" checked={selected.has(item.id)} onChange={() => toggle(item.id)} />
          <label>{item.name}</label>
        </li>
      ))}
    </ul>
  );
}

function Tabs({ children }) {
  const [activeIndex, setActiveIndex] = React.useState(0);

  const tabs = React.Children.map(children, (child, i) =>
    React.cloneElement(child, {
      isActive: i === activeIndex,
      onClick:  () => setActiveIndex(i)
    })
  );

  return <div className="tabs">{tabs}</div>;
}

function Tab({ isActive, onClick, children }) {
  return <button className={isActive ? 'active' : ''} onClick={onClick}>{children}</button>;
}

// Usage — Tabs injects isActive/onClick automatically
<Tabs>
  <Tab>Overview</Tab>
  <Tab>Details</Tab>
  <Tab>Reviews</Tab>
</Tabs>

const ThemeContext = React.createContext(null);

export function ThemeProvider({ children }) {
  const [theme, setTheme] = React.useState('light');
  const toggle = () => setTheme(t => t === 'light' ? 'dark' : 'light');
  return (
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const ctx = React.useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be used inside ThemeProvider');
  return ctx;
}

// Any descendant — no props required
function Header() {
  const { theme, toggle } = useTheme();
  return <header className={theme}><button onClick={toggle}>Toggle</button></header>;
}

const CartStateContext    = React.createContext(null);
const CartDispatchContext = React.createContext(null);

function CartProvider({ children }) {
  const [items, dispatch] = React.useReducer(cartReducer, []);
  return (
    <CartDispatchContext.Provider value={dispatch}>   {/* stable ref */}
      <CartStateContext.Provider value={items}>
        {children}
      </CartStateContext.Provider>
    </CartDispatchContext.Provider>
  );
}

// AddToCart only re-renders when dispatch changes (never)
function AddToCart({ productId }) {
  const dispatch = React.useContext(CartDispatchContext);
  return <button onClick={() => dispatch({ type: 'ADD', id: productId })}>Add</button>;
}

import { create } from 'zustand';

const useCartStore = create((set, get) => ({
  items:     [],
  total:     0,
  addItem:   (item) => set(state => ({
    items: [...state.items, item],
    total: state.total + item.price
  })),
  removeItem: (id) => set(state => {
    const items = state.items.filter(i => i.id !== id);
    return { items, total: items.reduce((s, i) => s + i.price, 0) };
  }),
  clearCart:  () => set({ items: [], total: 0 })
}));

// Subscribed to total only — won't re-render on items change
function CartBadge() {
  const total = useCartStore(state => state.total);
  return <span>${total.toFixed(2)}</span>;
}

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk('user/fetch', async (id) => {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
});

const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, status: 'idle', error: null },
  reducers: {
    clearUser: state => { state.data = null; }  // Immer: mutate directly
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending,   state => { state.status = 'loading'; })
      .addCase(fetchUser.fulfilled, (state, action) => { state.status = 'success'; state.data = action.payload; })
      .addCase(fetchUser.rejected,  (state, action) => { state.status = 'error'; state.error = action.error.message; });
  }
});

export const { clearUser } = userSlice.actions;
export default userSlice.reducer;

import { atom, useAtom, useAtomValue } from 'jotai';

const priceAtom    = atom(100);
const quantityAtom = atom(1);
const totalAtom    = atom((get) => get(priceAtom) * get(quantityAtom));  // derived

function PriceInput() {
  const [price, setPrice] = useAtom(priceAtom);
  return <input type="number" value={price} onChange={e => setPrice(+e.target.value)} />;
}

function Total() {
  const total = useAtomValue(totalAtom);  // read-only subscription
  return <strong>Total: ${total}</strong>;
}

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

const useUserStore = create(
  persist(
    (set) => ({
      user:     null,
      token:    null,
      setUser:  (user, token) => set({ user, token }),
      logout:   () => set({ user: null, token: null })
    }),
    {
      name:       'user-storage',          // localStorage key
      storage:    createJSONStorage(() => localStorage),
      partialize: (state) => ({ user: state.user, token: state.token }), // don't persist functions
      version:    1,                       // increment to clear stale state on schema change
      migrate:    (state, version) => version === 0 ? { ...state, user: null } : state
    }
  )
);

function appReducer(state, action) {
  switch (action.type) {
    case 'LOGIN':  return { ...state, user: action.payload, isAuth: true };
    case 'LOGOUT': return { ...state, user: null, isAuth: false };
    default:       return state;
  }
}

const AppContext = React.createContext(null);

export function AppProvider({ children }) {
  const [state, dispatch] = React.useReducer(appReducer, { user: null, isAuth: false });
  const value = React.useMemo(() => ({ state, dispatch }), [state]);
  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
}

export const useApp = () => React.useContext(AppContext);

// In any component
const { state, dispatch } = useApp();
dispatch({ type: 'LOGIN', payload: user });

import { useSearchParams } from 'react-router-dom';

function ProductPage() {
  const [params, setParams] = useSearchParams();
  const tab  = params.get('tab')  || 'overview';
  const page = parseInt(params.get('page') || '1');

  const setTab  = (t) => setParams(p => { p.set('tab', t); p.delete('page'); return p; });
  const setPage = (n) => setParams(p => { p.set('page', String(n)); return p; });

  return (
    <>
      <TabBar active={tab} onChange={setTab} />
      <TabContent tab={tab} />
      <Pagination current={page} onChange={setPage} />
    </>
  );
}

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

// Each route is a separate chunk — loaded on demand
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings  = lazy(() => import('./pages/Settings'));
const Reports   = lazy(() => import('./pages/Reports'));

function App() {
  return (
    <Suspense fallback={<PageSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings"  element={<Settings />}  />
        <Route path="/reports"   element={<Reports />}   />
      </Routes>
    </Suspense>
  );
}

// Programmatic profiling — measure specific trees
import { Profiler } from 'react';

function onRender(id, phase, actualDuration) {
  console.log(`${id} [${phase}] took ${actualDuration.toFixed(2)}ms`);
}

<Profiler id="ProductList" onRender={onRender}>
  <ProductList items={items} />
</Profiler>

// Also useful: why-did-you-render library
// import whyDidYouRender from '@welldone-software/why-did-you-render';
// whyDidYouRender(React, { trackAllPureComponents: true });

import { useTransition } from 'react';

function FilterableList({ items }) {
  const [query,   setQuery]   = React.useState('');
  const [filtered, setFiltered] = React.useState(items);
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    setQuery(e.target.value);   // urgent — input stays responsive
    startTransition(() => {     // non-urgent — can be interrupted
      const q = e.target.value.toLowerCase();
      setFiltered(items.filter(i => i.name.toLowerCase().includes(q)));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      <div style={{ opacity: isPending ? 0.6 : 1 }}>
        {filtered.map(i => <Row key={i.id} item={i} />)}
      </div>
    </>
  );
}

// Native lazy loading — no JS needed
function ProductImage({ src, alt, width, height }) {
  return (
    <img
      src={src}
      alt={alt}
      width={width}
      height={height}
      loading="lazy"         // defer until near viewport
      decoding="async"       // non-blocking decode
      style={{ aspectRatio: `${width}/${height}` }}  // reserve space — prevents CLS
    />
  );
}

// Progressive enhancement with blur-up placeholder
function BlurImage({ src, placeholder, ...rest }) {
  const [loaded, setLoaded] = React.useState(false);
  return (
    <div style={{ position: 'relative' }}>
      <img src={placeholder} style={{ filter: loaded ? 'none' : 'blur(20px)', transition: 'filter 0.3s' }} {...rest} />
      <img src={src} onLoad={() => setLoaded(true)} style={{ opacity: loaded ? 1 : 0 }} {...rest} />
    </div>
  );
}

import { useDeferredValue, memo } from 'react';

// Expensive child that takes 100ms to render
const ExpensiveChart = memo(({ data }) => {
  // heavy computation...
  return <canvas ref={drawChart(data)} />;
});

function Dashboard({ liveData }) {
  const deferredData = useDeferredValue(liveData);
  const isStale      = liveData !== deferredData;

  return (
    <div>
      <DataTable data={liveData} />   {/* shows live data immediately */}
      <div style={{ opacity: isStale ? 0.7 : 1 }}>
        <ExpensiveChart data={deferredData} />  {/* renders with deferred data */}
      </div>
    </div>
  );
}

# Create React App
npx source-map-explorer 'build/static/js/*.js'

# Vite — built-in rollup visualizer
npm install --save-dev rollup-plugin-visualizer
# vite.config.js: plugins: [visualizer({ open: true })]
npm run build   # opens treemap in browser

# Fixes:
# ❌ import _ from 'lodash'           → ✅ import debounce from 'lodash/debounce'
# ❌ import moment from 'moment'       → ✅ import { format } from 'date-fns'
# ❌ import * as icons from 'lucide'   → ✅ import { Search } from 'lucide-react'

const loadDashboard = () => import('./pages/Dashboard');
const Dashboard     = React.lazy(loadDashboard);

function NavLink({ to, preload, children, ...rest }) {
  return (
    <Link
      to={to}
      onMouseEnter={preload}  // preload chunk on hover — usually loads before click
      onFocus={preload}       // keyboard navigation
      {...rest}
    >
      {children}
    </Link>
  );
}

// Usage
<NavLink to="/dashboard" preload={loadDashboard}>Dashboard</NavLink>

// worker.js
self.onmessage = ({ data }) => {
  const result = heavyComputation(data.input);
  self.postMessage({ result });
};

// React component
function useWorker(workerPath) {
  const workerRef = React.useRef(null);
  React.useEffect(() => {
    workerRef.current = new Worker(new URL(workerPath, import.meta.url));
    return () => workerRef.current.terminate();
  }, [workerPath]);

  return React.useCallback((input) => new Promise((resolve) => {
    workerRef.current.onmessage = ({ data }) => resolve(data.result);
    workerRef.current.postMessage({ input });
  }), []);
}

function DataProcessor() {
  const runWorker = useWorker('./worker.js');
  const process = async () => {
    const result = await runWorker(bigDataset);  // non-blocking
    setOutput(result);
  };
}

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

function DashboardLayout() {
  return (
    <div className="layout">
      <Sidebar />
      <main>
        <Outlet />  {/* child route renders here */}
      </main>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<DashboardLayout />}>
        <Route index          element={<DashboardHome />}  />  {/* /dashboard */}
        <Route path="orders"  element={<OrderList />}      />  {/* /dashboard/orders */}
        <Route path="settings"element={<Settings />}       />  {/* /dashboard/settings */}
      </Route>
    </Routes>
  );
}

import { Navigate, useLocation } from 'react-router-dom';

function ProtectedRoute({ children }) {
  const { user, isLoading } = useAuth();
  const location = useLocation();

  if (isLoading) return <Spinner />;  // wait for auth check
  if (!user) return <Navigate to="/login" state={{ from: location }} replace />;
  return children;
}

// In routes
<Route path="/dashboard" element={<ProtectedRoute><DashboardLayout /></ProtectedRoute>}>
  <Route index element={<DashboardHome />} />
</Route>

// After login — redirect back to intended page
function Login() {
  const location = useLocation();
  const navigate = useNavigate();
  const from = location.state?.from?.pathname || '/dashboard';
  const handleLogin = async () => { await login(); navigate(from, { replace: true }); };
}

import { createBrowserRouter, useLoaderData, useParams } from 'react-router-dom';

async function orderLoader({ params }) {
  const res = await fetch(`/api/orders/${params.orderId}`);
  if (!res.ok) throw new Response('Not found', { status: 404 });
  return res.json();
}

function OrderDetail() {
  const order = useLoaderData();   // data is already here — no loading state needed
  return <OrderView order={order} />;
}

const router = createBrowserRouter([{
  path: '/orders/:orderId',
  loader: orderLoader,
  element: <OrderDetail />,
  errorElement: <OrderError />
}]);

import { useNavigate } from 'react-router-dom';

function CreateOrder() {
  const navigate = useNavigate();

  const handleSubmit = async (data) => {
    const order = await createOrder(data);
    navigate(`/orders/${order.id}`, { replace: true }); // go to new order, no back to form
  };

  const handleCancel = () => navigate(-1);  // browser back

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)}>
      {/* ... */}
      <button type="button" onClick={handleCancel}>Cancel</button>
      <button type="submit">Create</button>
    </form>
  );
}

import { NavLink } from 'react-router-dom';

function Sidebar() {
  const navClass = ({ isActive }) =>
    `nav-link ${isActive ? 'nav-link--active' : ''}`;

  return (
    <nav>
      <NavLink to="/"          className={navClass} end>Home</NavLink>
      <NavLink to="/dashboard" className={navClass}>Dashboard</NavLink>
      <NavLink to="/orders"    className={navClass}>Orders</NavLink>
      <NavLink
        to="/settings"
        style={({ isActive }) => ({ fontWeight: isActive ? 700 : 400 })}
      >
        Settings
      </NavLink>
    </nav>
  );
}

const Home      = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Profile   = lazy(() => import('./pages/Profile'));

function App() {
  return (
    <BrowserRouter>
      {/* Global fallback for top-level navigation */}
      <Suspense fallback={<PageSkeleton />}>
        <Routes>
          <Route path="/"          element={<Home />}      />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/profile"   element={
            {/* Per-route fallback */}
            <Suspense fallback={<ProfileSkeleton />}>
              <Profile />
            </Suspense>
          } />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

// v6.4 data router — built-in scroll restoration
import { ScrollRestoration } from 'react-router-dom';
function Root() {
  return <><Outlet /><ScrollRestoration /></>;
}

// Manual scroll-to-top hook (v5 / older v6)
function ScrollToTop() {
  const { pathname } = useLocation();
  React.useEffect(() => { window.scrollTo(0, 0); }, [pathname]);
  return null;
}

// Framer Motion page transition
import { AnimatePresence, motion } from 'framer-motion';
<AnimatePresence mode="wait">
  <motion.div
    key={location.pathname}
    initial={{ opacity: 0, y: 8 }}
    animate={{ opacity: 1, y: 0 }}
    exit={{ opacity: 0 }}
    transition={{ duration: 0.15 }}
  >
    <Routes location={location}>{/* routes */}</Routes>
  </motion.div>
</AnimatePresence>

import { useBlocker } from 'react-router-dom';

function EditForm() {
  const [isDirty, setIsDirty] = React.useState(false);

  const blocker = useBlocker(
    ({ currentLocation, nextLocation }) =>
      isDirty && currentLocation.pathname !== nextLocation.pathname
  );

  return (
    <>
      <form onChange={() => setIsDirty(true)}>{/* ... */}</form>

      {blocker.state === 'blocked' && (
        <ConfirmDialog
          message="You have unsaved changes. Leave anyway?"
          onConfirm={blocker.proceed}
          onCancel={blocker.reset}
        />
      )}
    </>
  );
}

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function OrderList() {
  const { data, isLoading, error } = useQuery({
    queryKey:  ['orders'],
    queryFn:   () => fetch('/api/orders').then(r => r.json()),
    staleTime: 30_000,  // consider data fresh for 30s — no refetch on remount
  });

  const queryClient = useQueryClient();
  const { mutate: deleteOrder } = useMutation({
    mutationFn: (id) => fetch(`/api/orders/${id}`, { method: 'DELETE' }),
    onSuccess:  () => queryClient.invalidateQueries({ queryKey: ['orders'] })  // refetch
  });

  if (isLoading) return <Spinner />;
  if (error)     return <Error msg={error.message} />;
  return <ul>{data.map(o => <OrderRow key={o.id} order={o} onDelete={deleteOrder} />)}</ul>;
}

const { mutate: toggleLike } = useMutation({
  mutationFn: (postId) => fetch(`/api/posts/${postId}/like`, { method: 'POST' }),

  onMutate: async (postId) => {
    await queryClient.cancelQueries({ queryKey: ['posts'] });
    const previous = queryClient.getQueryData(['posts']);       // snapshot

    queryClient.setQueryData(['posts'], (old) =>
      old.map(p => p.id === postId ? { ...p, liked: !p.liked } : p)
    );

    return { previous };   // context for rollback
  },

  onError: (err, postId, context) => {
    queryClient.setQueryData(['posts'], context.previous);     // rollback
  },

  onSettled: () => queryClient.invalidateQueries({ queryKey: ['posts'] })
});

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(r => r.json());

function Profile({ userId }) {
  const { data, error, isLoading, mutate } = useSWR(
    `/api/users/${userId}`,
    fetcher,
    {
      refreshInterval: 30_000,    // poll every 30s
      revalidateOnFocus: true,    // refetch when tab regains focus
      dedupingInterval: 2_000     // deduplicate requests within 2s
    }
  );

  if (isLoading) return <Skeleton />;
  if (error)     return <ErrorBanner />;

  return (
    <div>
      <Avatar user={data} />
      <button onClick={() => mutate()}>Refresh</button>
    </div>
  );
}

import { useQuery, keepPreviousData } from '@tanstack/react-query';

function OrdersTable() {
  const [page, setPage] = React.useState(1);

  const { data, isFetching } = useQuery({
    queryKey: ['orders', page],
    queryFn:  () => fetch(`/api/orders?page=${page}&limit=20`).then(r => r.json()),
    placeholderData: keepPreviousData,  // show old data while next page loads
  });

  return (
    <div style={{ opacity: isFetching ? 0.7 : 1 }}>
      <table>{data?.items.map(o => <OrderRow key={o.id} order={o} />)}</table>
      <Pagination
        current={page}
        total={data?.totalPages}
        onChange={setPage}
      />
    </div>
  );
}

function UserProfile({ userId }) {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    const controller = new AbortController();

    fetch(`/api/users/${userId}`, { signal: controller.signal })
      .then(r => r.json())
      .then(data => setUser(data))
      .catch(err => {
        if (err.name !== 'AbortError') console.error(err);
        // AbortError is expected on cleanup — silently ignore
      });

    return () => controller.abort();  // cancel on unmount or userId change
  }, [userId]);

  return user ? <ProfileCard user={user} /> : <Skeleton />;
}

function useApi() {
  const { token } = useAuth();

  const request = React.useCallback(async (path, options = {}) => {
    const res = await fetch(`${import.meta.env.VITE_API_URL}${path}`, {
      ...options,
      headers: {
        'Content-Type':  'application/json',
        'Authorization': token ? `Bearer ${token}` : undefined,
        ...options.headers
      }
    });
    if (!res.ok) {
      const err = await res.json().catch(() => ({ message: res.statusText }));
      throw Object.assign(new Error(err.message), { status: res.status });
    }
    return res.status === 204 ? null : res.json();
  }, [token]);

  return { request };
}

function useLiveOrders() {
  const [orders, setOrders] = React.useState([]);
  const wsRef = React.useRef(null);

  React.useEffect(() => {
    wsRef.current = new WebSocket(`${WS_URL}/orders`);

    wsRef.current.onmessage = ({ data }) => {
      const event = JSON.parse(data);
      if (event.type === 'ORDER_CREATED')
        setOrders(prev => [event.order, ...prev]);
      if (event.type === 'ORDER_UPDATED')
        setOrders(prev => prev.map(o => o.id === event.order.id ? event.order : o));
    };

    return () => wsRef.current?.close();
  }, []);

  const send = (msg) => wsRef.current?.send(JSON.stringify(msg));
  return { orders, send };
}

import { useInfiniteQuery } from '@tanstack/react-query';

function Feed() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
    queryKey: ['feed'],
    queryFn:  ({ pageParam }) =>
      fetch(`/api/feed?cursor=${pageParam ?? ''}`).then(r => r.json()),
    initialPageParam: null,
    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined
  });

  const sentinelRef = React.useRef(null);
  React.useEffect(() => {
    const ob = new IntersectionObserver(([e]) => { if (e.isIntersecting && hasNextPage) fetchNextPage(); });
    if (sentinelRef.current) ob.observe(sentinelRef.current);
    return () => ob.disconnect();
  }, [hasNextPage, fetchNextPage]);

  return (
    <div>
      {data?.pages.flatMap(p => p.items).map(item => <FeedItem key={item.id} item={item} />)}
      <div ref={sentinelRef}>{isFetchingNextPage && <Spinner />}</div>
    </div>
  );
}

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

function App() {
  return (
    <ErrorBoundary
      FallbackComponent={ErrorFallback}
      onReset={() => queryClient.clear()}  // reset data on retry
      onError={(error) => logger.capture(error)}
    >
      <Dashboard />
    </ErrorBoundary>
  );
}

const SelectCtx = React.createContext(null);

function Select({ value, onChange, children }) {
  return (
    <SelectCtx.Provider value={{ value, onChange }}>
      <div className="select">{children}</div>
    </SelectCtx.Provider>
  );
}

function Option({ value, children }) {
  const { value: selected, onChange } = React.useContext(SelectCtx);
  return (
    <div
      className={`option ${selected === value ? 'selected' : ''}`}
      onClick={() => onChange(value)}
    >
      {children}
    </div>
  );
}

Select.Option = Option;  // attach as static property

// Clean usage
<Select value={size} onChange={setSize}>
  <Select.Option value="sm">Small</Select.Option>
  <Select.Option value="md">Medium</Select.Option>
  <Select.Option value="lg">Large</Select.Option>
</Select>

// Forward ref to the native input
const Input = React.forwardRef(function Input({ label, ...rest }, ref) {
  return (
    <div>
      <label>{label}</label>
      <input ref={ref} {...rest} />
    </div>
  );
});

// Expose custom imperative API
const FancyInput = React.forwardRef(function FancyInput(props, ref) {
  const inputRef = React.useRef(null);
  React.useImperativeHandle(ref, () => ({
    focus: () => inputRef.current?.focus(),
    clear: () => { if (inputRef.current) inputRef.current.value = ''; }
  }));
  return <input ref={inputRef} {...props} />;
});

// Parent usage
const ref = React.useRef(null);
<FancyInput ref={ref} />;
ref.current.focus();  // calls the imperative handle

import { createPortal } from 'react-dom';

function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div
        className="modal-content"
        onClick={e => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
      >
        <button onClick={onClose} aria-label="Close">&times;</button>
        {children}
      </div>
    </div>,
    document.body   // rendered outside app root — no z-index overflow issues
  );
}

// Render prop component
function MouseTracker({ render }) {
  const [pos, setPos] = React.useState({ x: 0, y: 0 });
  const handleMove = (e) => setPos({ x: e.clientX, y: e.clientY });
  return (
    <div onMouseMove={handleMove} style={{ height: '100vh' }}>
      {render(pos)}
    </div>
  );
}

// Caller controls how position is displayed
<MouseTracker render={({ x, y }) => (
  <img src="cursor.svg" style={{ position: 'fixed', left: x, top: y }} alt="" />
)} />

// Modern equivalent — custom hook (preferred)
function useMouse() {
  const [pos, setPos] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return pos;
}

const VideoPlayer = React.forwardRef(function VideoPlayer({ src }, ref) {
  const videoRef = React.useRef(null);

  React.useImperativeHandle(ref, () => ({
    play:    ()  => videoRef.current?.play(),
    pause:   ()  => videoRef.current?.pause(),
    seek:    (t) => { if (videoRef.current) videoRef.current.currentTime = t; },
    getTime: ()  => videoRef.current?.currentTime ?? 0
    // Parent cannot access DOM directly — only these methods
  }));

  return <video ref={videoRef} src={src} />;
});

// Parent
const playerRef = React.useRef(null);
<VideoPlayer ref={playerRef} src={videoSrc} />
<button onClick={() => playerRef.current.play()}>Play</button>

// HOC — adds auth protection to any component
function withAuth(WrappedComponent) {
  return function AuthenticatedComponent(props) {
    const { user, isLoading } = useAuth();
    if (isLoading) return <Spinner />;
    if (!user)     return <Navigate to="/login" />;
    return <WrappedComponent {...props} user={user} />;
  };
}

const ProtectedDashboard = withAuth(Dashboard);

// Modern equivalent — custom hook (preferred for new code)
function Dashboard() {
  const { user } = useRequireAuth();  // throws redirect if not authed
  return <div>Welcome {user.name}</div>;
}

import { useOptimistic, useTransition } from 'react';

function TodoList({ todos, addTodo }) {
  const [optimisticTodos, addOptimistic] = useOptimistic(
    todos,
    (state, newTodo) => [...state, { ...newTodo, pending: true }]
  );

  const [, startTransition] = useTransition();

  const handleAdd = (text) => {
    startTransition(async () => {
      addOptimistic({ id: Date.now(), text });  // shows immediately
      await addTodo(text);                       // actual server call
      // on completion: optimistic state replaced by real state
    });
  };

  return (
    <ul>
      {optimisticTodos.map(todo => (
        <li key={todo.id} style={{ opacity: todo.pending ? 0.6 : 1 }}>{todo.text}</li>
      ))}
    </ul>
  );
}

import { use, Suspense } from 'react';

// Create a promise outside the component (e.g., from a loader or parent)
async function fetchUser(id) {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
}

function UserCard({ userPromise }) {
  const user = use(userPromise);   // suspends until resolved
  return <div>{user.name}</div>;
}

function App() {
  const userPromise = fetchUser(1);  // starts immediately — outside render
  return (
    <Suspense fallback={<Skeleton />}>
      <UserCard userPromise={userPromise} />
    </Suspense>
  );
}

// use() with context — conditional calls allowed
function Badge({ showAdmin }) {
  if (showAdmin) {
    const admin = use(AdminContext);  // ✅ conditionally calling use() is valid
    return <span>{admin.name}</span>;
  }
  return null;
}

function useLocalStorage(key, initialValue) {
  const [value, setValue] = React.useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch { return initialValue; }
  });

  const set = React.useCallback((val) => {
    const next = typeof val === 'function' ? val(value) : val;
    setValue(next);
    try { localStorage.setItem(key, JSON.stringify(next)); } catch {}
  }, [key, value]);

  return [value, set];
}

// Usage — persisted across page refreshes
const [theme, setTheme] = useLocalStorage('theme', 'light');

// In tests — mock localStorage
jest.spyOn(Storage.prototype, 'getItem').mockReturnValue('"dark"');

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('submits login form with correct credentials', async () => {
  const user = userEvent.setup();
  const mockLogin = jest.fn().mockResolvedValue({ token: 'abc' });
  render(<LoginForm onLogin={mockLogin} />);

  // Query by label text — accessible and implementation-independent
  await user.type(screen.getByLabelText(/email/i), 'alice@example.com');
  await user.type(screen.getByLabelText(/password/i), 'secret123');
  await user.click(screen.getByRole('button', { name: /log in/i }));

  expect(mockLogin).toHaveBeenCalledWith({ email: 'alice@example.com', password: 'secret123' });
});

import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';
import { render, screen, waitFor } from '@testing-library/react';

const server = setupServer(
  http.get('/api/users/1', () =>
    HttpResponse.json({ id: 1, name: 'Alice', email: 'alice@example.com' })
  )
);

beforeAll(()  => server.listen());
afterEach(()  => server.resetHandlers());
afterAll(()   => server.close());

test('displays user name after fetch', async () => {
  render(<UserProfile userId={1} />);
  expect(screen.getByRole('status')).toBeInTheDocument();       // loading state
  await waitFor(() => expect(screen.getByText('Alice')).toBeInTheDocument());
});

// test-utils.jsx — custom render with all providers
import { render } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

export function renderWithProviders(ui, { user = null, ...options } = {}) {
  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  return render(
    <QueryClientProvider client={qc}>
      <BrowserRouter>
        <AuthContext.Provider value={{ user, isLoading: false }}>
          {ui}
        </AuthContext.Provider>
      </BrowserRouter>
    </QueryClientProvider>,
    options
  );
}

// Test
test('shows dashboard for authenticated user', () => {
  renderWithProviders(<Dashboard />, { user: { id: 1, name: 'Alice', role: 'admin' } });
  expect(screen.getByText(/welcome, alice/i)).toBeInTheDocument();
});

import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

test('increments counter', () => {
  const { result } = renderHook(() => useCounter(0));
  expect(result.current.count).toBe(0);

  act(() => result.current.increment());
  expect(result.current.count).toBe(1);

  act(() => result.current.increment());
  act(() => result.current.increment());
  expect(result.current.count).toBe(3);
});

test('resets to initial value', () => {
  const { result } = renderHook(() => useCounter(10));
  act(() => result.current.increment());
  act(() => result.current.reset());
  expect(result.current.count).toBe(10);
});

import { render } from '@testing-library/react';

test('Button renders correctly for each variant', () => {
  const { asFragment } = render(
    <>
      <Button variant="primary">Save</Button>
      <Button variant="danger">Delete</Button>
      <Button variant="ghost">Cancel</Button>
    </>
  );
  expect(asFragment()).toMatchSnapshot();  // saves/compares HTML snapshot
});

// Inline snapshot — diff visible in code review
test('renders badge count', () => {
  const { asFragment } = render(<Badge count={5} />);
  expect(asFragment()).toMatchInlineSnapshot(`
    <DocumentFragment>
      <span class="badge">5</span>
    </DocumentFragment>
  `);
});

import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('LoginForm has no accessibility violations', async () => {
  const { container } = render(<LoginForm />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

// Common violations axe catches:
// - <img> without alt attribute
// - <input> without associated <label>
// - <button> with no accessible name
// - heading hierarchy skipped (h1 → h3)
// - interactive elements not keyboard-focusable

test('shows success message after form submission', async () => {
  const user = userEvent.setup();
  render(<ContactForm />);

  await user.type(screen.getByLabelText(/email/i), 'test@example.com');
  await user.click(screen.getByRole('button', { name: /submit/i }));

  // findByText waits up to 1000ms for element to appear
  const success = await screen.findByText(/message sent/i);
  expect(success).toBeInTheDocument();

  // waitFor — retry assertion until it passes
  await waitFor(() => {
    expect(screen.queryByRole('button', { name: /submit/i })).toBeDisabled();
  });
});

// Playwright — tests/auth.spec.ts
import { test, expect } from '@playwright/test';

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');

  await page.getByLabel('Email').fill('alice@example.com');
  await page.getByLabel('Password').fill('password123');
  await page.getByRole('button', { name: 'Log in' }).click();

  await expect(page).toHaveURL('/dashboard');
  await expect(page.getByText('Welcome, Alice')).toBeVisible();
});

test('protected route redirects to login when not authenticated', async ({ page }) => {
  await page.goto('/dashboard');
  await expect(page).toHaveURL('/login?from=%2Fdashboard');
});

// app/orders/page.tsx — Server Component (no 'use client')
// Runs on server — DB access, no useEffect, no useState
import { db } from '@/lib/db';

export default async function OrdersPage() {
  const orders = await db.order.findMany({ orderBy: { createdAt: 'desc' } });

  return (
    <div>
      <h1>Orders</h1>
      {orders.map(o => <OrderCard key={o.id} order={o} />)}
    </div>
  );
}

// components/AddToCart.tsx — Client Component (needs interactivity)
'use client';
export function AddToCart({ productId }) {
  const [added, setAdded] = React.useState(false);
  return <button onClick={() => setAdded(true)}>{added ? '✓ Added' : 'Add to Cart'}</button>;
}

app/
  layout.tsx           ← root layout (wraps all pages)
  page.tsx             ← /
  dashboard/
    layout.tsx         ← dashboard shell (sidebar/nav — persistent)
    page.tsx           ← /dashboard
    orders/
      page.tsx         ← /dashboard/orders
      [id]/
        page.tsx       ← /dashboard/orders/:id
        loading.tsx    ← Suspense fallback for this segment
        error.tsx      ← Error Boundary for this segment
        not-found.tsx  ← 404 within this segment

// app/actions/createOrder.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createOrder(formData: FormData) {
  const product = formData.get('product') as string;
  const qty     = Number(formData.get('quantity'));

  const order = await db.order.create({ data: { product, qty, userId: await getUserId() } });
  revalidatePath('/dashboard/orders');   // invalidate cached page
  return { success: true, orderId: order.id };
}

// app/orders/new/page.tsx — Client Component
'use client';
import { createOrder } from '@/app/actions/createOrder';
import { useFormState } from 'react-dom';

export default function NewOrderPage() {
  const [state, action] = useFormState(createOrder, null);
  return (
    <form action={action}>
      <input name="product" />
      <input name="quantity" type="number" />
      <button>Create Order</button>
      {state?.success && <p>Order #{state.orderId} created!</p>}
    </form>
  );
}

interface TableProps<T> {
  data:       T[];
  columns:    { key: keyof T; label: string; render?: (val: T[keyof T]) => React.ReactNode }[];
  onRowClick: (item: T) => void;
}

function Table<T extends { id: string | number }>({ data, columns, onRowClick }: TableProps<T>) {
  return (
    <table>
      <thead><tr>{columns.map(c => <th key={String(c.key)}>{c.label}</th>)}</tr></thead>
      <tbody>{data.map(row => (
        <tr key={row.id} onClick={() => onRowClick(row)}>
          {columns.map(c => <td key={String(c.key)}>{c.render ? c.render(row[c.key]) : String(row[c.key])}</td>)}
        </tr>
      ))}</tbody>
    </table>
  );
}

// Typed event handlers
const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => setValue(e.target.value);

# Scaffold new React + Vite project
npm create vite@latest my-app -- --template react-ts

# vite.config.ts — minimal config
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: { port: 3000, open: true },
  build:  { target: 'es2020', sourcemap: true },
  resolve: { alias: { '@': '/src' } }   // absolute imports: import { Button } from '@/components'
});

// Next.js App Router — streaming SSR with Suspense
export default function ProductPage({ params }) {
  return (
    <div>
      {/* Shell renders immediately */}
      <Header />

      {/* Streams in when product data is ready */}
      <Suspense fallback={<ProductSkeleton />}>
        <ProductDetails id={params.id} />
      </Suspense>

      {/* Streams in when reviews data is ready (independent) */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <Reviews productId={params.id} />
      </Suspense>
    </div>
  );
}

// Each async server component suspends independently
async function ProductDetails({ id }) {
  const product = await db.product.findUnique({ where: { id } });  // suspends
  return <div>{product.name}</div>;
}

import { cva } from 'class-variance-authority';
import clsx from 'clsx';

// cva — type-safe component variant system
const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none',
  {
    variants: {
      variant: {
        primary: 'bg-violet-600 text-white hover:bg-violet-700',
        outline: 'border border-violet-600 text-violet-600 hover:bg-violet-50',
        ghost:   'text-violet-600 hover:bg-violet-50'
      },
      size: {
        sm: 'h-8  px-3 text-sm',
        md: 'h-10 px-4 text-sm',
        lg: 'h-12 px-6 text-base'
      }
    },
    defaultVariants: { variant: 'primary', size: 'md' }
  }
);

function Button({ variant, size, className, ...rest }) {
  return <button className={clsx(buttonVariants({ variant, size }), className)} {...rest} />;
}

// Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  title:     'UI/Button',
  component:  Button,
  argTypes:  { variant: { control: 'select', options: ['primary','outline','ghost'] } }
};
export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = { args: { variant: 'primary', children: 'Click me' } };
export const Loading: Story = { args: { loading: true, children: 'Saving…' } };
export const Destructive: Story = {
  args: { variant: 'outline', children: 'Delete account' },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.click(canvas.getByRole('button'));
    await expect(canvas.getByText('Delete account')).toBeVisible();
  }
};

// packages/shared/hooks/useCartState.ts — shared across web and mobile
export function useCartState() {
  const [items, dispatch] = React.useReducer(cartReducer, []);
  const addItem    = (item)  => dispatch({ type: 'ADD',    payload: item });
  const removeItem = (id)    => dispatch({ type: 'REMOVE', payload: id });
  const total      = items.reduce((s, i) => s + i.price * i.qty, 0);
  return { items, total, addItem, removeItem };
}

// apps/web/components/Cart.tsx
export function Cart() {
  const { items, total, removeItem } = useCartState();
  return <ul>{items.map(i => <li key={i.id}>{i.name} <button onClick={() => removeItem(i.id)}>✕</button></li>)}</ul>;
}

// apps/mobile/screens/CartScreen.tsx
export function CartScreen() {
  const { items, total, removeItem } = useCartState();  // same hook
  return <FlatList data={items} renderItem={({ item }) => <View><Text>{item.name}</Text></View>} />;
}

// checkout-app/vite.config.ts — exposes CheckoutWidget
import federation from '@originjs/vite-plugin-federation';
export default defineConfig({
  plugins: [federation({
    name: 'checkout',
    filename: 'remoteEntry.js',
    exposes: { './CheckoutWidget': './src/CheckoutWidget' },
    shared: ['react', 'react-dom']  // shared singletons — avoid duplicate React
  })]
});

// shell-app — consumes CheckoutWidget at runtime
import federation from '@originjs/vite-plugin-federation';
export default defineConfig({
  plugins: [federation({
    remotes: { checkout: 'http://checkout.myapp.com/assets/remoteEntry.js' },
    shared: ['react', 'react-dom']
  })]
});

// shell-app component
const CheckoutWidget = React.lazy(() => import('checkout/CheckoutWidget'));
<Suspense fallback={<Spinner />}><CheckoutWidget /></Suspense>