ReactJS State Management Syllabus

State Management syllabus — full chapter and topic list

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

1. 1

   useState Hook

   3 topics

   • Initializing State
   • Updating State
   • Using Multiple State Variables
2. 2

   useReducer Hook

   3 topics

   • When to Use useReducer
   • Setting Up Reducer
   • Dispatching Actions
3. 3

   Context API

   3 topics

   • Creating Context
   • Providing Context
   • Consuming Context

State Management flashcards for ReactJS

20 of 50 cards from the State Management deck — real questions with worked answers.

1. In React function components, which Hook is used to add state?

   The `useState` Hook. It lets a function component hold state that persists across re-renders.

2. What does `useState` return, and in what order?

   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)`.

3. What is the argument passed to `useState`?

   The initial state value, used only on the first render. Example: `useState(0)` initializes state to `0`.

4. Why is array destructuring used with `useState`?

   Because `useState` returns a two-element array `[value, setter]`; destructuring names them conveniently, e.g. `const [name, setName] = useState('')`.

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

   Passing a function like `useState(() => expensiveComputation())`. The function runs only on the initial render, avoiding an expensive computation on every re-render.

6. What happens to a component when its state is updated with the setter?

   React schedules a re-render of the component (and its children), reflecting the new state value in the returned JSX.

7. Why must you never mutate state directly, e.g. `state.value = 5`?

   React detects changes by comparing references (identity), not deep contents. Direct mutation doesn't trigger a re-render and can cause stale/inconsistent UI. Always call the setter with a new value/object.

8. How do you correctly update state that depends on the previous state?

   Use the functional updater form: `setCount(prev => prev + 1)`. This uses the latest queued state rather than a possibly stale closure value.

9. Why can calling `setCount(count + 1)` multiple times in one event handler fail to increment as expected?

   All calls read the same stale `count` from the render's closure, so they set the same value. Using `setCount(c => c + 1)` for each call correctly applies sequentially.

10. How do you update a single property of an object stored in state?

    Create a new object copying the old one and overriding the property: `setUser(prev => ({ ...prev, name: 'Ann' }))`.

11. How do you add an item to an array held in state without mutating it?

    Return a new array: `setItems(prev => [...prev, newItem])`. Avoid `push`, which mutates in place.

12. How do you remove an item from a state array immutably?

    Use a non-mutating method that returns a new array, e.g. `setItems(prev => prev.filter(item => item.id !== id))`.

13. Is React state update synchronous or asynchronous within event handlers?

    Effectively asynchronous: React batches updates and applies them before the next render, so the state variable does not change immediately after calling the setter.

14. What is 'batching' of state updates in React?

    React groups multiple state updates that occur in the same event (and, in React 18+, in promises/timeouts too) into a single re-render for performance.

15. If you call `setValue(x)` with a value equal (by `Object.is`) to the current state, what does React do?

    React bails out and skips re-rendering the component, since the state reference/value has not changed.

16. When should you use multiple separate `useState` calls versus one object?

    Use separate state variables when the pieces of state are independent and change separately; group into one object/reducer when they change together or are logically related.

17. Can you call `useState` multiple times in one component?

    Yes. Each call creates an independent state variable, e.g. `const [name, setName] = useState('')` and `const [age, setAge] = useState(0)`.

18. Why must Hooks like `useState` not be called inside loops, conditions, or nested functions?

    React relies on a consistent call order across renders to associate each Hook with its state. Conditional calls break this order (the Rules of Hooks).

19. What are the two main Rules of Hooks?

    1) Only call Hooks at the top level (not in loops/conditions/nested functions). 2) Only call Hooks from React function components or custom Hooks.

20. What is `useReducer` and what does it return?

    A Hook for managing state via a reducer function. `const [state, dispatch] = useReducer(reducer, initialState)` returns the current state and a `dispatch` function.

See more State Management flashcards →

Planning State Management for ReactJS

State Management (ReactJS) FAQ