🔥 useDeferredValue: плавный UX без костылей

При ререндере сложных компонентов (таблиц, графиков, списков) часто случаются лаги при вводе.
useDeferredValue из React решает эту проблему ✨

🧠 Как это работает?
Хук откладывает обновление значения до тех пор, пока браузер не "освободится". Ввод остаётся отзывчивым, а тяжёлые компоненты обновляются асинхронно.

const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);

const filteredData = useMemo(() => {
  return heavyList.filter(item => item.includes(deferredQuery));
}, [deferredQuery]);

Frontend разработчик

🔥 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

hottg.com/frontend_1/3955

1.6K viewsApr 17 at 11:47