Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Хук useState JS: React Hooks

Хук useState(), отвечает за работу с состоянием внутри компонента. В отличие от классовых компонентов, хук занимается сразу всем: инициализацией, обновлением и предоставляет доступ к состоянию. Пример вызова:

// Не забываем импортировать
import React, { useState } from 'react';

const Example = () => {
  // Имена возвращаемых значений выбираются произвольно
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы нажали {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
};

See the Pen js_react_hooks_use_effect-1 by Hexlet (@hexlet) on CodePen.

useState() принимает на вход начальное состояние и возвращает массив из двух значений: текущего значения состояния и функции, которая обновляет состояние. Кроме того, что такой код выглядит необычно, еще есть вопросы к его работе. Как мы знаем, компонент, как функция, вызывается на каждую перерисовку и логично предположить что значением count всегда будет 0 из-за постоянных вызовов useState(). Как это ни странно, но такого не произойдет. Хуки устроены гораздо хитрее, чем это кажется на первый взгляд. Да, функция useState() действительно вызывается каждый раз при перерисовке, но внутри она знает об этом и учитывает в работе. Начальное состояние задается ровно один раз и дальше не используется. Само состояние хранится где-то внутри и скрыто от прямого изменения. Единственный способ повлиять на него – вызвать вернувшуюся функцию с передачей нового состояния.

Функцию setCount() можно вызывать в любом месте, например в коллбеке, как в примере выше, или в другом компоненте, куда эта функция может быть передана. В этом смысле, все работает так как и в классах.

В отличие от this.setState(), хук useState() не сливает старое состояние с новым:

// Где-то в колбеке
setTodos([{ text: 'Помыть посуду' }]);

// На следующем цикле
// Пропало начальное значение
console.log(todos); // => [{ text: 'Помыть посуду' }]

Хуки могут использоваться больше одного раза если это нужно. Мы легко можем создать несколько переменных состояния:

const ExampleWithManyStates = () => {
  const [age, setAge] = useState(42);
  const [schoolName, setSchoolName] = useState('Хекслет');
  const [todos, setTodos] = useState([{ text: 'Изучить хуки' }]);
  // ...
};

Сколько создавать переменных состояния?

Технически мы можем поместить все в одну переменную, как это делалось в классах, но с хуками в этом нет большой необходимости. Более того, состоянием в рамках одного компонента проще управлять когда оно разделено по частям, которые обновляются совместно. Например:

const [position, setPosition] = useState({ left: 0, top: 0 });
const [size, setSize] = useState({ width: 100, height: 100 });

Дополнительные материалы

  1. Использование хука useState

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

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

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
25 мая 10 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»