Create a modified useState hook to get previous value

#webdev #react #hooks #usestate

In React Js, we use useState in almost every component. An example of useState is given below:

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

In above example we have created a count state where we can use setCount to update the count. But, imagine a situation where you need to compare the previous count with current count ( i.e. count ).

In this tutorial, we will create a custom hook in which we will also get a third variable i.e. prevState

const [count, setCount, prevCount] = useStateModified(0);

In above example, we have prevCount as well that we can use for our custom logic.

Step 1

Create a file in project directory with name useStateModified.jsx.

Step 2

Create a function with name useStateModified and export it as default export.

const useStateModified = () => {

};

export default useStateModified;

Step 3

Create a state using useState, take initialState as parameter in our custom hook and return state and setState.

import { useState } from "react";

const useStateModified = (initalState) => {
  const [state, setState] = useState(initalState);
  return [state, setState];
};

export default useStateModified;

Step 4

Till now it is nothing new and is equivalent to directly using useState in any component. To save the previous state we will use useRef hook. We will return prevState.current as third item of array.

import { useEffect, useRef, useState } from "react";

const useStateModified = (initalState) => {
  const [state, setState] = useState(initalState);
  const prevState = useRef(initalState);

  return [state, setState, prevState.current];
};

export default useStateModified;

Step 5

If you are aware of useRef, its value won't change until and unless we update its current property ( example - prevState.current = 'some value').
So now, we will write a useEffect hook that will listen for the changes in state value. Whenever there is a change in the state, we will also update prevState.

import { useEffect, useRef, useState } from "react";

const useStateModified = (initalState) => {
  const [state, setState] = useState(initalState);
  const prevState = useRef(initalState);

  useEffect(() => {
    prevState.current = state;
  }, [state]);

  return [state, setState, prevState.current];
};

export default useStateModified;

When there will be change in state, it will execute the line (return [state, setState, prevState.current]) before running useEffect statement.

Lets see how we can use it.

import { useEffect, useState } from "react";
import "./styles.css";
import useStateModified from "./useStateModified";

export default function App() {
  const [count, setCount, prevCount] = useStateModified(0);
  return (
    <div className="App">
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
      <h2>Count: {count}</h2>
      <h2>Previous Count: {prevCount}</h2>
    </div>
  );
}

This way you can create custom useState hook to achieve functionality where you need previous state.

Check demo here

Top comments (6)

Renato Gama • Jun 9 • Edited

Thanks! It would be nice to get a TypeScript version. When I simply add T as the generic parameter the return type becomes T | Dispatch<SetStateAction<T>> which doesn't work seamlessly. Here is what I have done;

import { useEffect, useRef, useState } from 'react'

export function useStatePrevious<T>(initalState: T) {
  const [state, setState] = useState<T>(initalState)
  const previous = useRef<T>(initalState)

  useEffect(() => {
    previous.current = state
  }, [state])

  return [state, setState, previous.current]
}

My real use case example;

Dusan Petkovic • Dec 28 '23

OK thanks, I get it now, the reference is actually always the same value as the state, its just because setting the ref doesn't cause a re-render so its showing the old value always, not actually holding the previous value.