Хук useState

Перший, простий і найважливіший хук. З назви зрозуміло, що він пов'язаний з станом компонента. Саме завдяки йому у функціональних компонентів з'явився внутрішній стан.

import { useState } from "react";

const App = () => {
  const [value, setValue] = useState(0);

  return (
    <div>
      {value}
      <button type="button" onClick={() => setValue(value + 1)}>
        Increment value by 1
      </button>
    </div>
  );
};

Виклик хука useState створює стан і метод, який змінюватиме його значення. У якості параметра хук приймає початковий стан, в нашому випадку число 0. У стані може зберігатися будь-який тип даних.

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

Що ж таке хуки?

Хуки - це просто функції, за допомогою яких можна «підчепитися» до стану та методів життєвого циклу з компонентів-функцій та використовувати React без класів.

Відмінність із класами

Функція оновлення стану схожа з this.setState у класах, але не зшиває новий і старий стан разом у разі якщо у стані зберігається об'єкт. У решті все як зі звичайним станом компонента. Основна відмінність: у класовому компоненті ми можемо створити лише один загальний стан, а у функціональному - скільки завгодно, і вони будуть незалежні один від одного.

// ❌ Погано
const App = () => {
  const [state, setState] = useState({
    username: "",
    todos: [{ text: "Learn hooks" }],
    isModalOpen: false,
  });
};

// ✅ Добре
const App = () => {
  const [username, setUsername] = useState("");
  const [todos, setTodos] = useState([{ text: "Learn hooks" }]);
  const [isModalOpen, setIsModalOpen] = useState(false);
};

Кращі практики

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

Обмеження хуків

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

// ❌ Буде помилка
const App = () => {
  if (isLoggedIn) {
    const [username, setUsername] = useState("");
  }

  // ...
};

// ✅ Так правильно використовувати хуки
const App = () => {
  const [username, setUsername] = useState("");
};