React Хуки

Хуки додано до React у версії 16.8.

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

Що таке хук?

Хуки дозволяють нам "підключатися" до таких функцій React, як методи стану та життєвого циклу.

import React, { useState } from "react";
import ReactDOM from "react-dom/client";

function FavoriteColor() {
const [color, setColor] = useState("red");

return (
<>
  <h1>My favorite color is {color}!</h1>
  <button
    type="button"
    onClick={() => setColor("blue")}
  >Blue</button>
  <button
    type="button"
    onClick={() => setColor("red")}
  >Red</button>
  <button
    type="button"
    onClick={() => setColor("pink")}
  >Pink</button>
  <button
    type="button"
    onClick={() => setColor("green")}
  >Green</button>
</>
);
}

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

Ви повинні import (імпортувати) хуки з react.

Тут ми використовуємо хук useState, щоб відстежувати стан програми.

Стан зазвичай стосується даних або властивостей програми, які потрібно відстежувати.

Правила хуків (підхоплення)

Існує 3 правила для хуків:

• Хуки можна викликати лише всередині компонентів функції React
• Хуки можна викликати лише на верхньому рівні компонента
• Хуки не можуть бути умовними

Користувальницькі хуки

Якщо у вас є логіка стану, яку потрібно повторно використовувати в кількох компонентах, ви можете створити власні користувальницькі хуки.

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