Локальное состояние с useState

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

8 мин · 3 вопросов

Счётчик лайков, текст, набранный в поле поиска, меню, которое открывается и закрывается: все эти значения меняются во время работы приложения. Обычной переменной недостаточно, ведь React не обновляет экран, когда она меняется. Нужно то, что называется состоянием: память, принадлежащая компоненту. Ты создаёшь его с помощью useState - хука, то есть особой функции от React, имя которой начинается с use.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Разберём ключевую строку: const [count, setCount] = useState(0);. useState(0) создаёт состояние с начальным значением 0 и возвращает массив из двух элементов, которые ты забираешь через деструктуризацию: count - это текущее значение, а setCount - функция обновления, единственный разрешённый способ изменить это значение. Здесь onClick вызывает setCount(count + 1) при каждом клике (о событиях подробно поговорим в следующем уроке).

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hello, {name}!</p>
    </div>
  );
}

Когда ты вызываешь setName, React делает две вещи: сохраняет новое значение, а затем заново выполняет функцию твоего компонента, чтобы пересчитать результат. Это называется повторным рендером. Именно поэтому абзац Hello, {name}! обновляется сам с каждой набранной буквой: ты описываешь результат, а React делает остальное.

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Что возвращает вызов useState(0)?
   • Только текущее значение состояния
   • Массив с текущим значением и функцией его обновления
   • Объект, содержащий всё состояние компонента
2. Как правильно увеличить счётчик?
   • count = count + 1
   • useState(count + 1)
   • setCount(count + 1)
3. Что происходит, когда ты вызываешь функцию обновления состояния?
   • React заново выполняет компонент, чтобы обновить отображение
   • Вся страница перезагружается в браузере
   • Ничего, нужно ещё вручную обновить страницу