Вступ

Раніше компоненти-функції використовувалися тільки для рендеру HTML-розмітки по отриманим пропсам та шаблону. У них не було ні стану, ні методів життєвого циклу. Вони були дуже прості. Часто, у процесі розробки проекту, виникає ситуація, коли компоненту-функції необхідно було додати стан чи методи життєвого циклу. Доводилося переписувати його до компонент-класу, а це займає час, тому що окрім додавання нового функціоналу, розробнику доводилося рефакторити вже написаний код.

Необхідність стандартизувати написання компонентів в одному стилі, а також розширення можливостей повторного використання коду, підштовхнули розробників React до створення хуків. Це розширило можливості компонентів-функцій. Хуки виявилися настільки зручними, що стали основою React-розробки.

Хуки вирішують безліч проблем у React, з якими розробники стикалися з моменту виходу бібліотеки.

• Складність повторного використання логіки із станом між компонентами. Для цього можна створювати власні хуки.
• Використання незручних патернів «рендер-пропс» (render props) та «компонент вищого порядку» (higher order component), які сильно змінюють структуру компонентів і роблять код громіздким.
• Підтримка незв'язаної логіки у методах життєвого циклу та навпаки поділ пов'язаної логіки на кілька методів. Наприклад, підписка на подію в componentDidMount та відписка в componentWillUnmount.
• Неможливість розбити великий компонент на дрібніші через логіку зав'язаної на синтаксис класу.
• Особливості пов'язані з поведінкою ключового слова this при прив'язці контексту та передачі методу класу як пропсу.

Зворотня сумістність

Хуки повністю зворотно сумісні з класами. У більш старих проектах, новий функціонал можна писати на хуках, не змінюючи вже написаний код у класах. Хуки не містять змін, які можуть поламати існуючий код. Хуки не вимагають нових знань про концепції у React. Натомість, хуки надають більш прямий доступ до API вже знайомих понять: пропсів, стану, контексту, рефів, та життєвого циклу.