Как создать свой кастомный хук usePrevious для хранения предыдущего значения пропсов ил... — 21 мая 2026 г. в 04:58:55.742

Как создать свой кастомный хук usePrevious для хранения предыдущего значения пропсов или стейта в компонентах React. В реальных приложениях иногда нужно сравнивать текущее и предыдущее состояние — например, чтобы анимировать изменения или вызывать сайд-эффекты только при росте/падении значения. Сегодня покажу, как легко вынести логику в переиспользуемый хук. import { useRef, useEffect } from 'react'; /** * Хук usePrevious сохраняет предыдущее значение value. * @param {T} value — текущее значение (пропс или стейт) * @returns {T | undefined} — предыдущий value (или undefined при первом рендере) */ function usePrevious(value) { const ref = useRef(); useEffect(() => { ref.current = value; }, [value]); return ref.current; } // Пример использования: import React, { useState } from 'react'; export default function PriceTracker() { const [price, setPrice] = useState(100); const prevPrice = usePrevious(price); const getTrend = () => { if (prevPrice === undefined) return '—'; return price > prevPrice ? '📈' : price < prevPrice ? '📉' : '➖'; }; return ( <div> <h2>Цена: {price} {getTrend()}</h2> <button onClick={() => setPrice(p => p + 5)}>↑ Увеличить</button> <button onClick={() => setPrice(p => p - 5)}>↓ Уменьшить</button> </div> ); } Почему это круто: * ✅ Логика хранения предыдущих значений вынесена в один хук — нет дублирования кода. * ✅ usePrevious работает и для пропсов, и для стейта. * ✅ Помогает сравнивать и реагировать на изменения (анимации, уведомления, условные запросы). Попробуйте интегрировать usePrevious в свои компоненты, где нужно отслеживать изменение данных во времени. Поделитесь в комментариях, в каких кейсах вы уже использовали или планируете применить такой хук! ✍️ @React_lib