Dispatching States
Explore how to dispatch state changes in React using the useState hook. Understand the state comparison mechanism for primitive and non-primitive types, how React uses Object.is for equality checks, and how multiple dispatches are managed in a single event. This lesson helps you manage state updates efficiently in function components.
Dispatch function in the useState hook
We have learned that the dispatch function, provided by the useState hook, allows us to request a change of state any time we want to. The input argument that represents an action can be a string, a number, an object, an array, or any JavaScript expression:
// Dispatching a state valuedispatch(state);// Dispatching an object with a state propertydispatch({ state });// Dispatching an array with a state elementdispatch([state]);// Dispatching nulldispatch(null);
We know that, internally, the input argument supports a functional update format as well:
dispatch(state => state + 1)
The benefit of using a functional update format here is that it has an opportunity to read the previous state before moving toward the next state. This can sometimes become useful if we build a new state that requires an old state.
State comparison mechanism
A dispatched state is compared with the current state before making a final call if it changes. This means that not all dispatches end up with a state change. Take the following code as an example: ...