React HooksExplained

24 of 24 rows

Хук↕	Що робить↕	Для чого використовувати↕
Стан
⤢useState	Зберігає одне значення, зміна якого викликає повторний рендер.	Локальний стан компонента: поля форм, перемикачі, лічильники.
⤢useReducer	Зберігає стан, керований reducer-ом дій, — схожий на маленький store.	Стан із кількома пов'язаними полями або складними переходами.
⤢useRef	Зберігає змінне значення, яке НЕ викликає повторного рендера.	Змінні контейнери, таймери та прямий доступ до DOM через .current.
Ефекти
⤢useEffect	Виконує побічний ефект після рендера з необов'язковим очищенням.	Завантаження даних, підписки та синхронізація із зовнішньою системою.
⤢Effect cleanup	Функція, яку повертає ефект, виконується перед наступним ефектом і ще раз під час демонтування.	Закриття підписок і таймерів або переривання виконуваного запиту.
⤢useLayoutEffect	Як useEffect, але спрацьовує синхронно після зміни DOM.	Читання або запис розкладки до фарбування браузером (тости, підказки).
⤢useEffect vs handlers	Обробники подій виконуються у відповідь на дію користувача; ефекти виконуються після рендера для синхронізації.	Логіка, спричинена користувачем, належить обробнику; спричинена рендером — ефекту.
⤢StrictMode	У розробці монтує компоненти двічі, тож ефекти виконуються, очищаються і виконуються знову.	Виявлення подвійних підписок і відсутнього очищення до продакшену.
Продуктивність
⤢useMemo	Кешує обчислене значення, доки не зміняться його залежності.	Уникнення дорогих повторних обчислень між рендерами; змініть значення в залежностях навмисно, щоб скинути кеш.
⤢useCallback	Кешує посилання на функцію, доки не зміняться її залежності.	Стабільні колбеки, що передаються в мемоізовані дочірні компоненти або використовуються як залежності.
⤢React.memo	Пропускає повторний рендер компонента, чий пропи не змінилися.	Важкі дочірні компоненти; коли поверхневої рівності недостатньо, передайте функцію порівняння другим аргументом (це HOC, а не хук).
Контекст та зовнішні дескриптори
⤢useContext	Читає значення контексту без prop drilling.	Тема, локаль або авторизований користувач, спільні для всього дерева.
⤢useImperativeHandle	Налаштовує екземпляр, який батьківський компонент бачить через ref.	Відкриття вузького API з дочірнього компонента через forwardRef.
Конкурентність та інші
⤢useTransition	Позначає оновлення стану як нетермінове, тож інтерфейс залишається чутливим.	Утримання швидкого вводу, поки важкий список рендериться повторно.
⤢useDeferredValue	Відкладає значення, щоб оновлення можна було перервати.	Дебаунс дорогих рендерів без таймерів.
⤢useId	Генерує стабільний унікальний id для атрибутів доступності.	Зв'язування label і input між серверним і клієнтським рендерами.
⤢use()	Читає promise або контекст під час рендера; це єдиний хук, який можна викликати умовно.	Розгортання promise за допомогою Suspense або читання контексту всередині раннього return.
⤢useActionState	Зберігає стан, керований дією форми, і включає прапорець pending.	Надсилання форм, що повертають помилки або оновлений стан для показу в рядку.
⤢useOptimistic	Одразу рендерить оптимістичне значення, а коли дія завершується, повертається до справжнього стану.	Показ лайка або надісланого повідомлення, поки запит до сервера ще виконується.
⤢useFormStatus	Читає стан pending навколишнього <form>, без жодних пропів.	Кнопка надсилання, що вимикає себе, поки батьківська форма надсилається.
⤢useSyncExternalStore	Підписується на store поза React і читає один узгоджений знімок.	Браузерні API на кшталт статусу онлайн або сторонні сховища стану.
⤢useInsertionEffect	Працює перед layout-ефектами; створений для вставлення правил CSS-in-JS.	Бібліотеки стилів, які мають вставити правила до читання розкладки.
⤢useDebugValue	Показує власну мітку для внутрішнього стану хука в React DevTools.	Маркування того, що тримає власний хук, під час налагодження.
⤢Custom hooks (use*)	Ваш власний хук, що компонує вбудовані хуки для спільного використання логіки.	Багаторазова поведінка зі станом на кшталт useFetch або useMediaQuery.