React how to keep track of the previous state

Question

So I want to know the previous state to know if I want to update a value.

I set up a tiny code example and I don't get it.

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

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

function Counter() {
  const [count, setCount] = useState(0);
  //the useRef Hook allows you to persist data between renders
  const prevCountRef = useRef();
  useEffect(() => {
    //assign the ref's current value to the count Hook
    prevCountRef.current = count;
  }, [count]); //run this code when the value of count changes
  return (
    <h1>
      Now: {count}, before: {prevCountRef.current}
      {/*Increment  */}
      <button onClick={() => setCount((count) => count + 1)}>Increment</button>
    </h1>
  );
}

Working Sandbox

What I don't get is why is prevCountRef is not the same after the setCount is set. In the useEffect I'm always saying both are equal.

Answer 1

Whenever you update the count state, the component re-renders, which causes the useEffect to be called, and update the prevCountRef to the current count value.

Remove the useEffect block, and save the current count to the ref before updating the state:

const prevCountRef = useRef(0); // initialize the prev value

<button onClick={() => setCount((count) => { 
  prevCountRef.current = count; // update the prev value
  return count + 1;
})}>Increment</button>