Как взаимодействовать с жизненным циклом компонента?

Взаимодействие с жизненным циклом зависит от типа компонента: в функциональных — через хуки (основной способ сегодня), в классовых — через методы.

Функциональные компоненты: useEffect и друзья

const ChatRoom = ({ roomId }) => {
  useEffect(() => {
    const conn = connect(roomId); // выполняется при монтировании
                                  // и при каждой смене roomId
    return () => conn.close();    // очистка перед перезапуском
                                  // и при размонтировании
  }, [roomId]);
};

• Монтирование: useEffect(fn, []).
• Обновление по данным: useEffect(fn, [deps]).
• Размонтирование: cleanup-функция эффекта.
• До отрисовки кадра (измерить/поправить DOM): useLayoutEffect.
• Инициализация значения один раз: ленивый useState(() => ...) или useRef.

Классовые компоненты: методы

class ChatRoom extends React.Component {
  componentDidMount() { this.conn = connect(this.props.roomId); }

  componentDidUpdate(prevProps) {
    if (prevProps.roomId !== this.props.roomId) {
      this.conn.close();
      this.conn = connect(this.props.roomId);
    }
  }

  componentWillUnmount() { this.conn.close(); }
}

Заметно, как логика одного ресурса размазана по трём методам — хуки собирают её в один эффект.

Правильная ментальная модель

С хуками лучше думать не «этапами жизни», а синхронизацией с внешней системой: эффект описывает «пока компонент показывает roomId, держи соединение с этой комнатой», а React сам решает, когда подключать/переподключать/отключать.

Коротко для собеседования

В функциональных компонентах жизненный цикл выражается useEffect: [] — монтирование, [deps] — реакция на изменения, cleanup — размонтирование; useLayoutEffect — для работы с DOM до отрисовки. В классах — componentDidMount/DidUpdate/WillUnmount. Хуки группируют логику по ресурсу, а не по этапу жизни.