Describe action passed in the dispatch function

1
It is the action performed by the user. It can be a value of any type.
2
By convention, an action is usually an object with a type property identifying it and, optionally, other properties with additional information.
3
Actions can take any shape. They should include the minimal information that the reducer needs to compute the next state.
4
The dispatch function only updates the state variable for the next render. If you read the state variable after calling the dispatch function, you will still get the old value that was on the screen before your call.
5
If the new value you provide is identical to the current state, as determined by an Object.is comparison, React will skip re-rendering the component and its children. This is an optimisation. React may still need to call your component before ignoring the result, but it shouldn’t affect your code.
6
React batches state updates. It updates the screen after all the event handlers have run and have called their set functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example, to access the DOM, you can use flushSync.

Difficulty: 5/10

Topics: useReducer, dispatch action, state updates

0-2 years experience

1
Imagine you're adding a new button that toggles a modal using useReducer. How would you structure the action you pass to dispatch, and what would the reducer look like for that action?
2
If you call dispatch({ type: 'INCREMENT' }) but your reducer only checks for 'INCREMENT_COUNT', what will happen and why?

2-5 years experience

1
You have a feature where a form submission can succeed or fail, and you dispatch different actions based on the API response. The UI sometimes doesn't update on failure. Walk me through how you'd debug the action payload and reducer handling.
2
When refactoring a component to use useReducer instead of multiple useState calls, you notice extra renders. Explain the trade‑offs of putting more data into the action object versus deriving it in the reducer.

5-8 years experience

1
In a large dashboard, many components share a common reducer via Context. How would you design the action shape to keep it extensible while avoiding type collisions and ensuring performance?
2
Suppose you need to add optimistic UI updates for a drag‑and‑drop list using useReducer. How would you structure actions and handle rollback if the server rejects the move, considering immutability and state consistency?

8+ years experience

1
Your team is migrating from useReducer‑based local state to a global Redux store. What considerations would you make about the action objects you already dispatch, and how would you plan a phased migration without breaking existing components?
2
Across multiple micro‑frontends, you want a shared convention for actions to enable cross‑team debugging. Describe the architectural guidelines you’d set for action naming, payload standards, and versioning, and how they'd impact long‑term maintenance.

❓Can you show a concrete example of an action object you would dispatch for this case?
❓What are common pitfalls when naming or structuring action types?
❓How do you ensure actions remain serializable and side‑effect free?