reactjs(useReducer Hook)

The useReducer Hook notes:

const [state, dispatch] = useReducer(reducer, initialArg, init?)

Below lets understands the parameters, returns & Limitations:

Parameters:

reducer: The reducer function contains the logic which takes the state and action as a arguments and returns the next state.
initialArg: This contains the initial state and can be of any type.
optional init: The initializer function that specifies how the initial state is calculated. If it’s not specified, the initial state is set to initialArg. Otherwise, the initial state is set to the result of calling init(initialArg).

Returns:

useReducer returns an array with exactly two values:

The current state. During the first render, it’s set to init(initialArg) or initialArg (if there’s no init).
The dispatch function which allows us to modify the current state as per the action type passed and trigger a re-render.

Limitations:

useReducer is a Hook, so you can only call it at the top level of your component or your own Hooks. You can’t call it inside loops or conditions. If you need that, extract a new component and move the state into it.
In Strict Mode, React will call your reducer and initializer twice in order to help you find accidental impurities. This is development-only behavior and does not affect production. If your reducer and initializer are pure (as they should be), this should not affect the logic of your component. The result from one of the calls is ignored.

Lets understand the useReducer hook with the help of below sample code:

// added comments for better understanding of below sample code:

const initialState = {count: 0}; // count is zero as the initial value and this is the initial state for our sample code.

// the below reducer function contains the logic to update the current state as per the action passed to it, and action contains the logic to update the state, in below reducer function, it accepts the two arguments first is the current state and other is the action(action type updates the current state as per the logic defined).

function reducer(state, action) {

switch (action.type) {

case 'increment': return {count: state.count + 1};

case 'decrement': return {count: state.count - 1};

default: throw new Error();

} };

function Counter() {

const [state, dispatch] = useReducer(reducer, initialState); // this is a es6(javascript) destructuring happening here, here useReducer hook call is being made which calls the reducer function and returns the current state which gets assigned in state variable of const type in above line of code and a dispatch function that is assigned to dispatch variable of const type here dispatch function acts like a setter function which when called updates the current state.

return (

Count: {state.count} // display the current state i.e count value.

<button onClick={() => dispatch({type: 'decrement'})}>-</button> //on this button click it will dispatch an action of type 'decrement' and results in updating the current state with a rerender.

<button onClick={() => dispatch({type: 'increment'})}>+</button> //on this button click it will dispatch a action of type 'increment' and will result in updating the current state with a rerender.

</>

); }

additional notes:

1- We can make use of multiple useReducer in a single component if required.

2- useContext hook and context api when used with useReducer hook can help us managing global state with react application.

If you are new to useContext hook I have already written an article on the same, please visit : https://hashnode.com/edit/cldimm3wz000709l2ezgb82qo

// end line.

Thanks, happy coding