import { useState } from "react"; const usePreviousValue = (value: number) => {}; export default function App() { const [broj, setBroj] = useState(0); const prethodni = usePreviousValue(broj); return ( <div className="App"> <h1>Trenutna Vrednost: {broj}</h1> <h2>Prethodna: {prethodni ?? "-"}</h2> <button onClick={() => setBroj((prev) => prev + 1)}>Klik</button> </div> ); }

Hook usePreviousValue se koristi za čuvanje prethodne vrednosti promenljive value između renderovanja u React-u. Može se implementirati pomoću useRef:

import { useEffect, useRef } from "react";

const usePreviousValue = (value: number) => {
  const ref = useRef<number | undefined>(undefined);

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
};

export default function App() {
  const [count, setCount] = useState(0);

  const previous = usePreviousValue(count);

  return (
    <div className="App">
      <h1>Trenutna Vrednost: {count}</h1>
      <h2>Prethodna: {previous ?? "-"}</h2>
      <button onClick={() => setCount((prev) => prev + 1)}>Klik</button>
    </div>
  );
}

Ovde, useRef čuva vrednost između renderovanja, a u useEffect se ažurira nakon svake promene value. Na ovaj način, pri sledećem renderovanju, može se dobiti prethodna vrednost.