Чому хуки замінили класові компоненти?

ReactJunior~1 хв читання

1. Хуки простіші, ніж класи

Проблема з класами:

Потрібно розуміти, як працює this.
Часто доводиться робити прив'язку методів вручну:

javascript
this.handleClick = this.handleClick.bind(this);
Помилки на кшталт Cannot read property 'setState' of undefined - часте явище.

З хуками:

Жодного this немає.
Усе - звичайні функції:

javascript
const [count, setCount] = useState(0);

2. Хуки роблять код чистішим і логічнішим

Проблема в класах:

Логіка, пов'язана з однією задачею (наприклад, робота з API), розкидана по різних методах життєвого циклу:

javascript

componentDidMount() { subscribe(); }
componentDidUpdate() { checkUpdate(); }
componentWillUnmount() { unsubscribe(); }

З хуками:

Усе в одному місці:

javascript

useEffect(() => {
  subscribe();
  return () => unsubscribe();
}, []);

Код стає компактнішим і логічно згрупованим.

3. Хуки дозволяють перевикористовувати логіку

Проблема класів:

Щоб перевикористати логіку між компонентами, доводилося використовувати:

HOC (Higher-Order Components) - вкладеність "пекельних" обгорток,
або Render Props - складні структури JSX.

З хуками:

Можна просто винести повторювану логіку в кастомний хук:

javascript

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() =>
    JSON.parse(localStorage.getItem(key)) ?? initialValue
  );

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [value]);

  return [value, setValue];
}

Використовується як звичайний хук:

javascript

const [theme, setTheme] = useLocalStorage('theme', 'light');

4. Хуки краще працюють із сучасними технологіями

React-хуки чудово поєднуються з TypeScript, Suspense, Concurrent Rendering, Server Components.
Класи погано інтегруються з новими можливостями React 18+.
Хуки дозволяють гнучко керувати станом і продуктивністю (useMemo, useCallback, useTransition).

5. Класи складніше оптимізувати і тестувати

Не завжди очевидно, коли викликаються методи життєвого циклу.
Тестувати класовий компонент важче: доводиться мокати екземпляр.
Функціональні компоненти з хуками - просто чисті функції, їх легко тестувати.

Підсумок: чому React перейшов на хуки

Проблема класів	Рішення з хуками
`this` і bind	Немає `this`, чисті функції
Розрізнена логіка життєвого циклу	useEffect об'єднує всю пов'язану логіку
Складна перевикористовність логіки	Кастомні хуки
Погана оптимізація і тестування	Чисті функції, краща передбачуваність
Погана сумісність із новими фічами React	Повна сумісність із сучасним API

Висновок: Хуки зробили React більш декларативним, функціональним і модульним. Тому сьогодні хуки - стандарт, а класи лишилися тільки для підтримки старих проєктів.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.