How should you update state when the new state depends on the previous state?

How should you update state when the new state depends on the previous state?

• A. Call the setter with the new value directly, e.g., setCount(count + 1).
• B. Use a separate variable to track updates outside of state.
• C. Pass a function to the setter, e.g., setCount(prev => prev + 1).
• D. Reinitialize the state by calling a reset function.

Answer: (C)

When the new state depends on the previous value, you should use the functional updater form of the state setter. React may batch updates and perform them asynchronously, so the value you read from a variable like count might not reflect the very latest state. By passing a function to the setter, React provides you with the most recent state as an argument (often called prev), and you return the new state based on that value. For example, setCount(prev => prev + 1) increments the count reliably, even if multiple updates occur in the same tick or inside an async callback. Using setCount(count + 1) risks working with a stale count, because count is tied to the render in which it was captured and may not reflect subsequent updates. Keeping updates in a separate variable outside of state isn’t the source of truth React relies on, and resetting the state reinitializes it rather than applying the increment you intend.

When the new state depends on the previous value, you should use the functional updater form of the state setter. React may batch updates and perform them asynchronously, so the value you read from a variable like count might not reflect the very latest state. By passing a function to the setter, React provides you with the most recent state as an argument (often called prev), and you return the new state based on that value. For example, setCount(prev => prev + 1) increments the count reliably, even if multiple updates occur in the same tick or inside an async callback.

Using setCount(count + 1) risks working with a stale count, because count is tied to the render in which it was captured and may not reflect subsequent updates. Keeping updates in a separate variable outside of state isn’t the source of truth React relies on, and resetting the state reinitializes it rather than applying the increment you intend.