Which statement is correct about updating state with useState when the new state depends on the previous state?

Which statement is correct about updating state with useState when the new state depends on the previous state?

• A. State updates are always synchronous.
• B. You cannot update state based on previous state.
• C. Pass a function to the setter, e.g., setCount(prev => prev + 1).
• D. The setter function can only be called once per render.

Answer: (C)

When the new state depends on the previous state, use the functional form of the state setter. In React, state updates can be batched and may not happen immediately, so relying on the current render’s closure value can lead to mistakes if multiple updates occur quickly. By passing a function to the setter, React provides the most up-to-date previous state to that function, and you return the new state from it. For example, setCount(prev => prev + 1) increments based on the actual previous value, even if several updates are queued or triggered in quick succession. This pattern is the reliable way to handle increments, toggles, and other updates that depend on prior state. The other statements don’t fit because updates are not guaranteed to be synchronous, you can indeed update based on previous state using the functional form, and the setter can be called multiple times per render.

When the new state depends on the previous state, use the functional form of the state setter. In React, state updates can be batched and may not happen immediately, so relying on the current render’s closure value can lead to mistakes if multiple updates occur quickly. By passing a function to the setter, React provides the most up-to-date previous state to that function, and you return the new state from it. For example, setCount(prev => prev + 1) increments based on the actual previous value, even if several updates are queued or triggered in quick succession. This pattern is the reliable way to handle increments, toggles, and other updates that depend on prior state.

The other statements don’t fit because updates are not guaranteed to be synchronous, you can indeed update based on previous state using the functional form, and the setter can be called multiple times per render.