Learn React Hooks

The useReducer Hook

The useReducer Hook is an advanced version of the useState Hook. It accepts a reducer as the first argument, which is a function with two arguments: state and action. The reducer function then returns the updated state computed from the current state and the action. If a reducer returns the same value as the previous state, React will not re-render components or trigger effects:

const [ state, dispatch ] = useReducer(reducer, initialState, initFn)

We should use the useReducer Hook instead of the useState Hook when dealing with complex state changes. Furthermore, it is easier to deal with global state because we can simply pass down the dispatch function instead of multiple setter functions.

The dispatch function is stable ...