Чи ознайомлені з хуками? У чому їхні переваги? Чи доводилося робити свої і з якою метою?

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

Що це і навіщо

• Хуки – API React (наприклад, useState, useEffect, useContext), що дозволяють керувати станом і життєвим циклом без класів.
• Переваги:
  • Чистіший синтаксис, менше boilerplate.
  • Легко розділяти логіку на переюжувані функції (custom hooks).
  • Підтримка тестування через ізольовані функції.

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

• Хук повинен називатися з префіксом use.
• Викликати хуки лише на верхньому рівні компонента або іншого хука.
• useEffect приймає функцію, що виконується після рендеру; залежності в масиві визначають коли оновлювати.

Як це працює

• React тримає стек хуків для кожного компонента. При рендері викликаються функції у тому ж порядку, що і при попередньому рендері.
• useState повертає пару [value, setValue]; React зберігає value між рендерами.
• useEffect виконується після оновлення DOM; cleanup‑функція повертається, якщо потрібно очистити.

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

const useFetch = (url: string) => {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url).then(r => r.json()).then(setData).finally(()=>setLoading(false));
  }, [url]);

  return { data, loading };
};

Тестування

• Для хуків використовують @testing-library/react-hooks або React Testing Library.

import { renderHook } from '@testing-library/react-hooks';
const { result } = renderHook(() => useFetch('/api'));
expect(result.current.loading).toBe(true);

Особливості в контексті React

• Хуки замінюють класові методи componentDidMount, componentDidUpdate, componentWillUnmount.
• Custom hooks дозволяють об’єднувати логіку (наприклад, useAuth, usePagination) і повторно використовувати її в різних компонентах.

Оптимізація та типові помилки

• Не додавайте зайві залежності в useEffect, інакше буде нескінченний цикл.
• Використовуйте useCallback або useMemo, коли функції передаються як пропси.
• Перевіряйте, що useEffect не виконує асинхронні запити без cleanup‑у (наприклад, при unmount).

Часті питання після співбесіди

1. Як працює useReducer і коли його краще використовувати?
2. Що таке React.memo і як він пов’язаний з хуками?
3. Як обробляти race conditions у useEffect?