Почему React-приложение “лагает” при вводе в инпут - и как починить за 3 минуты Сегодня покажу классическую ситуацию: у тебя есть форма/поиск, ты печатаешь и интерфейс начинает подтормаживать. Чаще всего причина одна: на каждый onChange ты триггеришь тяжёлый ререндер (фильтрация, сортировка, построение списков, пересчёт графиков, сложные компоненты). Быстрая диагностика 1. Открой React DevTools → Profiler 2. Запиши ввод в поле 3. Посмотри, кто ререндерится и сколько времени занимает Три быстрых фикса (по популярности) 1) useDeferredValue для “тяжёлого” поиска • Инпут обновляется мгновенно • Тяжёлая часть догоняет “в фоне” Идея: рендер списка завязываем не на query, а на deferredQuery. 2) useMemo для вычислений Если делаешь filter/sort/map по большому массиву - мемоизируй результат по зависимостям. 3) Разделяй состояние Частая ошибка: держать “всё” в одном компоненте. Инпут сверху - список снизу. Если список тяжёлый, вынеси его в отдельный компонент + memo. Мини-чеклист • Есть ли тяжёлые вычисления в рендере? • Ререндерится ли список при каждом вводе? • Можно ли “отложить” вычисление (deferred)? • Можно ли кешировать (memo)? • Можно ли изолировать компонент? ✍️ @React_lib