how can useRef be used for storing previous state - reactjs

Question

function Counter() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();
useEffect(() => {
prevCountRef.current = count; });
const prevCount = prevCountRef.current;
return <h1>Now: {count}, before: {prevCount}</h1>;
}
In the above snippet from the React Hoks FAQS useRef is used for saving the count. However whenever render is called, will not the prevCount be set to the current count as the useEffect will be called on each render, so how are count and prevCount different ?

Answer 1

That's because the useEffect callback function will be called after the rendering time of Counter Component has finished. and that's why prevCount is always one tick behind.
one point to consider is the change in in a React ref won't cause a rerender in React Component only change in state and props will cause a rerender.
see the working example here: https://codesandbox.io/s/lucid-butterfly-y66tc?file=/src/App.js
export default function Counter() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();
useEffect(() => {
prevCountRef.current = count;
console.log('me socond')
});
console.log('me first')
const prevCount = prevCountRef.current;
return (
<h1>
Now: {count}, before: {prevCount}
<div onClick={() => setCount((v) => v + 1)}>click me</div>
</h1>
);
}
you see me first then me second in the console