useState() vs useReducer() in React.

useState()

Both useState and useReducer are hooks in React that allow you to manage state in functional components.

useState is a simpler hook that allows you to manage state as a single value or an object. It returns an array with two elements: the current state value and a function to update that value.

useReducer()

useReducer, on the other hand, is a more powerful hook that allows you to manage state through a reducer function. It returns an array with two elements: the current state value and a dispatch function that allows you to trigger state updates by calling a specific action.

Usage Recommendation:

In general, useState is recommended for simple state updates or when you only need to manage a single piece of state. useReducer is recommended for more complex state updates or when you have multiple pieces of related state that need to be updated together.

Here are some examples:

Example of using useState()

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

In this example, we import useState from the react package and define a functional component called Counter.

Inside the Counter component, we call the useState hook and pass in an initial value of 0. The useState hook returns an array with two elements: the current state value (in this case, count) and a function to update that value (in this case, setCount).

We use array destructuring to assign these values to count and setCount, respectively.

We define a function called increment that calls setCount with the current value of count plus one. This function is passed as a callback to the onClick event of a button element.

Finally, we render the current value of count inside a paragraph element and render a button that triggers the increment function when clicked.

When the button is clicked, the increment function is called, which updates the value of count using the setCount function returned by the useState hook. This triggers a re-render of the component with the new value of count displayed on the page.

Example of using useReducer()

import React, { useReducer } from 'react';

const initialState = { count: 0, isOn: false };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'toggle':
      return { ...state, isOn: !state.isOn };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  function increment() {
    dispatch({ type: 'increment' });
  }

  function toggle() {
    dispatch({ type: 'toggle' });
  }

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
      <p>Toggle: {state.isOn ? 'On' : 'Off'}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

In this example, we define an initial state object with two properties: count and isOn. We also define a reducer function that takes in the current state and an action object, and returns a new state object based on the action type.

Inside the Counter component, we call the useReducer hook and pass in the reducer function and the initial state object. The useReducer hook returns an array with two elements: the current state value (in this case, state) and a dispatch function that allows us to trigger state updates by passing in an action object.

We define two functions called increment and toggle that call the dispatch function with specific action objects. In this case, increment passes an action object with a type of ‘increment‘, and toggle passes an action object with a type of ‘toggle‘.

Finally, we render the current value of count and a button that triggers the increment function when clicked. We also render the current value of isOn and a button that triggers the toggle function when clicked.

When either button is clicked, the corresponding function is called, which triggers a state update by calling the dispatch function with an action object. The reducer function then returns a new state object based on the action type, which triggers a re-render of the component with the new state values displayed on the page.

Conclusion.

In this post, we have seen the difference between the useState() and the useReducer() hooks in react and their appropriate use case.

Happy learning ….