React flashcards: hooks, rendering and React 19

All 50 cards

1. 1
   What is a React component?
   A function that returns JSX; its name must start with a capital letter
2. 2
   Can a component change its props?
   No. Props are read-only; change data through state or a callback from the parent
3. 3
   Why className instead of class in JSX?
   JSX compiles to JavaScript, where class is a reserved word (likewise htmlFor for for)
4. 4
   What renders when count is 0?

   tsx

   {count && <Badge count={count} />}

   A literal 0. Use a boolean: {count > 0 && <Badge count={count} />}
5. 5
   What should a list item’s key be?
   A stable ID unique among its siblings; array indexes break when items are reordered or removed
6. 6
   What happens when a component’s key changes?
   React unmounts it and mounts a fresh one, resetting its state
7. 7
   What does useState return?
   The current value and a setter; calling the setter schedules a re-render

   tsx

   const [count, setCount] = useState(0)

8. 8
   When should you pass a function to a state setter?
   When the next state depends on the previous one

   tsx

   setCount((c) => c + 1)

9. 9
   What is count after one click if it starts at 0?

   tsx

   function onClick() {
     setCount(count + 1)
     setCount(count + 1)
   }

   1: both calls read the same snapshot. With setCount(c => c + 1) twice it would be 2
10. 10
    Why doesn’t the state variable change right after calling its setter?
    State is a snapshot for the current render; the new value shows up on the next render
11. 11
    What is automatic batching?
    Since React 18, several state updates in the same event, timeout or promise are combined into one re-render
12. 12
    Add an item to an array in state
    tsx

    setItems([...items, item])

    Never mutate state (items.push); React compares references.
13. 13
    What makes a component re-render?
    Its state changes, its parent re-renders, or a context it reads changes
14. 14
    What is useEffect for?
    Synchronizing a component with something outside React: subscriptions, timers, the DOM, network connections
15. 15
    Clean up an effect
    Return a function; React runs it before the effect runs again and on unmount

    tsx

    useEffect(() => {
      const id = setInterval(tick, 1000)
      return () => clearInterval(id)
    }, [])

16. 16
    Effect dependency arrays: [], [a, b], omitted
    [] runs after mount only; [a, b] runs when a or b changes (compared with Object.is); omitted runs after every render
17. 17
    What is a stale closure in a hook?
    An effect or callback that reads an old value because a dependency is missing from its array
18. 18
    Why do effects run twice in development?
    StrictMode mounts, unmounts and remounts components once to expose missing cleanup; production runs them once
19. 19
    Should you sync derived data with an effect?
    No. Compute it during render (const total = items.length); effects for derived state cause extra renders and bugs
20. 20
    What does useMemo do?
    Caches a computed value between renders until its dependencies change
21. 21
    What does useCallback do?
    Caches a function between renders, so children wrapped in memo don’t re-render needlessly

    useCallback(fn, deps) equals useMemo(() => fn, deps).
22. 22
    What does memo do?
    Skips re-rendering a component when its props are shallowly equal to last time
23. 23
    What does the React Compiler do?
    Adds memoization automatically at build time, so most manual useMemo, useCallback and memo become unnecessary
24. 24
    What is useRef for?
    A mutable .current that survives re-renders without causing one; also a handle to a DOM node

    tsx

    const input = useRef<HTMLInputElement>(null)
    // <input ref={input} />
    input.current?.focus()

25. 25
    How do you pass a ref to your own component in React 19?
    As a regular ref prop; forwardRef is no longer needed for function components
26. 26
    Controlled input
    tsx

    <input value={name} onChange={(e) => setName(e.target.value)} />

27. 27
    Uncontrolled input
    The DOM keeps the value; set it with defaultValue and read it with a ref or FormData
28. 28
    Provide and read context in React 19
    tsx

    const Theme = createContext("light")
    
    <Theme value="dark">
      <Page />
    </Theme>
    
    const theme = useContext(Theme) // "dark"

    Rendering the context itself as a provider replaces <Theme.Provider>.
29. 29
    Why can a context make many components re-render?
    Every consumer re-renders when the provided value changes by reference; memoize object values
30. 30
    When is useReducer a better fit than useState?
    When state has several related fields or many update types; updates go through a pure (state, action) => next function

    tsx

    const [state, dispatch] = useReducer(reducer, initial)
    dispatch({ type: 'added', text })

31. 31
    What is a custom hook?
    A function whose name starts with use and that calls other hooks, to reuse stateful logic
32. 32
    The Rules of Hooks
    Call hooks only at the top level of components or custom hooks, never in loops, conditions or nested functions
33. 33
    What does use() do in React 19?
    Reads a promise (suspending until it resolves) or a context; unlike other hooks it can be called conditionally
34. 34
    What does <Suspense> do?
    Shows its fallback while something inside it is suspended, such as lazy code or data read with use

    tsx

    <Suspense fallback={<Spinner />}>
      <Comments />
    </Suspense>

35. 35
    What can’t an error boundary catch?
    Errors in event handlers, async code like timeouts, server rendering, or the boundary itself

    Error boundaries are still written as class components.
36. 36
    What does useTransition do?
    Marks a state update as non-urgent so typing and clicks stay responsive; isPending tells you it’s in progress

    tsx

    const [isPending, startTransition] = useTransition()
    startTransition(() => setTab(next))

37. 37
    What does useDeferredValue do?
    Gives you a version of a value that lags behind during heavy renders, like results trailing a search box
38. 38
    What is useOptimistic for?
    Showing the expected result of an async action immediately, then settling on the real state when it finishes

    tsx

    const [optimistic, addOptimistic] = useOptimistic(messages, (list, msg) => [...list, msg])

39. 39
    What does useActionState return?
    [state, formAction, isPending]; the action receives the previous state and the form data

    tsx

    const [error, submit, isPending] = useActionState(saveName, null)
    // <form action={submit}>

40. 40
    What happens with <form action={fn}> in React 19?
    Submitting calls fn with the FormData; it can be async, and React tracks the pending state
41. 41
    What does useFormStatus read?
    The pending state of the parent <form>, from a component rendered inside it (it comes from react-dom)
42. 42
    What are React Server Components?
    Components that run only on the server: they can be async and read data directly, ship no JavaScript, and can’t use state or effects
43. 43
    What does 'use client' mark?
    A module (and what it imports) as client code: the boundary where Client Components start
44. 44
    What does 'use server' mark?
    Server Functions that client code can call, for example as form actions
45. 45
    useLayoutEffect vs useEffect
    useLayoutEffect runs after DOM changes but before paint, for measuring layout; it blocks painting
46. 46
    What is useId for?
    Generating unique IDs that match between server and client, e.g. to link a label and an input
47. 47
    Group children without an extra DOM element
    tsx

    <>
      <Title />
      <Body />
    </>

    Use <Fragment key={id}> when a fragment needs a key.
48. 48
    What does createPortal do?
    Renders children into another DOM node (for modals and tooltips) while keeping React context and events
49. 49
    What is “lifting state up”?
    Moving shared state to the closest common parent and passing it down as props
50. 50
    What causes a hydration mismatch?
    The first client render differing from the server HTML, e.g. from Date.now(), random values or window checks

    Move client-only values into an effect, or render them after mount.