Introduction to React Hooks — useReducer
By: Wathsala Danthasinghe
Tags: React Hook, Web Development, React, Tutorial, JavaScript

React Hooks is available since React 16.8 and React Native supported since version 0.59. In my previous article is discussed about the Basic Hooks of React. If you’re new to React Hooks, click here to read it. In this article, I am going to discuss the useReducer in the Additional Hooks on React.

There are two types of built-in Hooks in React which Basic Hooks and Additional Hooks.

Basic Hooks

useState

useEffect

useContext

Additional Hooks

useReducer

useCallback

useMemo

useRef

useImperativeHandle

useLayoutEffect

useDebugValue

What is useReducer?

An alternative to useState. Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method.source

useReducer is a built in Hook in React is used to state management in React. useReducer is an alternative to useState. It is related to reducer functions. If you have clear idea about the Redux state management, then you already have enough knowledge how it works. Click here to take clear idea about Redux.

Why we use useReducer over useState?

useState is used, when state values are primitives, state values are only used in a single component inside or logic is simple.

useReducer is used, when we have complex state like involves objects or arrays, next state is depend on previous one, data share among the components and update state more complex. useReducer is optimized performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

Now, I am going to implement a simple counter web application with discussing the features of the useReducer.

Step 1. define initial state and reducer function.

The reducer function accept two parameters which current state and action then return one value which is the new state. action parameter is given the instruction the reducer function to perform. Here, INCREMENT, DECREMENT and RESET are the given instructions(action) to the reducer function.

const initialState = {

value: 0

} const reducer = (state, action) => {

switch(action.type){

case ‘INCREMENT’ :

return {value: state.value + 1 };

case ‘DECREMENT’ :

return {value: state.value — 1 };

case ‘RESET’ :

return initialState;

default:

return state;

}

}

Step 2. useReducer Hook

First we need to import the useReducer from React local state to the function component.

import React, { useReducer} from ‘react’;

state, initializer argument and the initializer are the input parameter to the useReducer. We can initialize useReducer state by two different ways.

2.1 Specifying the initial state

The first way is, pass the initial state as a second argument. It is the simple way. here useReducer accepts two arguments which reducer function and the initial state.

const [count, dispatch] = useReducer(reducer, initialState);

the count.value print the value and it is update with the dispatch types of the action. Complete code,

Figure 1 (App.js)

2.2 Lazy initialization

React doesn’t use the state = initialState argument convention popularized by Redux. source

The other way is, create the initial state lazily. In here, pass an init function as as the third argument. Using this way we can initial state outside the reducer. useReducer accepts the optional third argument to the initial action that is called during the initial render.

In the below code, I pass initial value 0 to the Counter function as a props since App function component.