Use useReducer to manage complex state

Sat, 31 Oct 2020 00:00:00 +0000

useReducer is a React Hook which helps you manage complex state with a simple API. The hook takes a reducer function and the initial state as parameters. You can also pass in an optional argument which can be a function for lazy initialization of the state.

Here’s the simplest example of using useReducer you can think of.

import React from "react";

function reducer(value, newValue) {
  return newValue;
}

export default function App() {
  const [value, setValue] = React.useReducer(reducer, 0);
  return (
    <div className="App">
      <h1>{value}</h1>
      <button onClick={() => setValue(value + 1)}>Increment</button>
    </div>
  );
}

We are using useReducer for managing a single value, like when we use useState. But useReducer can do much more than that!

Reducer on dev notes

Use useReducer to manage complex state