React.useReducer

11 Jul, 2022

The problem with React.useState is that it makes you falling into the trap of creating new function on each render.

Take the following counter app for example, everytime when Home is re-rendered, the arrow function around setCounter is re-created.

This is no good.

import {useState} from "react";

export default function Home() {
  const [counter, setCounter] = useState(0);
  return (
    <button onClick={() => { setCounter(counter + 1) }}>+1</button>
  )
}

We can easily fix this with React.useReducer.

Voila! No function is re-created on re-render.

import {useReducer} from "react";

const counterReducer = (counter) => counter + 1;

export default function Home() {
  const [counter, dispatch] = useReducer(counterReducer, 0);
  return (
    <button onClick={dispatch}>{counter}</button>
  )
}