Patterns — Cheat Sheet

Custom Hooks

function useDebouncedValue(value, delay = 300) {
  const [debounced, setDebounced] = useState(value)

  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay)
    return () => clearTimeout(id)
  }, [value, delay])

  return debounced
}

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

  useEffect(() => {
    try { localStorage.setItem(key, JSON.stringify(value)) } catch {}
  }, [key, value])

  return [value, setValue]
}

// Return an array for a two-value tuple people will rename,
// an object when there are several named things:
return { data, isLoading, error, refetch }

Context — Sharing Without Prop Drilling

const ThemeContext = createContext(null)

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('system')

  // Without useMemo this object is new on EVERY render of the
  // provider, so every consumer re-renders even if theme is the same
  const value = useMemo(
    () => ({ theme, setTheme, isDark: theme === 'dark' }),
    [theme],
  )

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
}

export function useTheme() {
  const ctx = useContext(ThemeContext)
  if (!ctx) throw new Error('useTheme must be used inside <ThemeProvider>')
  return ctx      // never undefined from here on
}

// Export the hook, not the context. Consumers then cannot use it
// outside a provider, and you can change the implementation freely.

Choosing a State Management Approach

// 1. SERVER state — fetched, cached, can change without you
//    -> TanStack Query. Not a store.
//    This is 70% of what people put in Redux.

// 2. URL state — filters, page, tab, search, selected id
//    -> useSearchParams. Shareable and refresh-proof for free.

// 3. LOCAL UI state — is this dropdown open, this input's draft
//    -> useState in the component that owns it

// 4. GLOBAL client state — session, theme, cart, sidebar collapsed
//    -> context for rarely-changing values
//    -> a store when it changes often or many components slice it

// Work through 1-3 honestly and 4 is often two or three values.

// The signal you actually need a store:
//   - many components read different SLICES of one changing object
//   - context re-renders are measurably hurting
//   - state must survive route changes and be updated from anywhere

memo, useMemo and useCallback

// memo — skip re-rendering a component when its props are shallow-equal
const ProblemRow = memo(function ProblemRow({ problem, onOpen }) { ... })

// useMemo — cache a computed VALUE between renders
const stats = useMemo(() => computeStats(attempts), [attempts])

// useCallback — cache a FUNCTION identity between renders
const onOpen = useCallback((slug) => navigate(`/p/${slug}`), [navigate])

// The three work together or not at all. memo compares props with
// Object.is, so a new function or object prop defeats it:
const Row = memo(RowImpl)
<Row problem={p} onOpen={() => open(p.id)} />     // new arrow each render
                                                   // -> memo never skips

// Both halves are required: memo on the child AND stable props.
// One without the other is pure cost.

Error Boundaries

class ErrorBoundary extends Component {
  state = { error: null }

  static getDerivedStateFromError(error) {
    return { error }                       // render the fallback
  }

  componentDidCatch(error, info) {
    reportError(error, { componentStack: info.componentStack })  // log it
  }

  render() {
    if (this.state.error) {
      return this.props.fallback?.(this.state.error, () => this.setState({ error: null }))
        ?? <DefaultErrorFallback />
    }
    return this.props.children
  }
}

// react-error-boundary wraps this with a friendlier API, including
// a reset that also resets the subtree:
<ErrorBoundary
  FallbackComponent={ErrorFallback}
  onReset={() => queryClient.resetQueries()}
  resetKeys={[location.pathname]}          // auto-reset on navigation
>

Portals, Modals and Overlays

import { createPortal } from 'react-dom'

function Modal({ children, onClose }) {
  return createPortal(
    <div className="backdrop" onClick={onClose}>
      <div role="dialog" aria-modal="true" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.body,          // where it renders
  )
}

// DOM position: document.body — free of any ancestor's overflow,
// transform, filter or z-index stacking context.
// React position: still a child of the component that rendered it,
// so context works and events bubble to the React parent.

// That last part surprises people: a click inside the portal fires
// the onClick of the React ancestor, even though the DOM nodes are
// nowhere near each other.

// Portals are also right for tooltips, dropdowns, popovers and
// toasts — anything that must not be clipped by its container.

Designing a Component API

// Version 1
<Card title="Two Sum" />
// Eighteen months later
<Card title="Two Sum" showIcon hideFooter compact variant="pro"
      headerRight={<Badge />} bodyClassName="p-0" noBorder collapsible />
// Nobody knows which combinations were ever tested.

// Compound components — the caller assembles the parts
<Card>
  <Card.Header>
    <Card.Title>Two Sum</Card.Title>
    <ProBadge />
  </Card.Header>
  <Card.Body><Description /></Card.Body>
  <Card.Footer><SolveButton /></Card.Footer>
</Card>

// Shared state stays implicit, via a private context
const TabsContext = createContext(null)
export function Tabs({ children, defaultValue }) {
  const [value, setValue] = useState(defaultValue)
  return <TabsContext.Provider value={{ value, setValue }}>{children}</TabsContext.Provider>
}
Tabs.List = TabsList; Tabs.Trigger = TabsTrigger; Tabs.Panel = TabsPanel
// The caller never wires value and onChange between the parts.