> Как отобразить одновременно предыдущее и текущее значение пропса в React компоненте? (React)

Для отображения предыдущего значения пропса в React-компоненте можно использовать хук useRef в сочетании с useEffect. Вот пример:

JSX
import React, { useRef, useEffect } from 'react';

function MyComponent({ value }) {
  const prevValueRef = useRef();

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

  const prevValue = prevValueRef.current;

  return (
    <div>
      <p>Текущее значение: {value}</p>
      <p>Предыдущее значение: {prevValue !== undefined ? prevValue : 'нет предыдущего'}</p>
    </div>
  );
}

Как это работает:

• useRef создает объект, который сохраняет значение между рендерами без вызова перерендера.
• useEffect с зависимостью [value] обновляет prevValueRef.current после каждого рендера, когда value меняется.
• В момент рендера prevValueRef.current содержит предыдущее значение, так как useEffect выполняется после рендера.

Альтернативный вариант с кастомным хуком для переиспользования:

JSX
function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

// Использование:
function MyComponent({ value }) {
  const prevValue = usePrevious(value);
  // ...
}

Этот подход гарантирует, что предыдущее значение будет доступно сразу после первого рендера (как undefined), а затем будет корректно обновляться.