import { useState } from "react";

Условие

import { useState } from "react";

const usePreviousValue = (value: number) => {};

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

const previous = usePreviousValue(count);

return ( <div className="App"> Current Value: {count} Previous: {previous ?? "-"} <button onClick={() => setCount((prev) => prev + 1)}>Click ); }

Ответ

Хук usePreviousValue нужен для сохранения предыдущего значения переменной value между рендерами в React. Его можно реализовать с помощью 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>Current Value: {count}</h1>
      <h2>Previous: {previous ?? "-"}</h2>
      <button onClick={() => setCount((prev) => prev + 1)}>Click</button>
    </div>
  );
}

Здесь useRef хранит значение между рендерами, а в useEffect обновляется после каждого изменения value. Таким образом, при следующем рендере можно получить предыдущее значение.