Встречается на собеседованиях • сегодня

Как избежать утечек памяти при размонтировании

При размонтировании компонента важно очистить все подписки, таймеры и обработчики событий, чтобы избежать утечек памяти:

Отписываемся от событий:

jsx

useEffect(() => {
  const handleResize = () => console.log('resize');
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

Очищаем таймеры:

jsx

useEffect(() => {
  const timer = setTimeout(() => {}, 1000);
  return () => clearTimeout(timer);
}, []);

Отменяем запросы:

jsx

useEffect(() => {
  const controller = new AbortController();
  fetch(url, { signal: controller.signal });
  return () => controller.abort();
}, []);

Для классов используйте componentWillUnmount:

jsx

componentWillUnmount() {
  clearInterval(this.interval);
  this.subscription.unsubscribe();
}

Всегда проверяйте, что все созданные ресурсы в useEffect или componentDidMount имеют соответствующую очистку в функции возврата или componentWillUnmount.

Софи собрала все вопросы. Тренируйся и получай
офферы быстрее!

Попробовать бесплатно

Следующий вопрос

Это единственный вопрос по вашему фильтру

как отвечать на вопрос

пример собеседования

фреймворки на собеседовании

типичные вопросы junior

интервью вопросы и ответы