Які ви знаєте методи життєвого циклу компонента?

Повне пояснення

Що це і навіщо

React‑компонент – це функція або клас, що рендерить UI. Життєвий цикл визначає, коли компонент створюється, оновлюється і видаляється, що критично для управління ресурсами, підписками та побічними ефектами.

Ключові принципи/терміни

• Mounting – створення і вставка у DOM.
• Updating – реакція на зміни пропсів/стану.
• Unmounting – видалення з DOM і очищення ресурсів.

Як це працює (класові компоненти)

Як це працює (функціональні компоненти)

• useEffect – виконується після рендеру; залежності визначають, коли повторювати.
• useLayoutEffect – синхронний після DOM‑модифікацій.
• Cleanup – функція, що повертається useEffect, виконується перед наступним викликом або при unmount.

Практика і реалізація

function Counter() {
  const [count, setCount] = useState(0);

  // Mounting & Updating
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  // Unmounting
  useEffect(() => {
    return () => console.log('Component unmounted');
  }, []);

  return <button onClick={() => setCount(c => c + 1)}>Increment</button>;
}

Тестування

• Jest + React Testing Library: мокати useEffect через jest.spyOn(React, 'useEffect').
• Vitest: використовувати vi.fn() для перевірки cleanup‑функцій.

Оптимізація

• Використовувати React.memo для запобігання зайвим оновленням.
• Залежності у useEffect повинні бути точними, щоб уникнути нескінченних циклів.

Часті помилки

1. Забути повернути cleanup‑функцію → ресурси не очищуються.
2. Неправильні залежності → ефект виконується занадто часто або не виконується.
3. Виклик setState у конструкторі класу → викликає помилку.
4. Використання componentWillMount/componentWillReceiveProps → deprecated.
5. Неочікувані побічні ефекти у useLayoutEffect → блокують UI.
6. Зміна стану в componentDidUpdate без перевірки умов → нескінченний цикл.
7. Неочікуваний рендер через shouldComponentUpdate → пропущені оновлення.
8. Відсутність cleanup‑у у useEffect → memory leaks при підписках.

Cheatsheet

• Mounting: constructor → render → componentDidMount / useEffect(() => {}, [])
• Updating: shouldComponentUpdate → render → componentDidUpdate / useEffect(() => {}, [deps])
• Unmounting: componentWillUnmount / cleanup function