В якому методі життєвого циклу компонента краще робити запити на сервер? Чому?

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

Що це і навіщо

Запити на сервер зазвичай виконуються в useEffect (React hooks) або у методі componentDidMount класових компонентів. Це забезпечує, що запит відбудеться після того, як DOM вже створений.

Ключові принципи

• useEffect виконується після рендеру, тому UI не блокується.
• Залежності ([]) визначають коли повторювати запит.
• Повернення функції очищення (return () => ...) дозволяє відмінити запит при демонтажі.

Як це працює

1. Компонент рендериться.
2. React викликає useEffect після оновлення DOM.
3. В середині useEffect запускається асинхронний запит.
4. Після отримання відповіді оновлюється стан, що викликає повторний рендер.
5. Якщо компонент демонтується до завершення запиту, функція очищення скасовує його.

Практика і реалізація (JS/TS)

import { useEffect, useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const controller = new AbortController();
    fetch('/api/users', { signal: controller.signal })
      .then(r => r.json())
      .then(setUsers)
      .catch(err => {
        if (err.name !== 'AbortError') console.error(err);
      });
    return () => controller.abort(); // очищення
  }, []); // один раз після mount

  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Тестування

• Unit: мокати fetch і перевіряти, що setUsers викликано.
• Integration: використовувати @testing-library/react з jest-fetch-mock.

Безпека і приватність

• Використовувати AbortController для скасування небажаних запитів.
• Перевіряти статус відповіді і обробляти помилки.

Оптимізація

• Кешувати відповіді (наприклад, через React Query).
• Використовувати useMemo/useCallback, щоб уникнути зайвих рендерів.

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

1. Запит у конструкторі класу → блокує UI.
2. Не очищати useEffect → memory leaks.
3. Відсутність залежностей → нескінченний цикл запитів.
4. Не обробляти AbortError → зайві логи.
5. Використання setState після демонтажу → warning.
6. Не перевіряти статус HTTP → неочікувані дані.
7. Занадто часті запити без debounce → навантаження на сервер.
8. Не використовувати async/await у useEffect → складність обробки.

Cheatsheet

• Запит: useEffect(() => { /* fetch */ }, [])
• Скасування: return () => controller.abort();
• Проблема: “setState on unmounted component” → використати AbortController.
• Питання: “Чому не в конструкторі?” – відповідає, що це блокує UI і викликає помилки.