usePrevious — предыдущее значение

Задача

Написать хук usePrevious(value), который возвращает значение с предыдущего рендера. На первом рендере — undefined.

Пример

function Counter({ count }) {
    const prev = usePrevious(count);
    return (
        <p>
            Now: {count}, before: {prev ?? '—'}
        </p>
    );
}
// count: 0 → before: —
// count: 1 → before: 0
// count: 2 → before: 1

Решение

Оптимальное решение

function usePrevious(value) {
    const ref = useRef(undefined);
 
    // эффект выполняется ПОСЛЕ рендера и коммита,
    // поэтому во время рендера ref.current ещё хранит прошлое значение
    useEffect(() => {
        ref.current = value;
    }, [value]);
 
    return ref.current;
}

Почему через useRef, а не useState

• useRef хранит значение между рендерами, но его изменение не вызывает ререндер — именно то, что нужно.
• Порядок важен: во время рендера мы возвращаем ref.current (старое значение), а useEffect обновляет его уже после коммита. Поэтому на следующем рендере вернётся значение предыдущего.
• Если обновлять ref прямо в теле компонента, вы затрёте прошлое значение до того, как успеете его вернуть.

См. также

• use-fetch
• fix-broken-list