Перейти на PRO

Есть ли стадии жизненного цикла в функциональном компоненте

Тип вопроса: React Вероятность: 10% Категория: Frontend Разработчик

Ответ

В функциональных компонентах нет классических методов жизненного цикла как в классовых, но их можно имитировать с помощью хуков:

  1. useEffect заменяет componentDidMount, componentDidUpdate и componentWillUnmount:
useEffect(() => {
  // Аналог componentDidMount
  console.log('Компонент смонтирован');

  return () => {
    // Аналог componentWillUnmount
    console.log('Компонент будет размонтирован');
  };
}, []); // Пустой массив зависимостей = только при монтировании

  1. useLayoutEffect - аналогичен useEffect, но выполняется синхронно после рендера, до отрисовки в браузере.

  2. useMemo и useCallback помогают оптимизировать ререндеры, аналогично shouldComponentUpdate.

Основные фазы:

  • Монтирование (первый рендер)
  • Обновление (ререндеры)
  • Размонтирование (удаление из DOM)

Ответ 18+ 🔞

А, ну вот, смотри, опять эти функциональные компоненты! Все такие модные, на классах плюют, а потом — ой, а где мой componentDidMount, сука? Где я буду асинхронные запросы делать, блядь?

Так вот, слушай сюда, умник. В этих ваших функциональных штуках нету этих твоих старых дедовских методов. Всё, приехали. Но наши братаны-разработчики не лыком шиты, придумали хуки, ёпта! И главный тут — useEffect, он как швейцарский нож, блядь, на все случаи жизни.

Вот смотри, если тебе надо сделать что-то один раз, когда компонент только влез в DOM (это и есть componentDidMount), то ты делаешь так:

useEffect(() => {
  // Аналог componentDidMount
  console.log('Компонент смонтирован, ура, товарищи!');

  return () => {
    // А вот это вызовется, когда компонент будут выпиливать
    // Аналог componentWillUnmount
    console.log('Всё, пиздец, меня удаляют...');
  };
}, []); // Видишь пустой массив? Это магический пендель, который говорит: "Работай один раз, сука!"

А если ты хочешь, чтобы твой эффект бегал как угорелый после КАЖДОГО рендера (типа componentDidUpdate), то просто не ставь массив зависимостей вообще. Но будь осторожен, а то зациклишься и накроется всё медным тазом.

Ещё есть useLayoutEffect — зверь похожий, но он работает СИНХРОННО, сразу после того как React всё отрендерит, но до того как браузер это всё на экран выплюнет. Для всяких измерений DOM-элементов, чтобы не было мерзкого моргания.

Ну и оптимизация, блядь! Все о ней орут. В классах был shouldComponentUpdate, чтобы лишний раз не перерисовываться. А тут — useMemo и useCallback. Первый кеширует вычисленное значение, второй — функцию. Чтоб не создавать новые ссылки на каждый чих, которые потом дочерние компоненты воспринимают как новые пропсы и начинают ререндериться без причины. Просто пиздец, а не жизнь.

Короче, фазы те же самые, сука:

  1. Монтирование — родился, ебать.
  2. Обновление — живёшь, меняешься, страдаешь хуйнёй.
  3. Размонтирование — отправился в утиль, в рот меня чих-пых.

Вот и вся философия. Не так страшен чёрт, как его малюют. Главное — не путай пустой массив зависимостей и его отсутствие, а то волнение ебать будет.

© ХакСобесов, 2026
support@hacksobesov.com