В чем проблема с рендером приложения при нажатии на кнопку

Что проверяют

Вопрос почти всегда идёт с кодом на экране: компонент, кнопка, и что-то работает не так. Проверяют, умеете ли вы найти причину по коду и инструментам, а не перечислить все возможные проблемы. Следом спрашивают, как бы вы это подтвердили и починили.

Как отвечать

Сначала уточните симптом: интерфейс не обновляется, показывает старое значение, лишний раз перерисовывается или подвисает. Потом идите по частым причинам в React:

• мутация состояния: items.push(x); setItems(items). Ссылка та же, React сравнивает через Object.is и рендер пропускает. Нужна новая ссылка: setItems([...items, x]);
• устаревшее значение: два вызова setCount(count + 1) подряд дают плюс один, а не два. Нужна функция setCount(c => c + 1). Там же ловится замыкание со старым состоянием в setTimeout или в useEffect с неполными зависимостями;
• перезагрузка страницы: кнопка внутри <form> без type="button" отправляет форму, и состояние пропадает вместе со страницей;
• лишние рендеры: состояние поднято слишком высоко, и клик перерисовывает всё дерево, или новые объекты и функции в пропсах каждый раз ломают React.memo;
• подвисание: тяжёлый синхронный расчёт в обработчике держит основной поток, страдает метрика INP. Помогают useTransition, Web Worker, виртуализация длинных списков;
• ключи: key={index} в списке, куда вставляют элементы, путает состояние строк.

Подтверждайте инструментами: React DevTools Profiler с подсветкой обновлений и причиной рендера, вкладка Performance в Chrome для долгих задач.

Где спотыкаются

Сразу обкладывают всё useMemo и useCallback, ничего не измерив. Мемоизация не лечит мутацию и устаревшее состояние, а в проектах с React Compiler большую её часть делает компилятор.

Читают состояние сразу после setState и удивляются старому значению. Новое значение появится только в следующем рендере.

Перечисляют причины общими словами вместо разбора конкретного кода. Интервьюер ждёт, что вы ткнёте в строку, назовёте механизм и предложите исправление.