Почему React-приложение “лагает” при вводе в инпут - и как починить за 3 минуты

Сегодня покажу классическую ситуацию: у тебя есть форма/поиск, ты печатаешь и интерфейс начинает подтормаживать. Чаще всего причина одна: на каждый onChange ты триггеришь тяжёлый ререндер (фильтрация, сортировка, построение списков, пересчёт графиков, сложные компоненты).

Быстрая диагностика

1. Открой React DevTools → Profiler
2. Запиши ввод в поле
3. Посмотри, кто ререндерится и сколько времени занимает

Три быстрых фикса (по популярности)

1) useDeferredValue для “тяжёлого” поиска

• Инпут обновляется мгновенно
• Тяжёлая часть догоняет “в фоне”

Идея: рендер списка завязываем не на query, а на deferredQuery.

2) useMemo для вычислений
Если делаешь filter/sort/map по большому массиву - мемоизируй результат по зависимостям.

3) Разделяй состояние
Частая ошибка: держать “всё” в одном компоненте.
Инпут сверху - список снизу. Если список тяжёлый, вынеси его в отдельный компонент + memo.

Мини-чеклист

• Есть ли тяжёлые вычисления в рендере?
• Ререндерится ли список при каждом вводе?
• Можно ли “отложить” вычисление (deferred)?
• Можно ли кешировать (memo)?
• Можно ли изолировать компонент?

✍️ @React_lib