React Хуки

Хуки — это функции, позволяющие компонентам React получать доступ к состоянию и другим возможностям React без использования классов.

Они предоставляют более прямое API к концепциям React, таким как пропсы, состояние, контекст, ссылки и жизненный цикл.

Что такое хук?

Хуки — это функции, которые позволяют "подцепляться" к состоянию и особенностям жизненного цикла React из функциональных компонентов.

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function FavoriteColor() {
  const [color, setColor] = useState("red"); // используем хук useState

  return (
    <>
      <h1>Мой любимый цвет — {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Синий</button>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Красный</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Розовый</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Зелёный</button>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <FavoriteColor />
);

Вы должны импортировать хуки из модуля react при помощи инструкции import.

Здесь мы используем хук useState, чтобы сохранять состояние приложения.

Термином "состояние" обычно называют данные или свойства приложения, которые необходимо отслеживать.

Правила использования хуков

Есть три правила для хуков:

1. Хуки можно вызывать только внутри функциональных компонентов React.
2. Хуки можно вызывать только на верхнем уровне компонента.
3. Нельзя условным образом вызывать хуки.

Пользовательские хуки

Если у вас есть логика, связанная с состоянием, которую нужно повторно использовать в нескольких компонентах, вы можете создать собственный пользовательский хук.

Мы обсудим это подробнее в разделе "Пользовательские хуки".