Встречается на собеседованиях • сегодня
Как отслеживать лишние перерендеры
Для отслеживания лишних перерендеров в React можно использовать:
-
React DevTools Profiler - вкладка "Profiler" показывает компоненты, которые рендерятся при взаимодействии.
-
Хук
useWhyDidYouUpdate(кастомный хук):
jsx
function useWhyDidYouUpdate(name, props) {
const previousProps = useRef();
useEffect(() => {
if (previousProps.current) {
const changes = {};
Object.keys({...previousProps.current, ...props}).forEach(key => {
if (previousProps.current[key] !== props[key]) {
changes[key] = {
from: previousProps.current[key],
to: props[key]
};
}
});
if (Object.keys(changes).length) {
console.log('[why-did-you-update]', name, changes);
}
}
previousProps.current = props;
});
}-
React.memo - для мемоизации компонентов и предотвращения ненужных рендеров при неизменных пропсах.
-
Консольные логи - добавление
console.logвrenderилиuseEffectбез зависимостей.
Оптимизация через:
- Правильное использование зависимостей хуков
- Мемоизацию через
useMemo/useCallback - Разделение состояния (например, через Context)

Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!
офферы быстрее!
Попробовать бесплатно
Следующий вопрос
Это единственный вопрос по вашему фильтру
как отвечать на вопрос
пример собеседования
фреймворки на собеседовании
типичные вопросы junior
интервью вопросы и ответы