Вбудовані хуки React

Хуки стану

Стан дозволяє компоненту "запам'ятовувати" інформацію, таку як введення користувача. Наприклад, компонент форми може використовувати стан для зберігання значення введення, тоді як компонент галереї зображень може використовувати стан для зберігання індексу вибраного зображення.

Щоб додати стан до компонента, скористайтеся одним з цих хуків:

• useState оголошує змінну стану, яку можна оновити безпосередньо.
• useReducer оголошує змінну стану з логікою оновлення всередині функції-редуктора .

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

Контекстні хуки

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

• useContext читає та підписується на контекст.

function Button() {
  const theme = useContext(ThemeContext);
  // ...

Хуки посилань

Посилання дозволяють компоненту зберігати деяку інформацію, яка не використовується для візуалізації, наприклад, вузол DOM або ідентифікатор таймауту. На відміну від стану, оновлення рефа не призводить до перезавантаження компонента. Рефи - це "аварійний люк" в парадигмі React. Вони корисні, коли вам потрібно працювати з системами, відмінними від React, наприклад, з вбудованими API браузерів.

• useRef оголошує посилання. У ньому можна зберігати будь-яке значення, але найчастіше він використовується для зберігання DOM-вузла.
• useImperativeHandle дозволяє вам налаштувати посилання, що виставляється вашим компонентом. Це використовується рідко.

function Form() {
  const inputRef = useRef(null);
  // ...

Хуки ефектів

Ефекти дозволяють компоненту підключатися до зовнішніх систем та синхронізуватися з ними. Це включає роботу з мережею, DOM браузера, анімацією, віджетами, написаними за допомогою іншої бібліотеки інтерфейсу користувача та іншим нереактівським кодом.

• useEffect підключає компонент до зовнішньої системи.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

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

Існує дві рідко використовувані варіації useEffect з різницею у часі:

• useLayoutEffect спрацьовує перед тим, як браузер перефарбує екран. Ви можете виміряти розкладку тут.
• useInsertionEffect спрацьовує до того, як React внесе зміни в DOM. Бібліотеки можуть вставляти сюди динамічний CSS.

Хуки продуктивності

Поширеним способом оптимізації продуктивності повторного рендерингу є пропуск непотрібної роботи. Наприклад, ви можете вказати React повторно використовувати кешовані обчислення або пропустити повторний рендеринг, якщо дані не змінилися з моменту попереднього рендерингу.

Щоб пропустити обчислення та непотрібний повторний рендеринг, використовуйте один з цих хуків:

• useMemo дозволяє кешувати результат дорогих обчислень.
• useCallback дозволяє кешувати визначення функції перед передачею її оптимізованому компоненту.

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

Іноді не можна пропустити повторний рендеринг, оскільки екран дійсно потребує оновлення. У такому разі ви можете покращити продуктивність, відокремивши блокуючі оновлення, які мають бути синхронними (наприклад, введення даних), від неблокуючих, які не потребують блокування користувацького інтерфейсу (наприклад, оновлення діаграми).

Щоб визначити пріоритетність рендерингу, скористайтеся одним із цих хуків:

• useTransition дозволяє позначити перехід стану як неблокуючий і дозволити іншим оновленням переривати його.
• useDeferredValue дозволяє відкласти оновлення некритичної частини інтерфейсу і дати іншим частинам оновитися першими.

Хуки ресурсів

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

Щоб прочитати значення з ресурсу, використовуйте цей хук:

function MessageComponent({ messagePromise }) {
  const message = use(messagePromise);
  const theme = use(ThemeContext);
  // ...
}

Інші хуки

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

• useDebugValue дозволяє налаштувати відображення мітки React DevTools для вашого власного хука.
• useId дозволяє компоненту асоціювати з собою унікальний ID. Зазвичай використовується з API доступності.
• useSyncExternalStore дозволяє компоненту підписатися на зовнішнє сховище.

Власні хуки

Ви також можете визначати власні хуки як функції JavaScript.