22.07.2026 06:32
🔥 useDeferredValue: плавный UX без костылей При ререндере сложных компонентов (таблиц, графиков, списков) часто случа
🔥 useDeferredValue: плавный UX без костылей
При ререндере сложных компонентов (таблиц, графиков, списков) часто случаются лаги при вводе.
useDeferredValue из React решает эту проблему ✨
🧠 Как это работает?
Хук откладывает обновление значения до тех пор, пока браузер не "освободится". Ввод остаётся отзывчивым, а тяжёлые компоненты обновляются асинхронно.
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
const filteredData = useMemo(() => {
return heavyList.filter(item => item.includes(deferredQuery));
}, [deferredQuery]);
⚠️ Важно: useDeferredValue не откладывает сет стейт — он откладывает только чтение значения внутри зависимостей.
🚀 Идеально для:
– Автокомплитов
– Фильтрации больших списков
– Любых дорогих вычислений при вводе
📚 Подробнее: https://react.dev/reference/react/useDeferredValue
👉 @frontend_1
При ререндере сложных компонентов (таблиц, графиков, списков) часто случаются лаги при вводе.
useDeferredValue из React решает эту проблему ✨
🧠 Как это работает?
Хук откладывает обновление значения до тех пор, пока браузер не "освободится". Ввод остаётся отзывчивым, а тяжёлые компоненты обновляются асинхронно.
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
const filteredData = useMemo(() => {
return heavyList.filter(item => item.includes(deferredQuery));
}, [deferredQuery]);
⚠️ Важно: useDeferredValue не откладывает сет стейт — он откладывает только чтение значения внутри зависимостей.
🚀 Идеально для:
– Автокомплитов
– Фильтрации больших списков
– Любых дорогих вычислений при вводе
📚 Подробнее: https://react.dev/reference/react/useDeferredValue
👉 @frontend_1