Как найти и убрать лишние рендеры

Сначала воспроизвожу и меряю, а не угадываю. Открываю Profiler в React DevTools, записываю ввод нескольких символов и смотрю, какие компоненты рендерились, сколько это заняло и что стало причиной. Финальный замер делаю на продакшен-сборке, dev заметно медленнее. Часто оказывается, что state поля живёт слишком высоко, и каждый символ рендерит всю страницу. Тогда опускаю state в отдельный компонент или выношу тяжёлые части в children. Если поддерево всё равно рендерится без нужды, оборачиваю его в memo и стабилизирую props через useCallback и useMemo. Проверяю контекст: если value создаётся заново на каждом рендере, все потребители рендерятся. Для длинных списков ставлю виртуализацию, а для тяжёлой фильтрации по вводу использую useDeferredValue, чтобы поле отвечало сразу. Если в проекте есть React Compiler, ручная мемоизация в основном не нужна, остаются структура и списки.