ReactJS React Hooks Syllabus

React Hooks syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for React Hooks in ReactJS, not a summary of it.

1. 1

   Basic Hooks

   3 topics

   • useState
   • useEffect
   • useContext
2. 2

   Additional Hooks

   3 topics

   • useReducer
   • useCallback
   • useMemo
3. 3

   Custom Hooks

   3 topics

   • Creating Custom Hooks
   • Reusing Logic with Custom Hooks
   • Examples of Custom Hooks

React Hooks flashcards for ReactJS

21 of 49 cards from the React Hooks deck — real questions with worked answers.

1. What is the `useState` Hook and what does it return?

   `useState` is a React Hook that lets a function component hold local state. It returns an array of exactly two elements: the current state value and a setter function to update it, e.g. `const [count, setCount] = useState(0)`. Its argument is the initial state.

2. How does the state updater from `useState` behave when you pass it a function, e.g. `setCount(c => c + 1)`?

   Passing a function (the functional/updater form) gives that function the latest pending state as its argument and uses its return value as the next state. It is the safe way to update state based on the previous value, especially when multiple updates are batched in one render.

3. What is a lazy initializer in `useState` and when should you use it?

   If you pass a function as the argument, `useState(() => expensiveInit())`, React calls it only once on the initial render to compute the starting state. Use it when the initial value is expensive to compute so the work isn't repeated on every render.

4. Does calling a `useState` setter immediately change the state variable within the same render?

   No. State updates are asynchronous with respect to the current render; the variable keeps its value until the next render. React schedules a re-render, and the new value is only visible in the following render's execution.

5. What happens if you call a `useState` setter with a value equal (by `Object.is`) to the current state?

   React bails out and skips re-rendering that component (and its children), because `Object.is` comparison shows the state has not changed. This is an optimization to avoid unnecessary renders.

6. Why must state updates to objects and arrays with `useState` be immutable?

   React compares the new state reference to the old one with `Object.is`. Mutating the existing object/array keeps the same reference, so React won't detect a change or re-render. You must create a new object/array (e.g. spread) so the reference differs.

7. What is the purpose of the `useEffect` Hook?

   `useEffect` lets you run side effects (data fetching, subscriptions, manual DOM changes, timers) after render. It synchronizes a component with an external system, running after the DOM has been committed/painted.

8. How does the dependency array of `useEffect` control when the effect runs? Compare `[]`, no array, and `[a, b]`.

   No array: the effect runs after every render. `[]` (empty): runs only once after the initial mount. `[a, b]`: runs after the first render and again whenever any listed dependency changes (compared with `Object.is`).

9. What is the cleanup function in `useEffect` and when does it run?

   The function you return from the effect. React runs it before the effect re-runs (to clean up the previous effect) and when the component unmounts. It is used to unsubscribe, clear timers, or close connections to prevent leaks.

10. In what order do the cleanup and setup of a dependency-changed `useEffect` run across re-renders?

    On each re-render where a dependency changed, React first runs the previous effect's cleanup, then runs the new effect's setup. So the sequence is: cleanup(old) → setup(new).

11. When (relative to the browser paint) does `useEffect` fire, and how does that differ from `useLayoutEffect`?

    `useEffect` fires asynchronously after the browser has painted the screen. `useLayoutEffect` fires synchronously after DOM mutations but before the browser paints, so use it for DOM measurements/layout to avoid visual flicker.

12. What causes an infinite loop with `useEffect`, and how is it avoided?

    Updating state inside an effect that also lists that state (or an unstable object/function) as a dependency causes re-render → effect → state update → re-render endlessly. Avoid it by fixing the dependency array, using functional updates, or memoizing objects/functions.

13. Why does React (in development, Strict Mode) mount, unmount, and remount components, and how does that affect effects?

    In development Strict Mode, React deliberately runs each effect an extra time (setup → cleanup → setup) to surface missing or incorrect cleanup. It has no effect in production; it forces you to write effects that are resilient to re-running.

14. What is the `useContext` Hook and what does it read?

    `useContext(SomeContext)` reads and subscribes to the current value of a React context. It returns the value of the nearest matching `<SomeContext.Provider>` above the component in the tree, letting you avoid prop drilling.

15. When a context value changes, which components re-render?

    Every component that calls `useContext` for that context re-renders when the provider's `value` changes (compared with `Object.is`), regardless of `memo`. Components that don't consume the context are not forced to re-render by the context change itself.

16. What value does `useContext` return when there is no matching Provider above the component?

    It returns the default value that was passed to `createContext(defaultValue)`. If no default was specified, it returns whatever default was given (often `undefined` or `null`).

17. Why should the `value` prop of a context Provider often be memoized?

    If `value` is an inline object/array/function, it gets a new reference on every render of the Provider's parent, forcing all consumers to re-render. Wrapping it in `useMemo`/`useCallback` keeps the reference stable so consumers only re-render when the data truly changes.

18. What is the `useReducer` Hook and what does it return?

    `useReducer` manages state via a reducer function. Called as `const [state, dispatch] = useReducer(reducer, initialArg, init?)`, it returns the current state and a `dispatch` function. You update state by calling `dispatch(action)`.

19. What is the signature of a reducer function used with `useReducer`?

    `(state, action) => newState`. It is a pure function that takes the current state and an action object, and returns the next state. It must not mutate the existing state or perform side effects.

20. When should you prefer `useReducer` over `useState`?

    Prefer `useReducer` when state logic is complex, involves multiple sub-values, the next state depends heavily on the previous state, or when many event handlers update state in related ways. It centralizes transitions and makes updates easier to test and debug.

21. What is the optional third argument (`init`) of `useReducer` used for?

    It is a lazy initializer function. React computes the initial state as `init(initialArg)`, letting you extract initialization logic and reset state (e.g. by calling `dispatch` with an action that recomputes `init`). It also avoids recomputing on every render.

See more React Hooks flashcards →

Planning React Hooks for ReactJS

React Hooks (ReactJS) FAQ