Choosing between useState and useReducer

This is one of the things that you should see with your eyes, so I'd recommend watching me go through the advantages and disadvantages of different ways of using hooks for dealing with state in React.

I start with useState, show a bug in the below code, then refactor to useReducer, add redux/toolkit to it, and then finally refactor to "use-complex-state". I'm leaving the source code here, so you can play around with it:

function App() {
  const [counter, setCount] = useState(0);
  return (
    <div className="App">
      <header className="App-header">
        {counter}
        <div
          onClick={() => {
            console.log("2 points");
            setCount(counter + 2);
          }}
        >
          2 points!
          <button
            onClick={() => {
              console.log("1 point");
              setCount(counter + 1);
            }}
          >
            1 point
          </button>
        </div>
      </header>
    </div>
  );
}
useState with a bug


const initialState = { counter: 0 };

function reducer(
  state = initialState,
  action: { type: string; payload?: any }
) {
  switch (action.type) {
    case "increment":
      return { counter: state.counter + 1 };
    case "incrementBy":
      return { counter: state.counter + action.payload };
    default:
      throw new Error();
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div className="App">
      <header className="App-header">
        {state.counter}
        <div
          className="Points"
          onClick={() => {
            console.log("div clicked add two points payload");
            dispatch({ type: "incrementBy", payload: 2 });
          }}
        >
          <br />
          <button
            onClick={() => {
              console.log("button clicked add one point payload");
              dispatch({ type: "increment" });
            }}
          >
            1 point
          </button>
        </div>
      </header>
    </div>
  );
}
useReducer - everything works, but verbose code
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

const initialState = { count: 0 };

const {
  actions: { increment, incrementByTwo },
  reducer,
} = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
    incrementBy: (state, action: PayloadAction<number>) => {
      state.count += action.payload;
    },
  },
});

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

  return (
    <div className="App">
      <header className="App-header">
        {state.count}
        <div
          onClick={() => {
            dispatch(incrementBy(2));
          }}
        >
          2 points!
          <button
            onClick={() => {
              dispatch(increment());
            }}
          >
            1 point
          </button>
        </div>
      </header>
    </div>
  );
}
useReducer with Redux Toolkit

import { PayloadAction } from "@reduxjs/toolkit";
import { useComplexState } from "use-complex-state";
import "./App.css";

const initialState = { count: 0 };

export default function App() {
  const [state, { incrementBy, increment }] = useComplexState({
    initialState,
    reducers: {
      increment: (state) => {
        state.count += 1;
      },
      incrementBy: (state, action: PayloadAction<number>) => {
        state.count += action.payload;
      },
    },
  });

  return (
    <div className="App">
      <header className="App-header">
        {state.count}
        <div
          className="Points"
          onClick={() => {
            console.log("increment by 2 with complex state");
            incrementBy(2);
          }}
        >
          2 points!
          <br />
          <button
            onClick={() => {
              console.log("increment with complex state");
              increment();
            }}
          >
            1 point
          </button>
        </div>
      </header>
    </div>
  );
}


useComplexState hook

Let me know if you have any questions or thoughts in the comments below.


Let us help you on your journey to Quality Faster

We at Xolv.io specialize in helping our clients get more for less. We can get you to the holy grail of continuous deployment where every commit can go to production — and yes, even for large enterprises.

Feel free to schedule a call or send us a message below to see how we can help.

User icon
Envelope icon

or

Schedule a 30m call
  • Adding TypeScript to the official Apollo Platform Tutorial app

    In todays video I go through a preparation of the official Apollo Platform Tutorial App for adding Chimp to it. I decided to divide that task into two steps - first is adding TypeScript to the codebase. Watch me work, struggle, fly through code, hopefully you will learn some tricks :)

  • AWS CDK Lambda and DynamoDB dependency management

    A discussion about issues we've stumbled upon and a solution that simplified our CDK workflow.

  • cypress-cucumber-preprocessor 4.1.0 - TSX and Multiline Step Arguments support

    We've just released a new version of the cypress-cucumber-preprocessor package with TSX/React testing and Multiline Step Arguments.