Теория: Хук useState

Вы уже достаточно изучили React и умеете создавать функциональные компоненты. Если бы сейчас вы решили написать простой функциональный компонент с изменяемым состоянием, у вас получилось бы что-то такое:

const Example = () => {
  let count = 0
  const incrementCount = () => {
    count += 1
  }

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

https://codepen.io/hexlet/pen/QWJRgjp

В самом компоненте мы видим созданное состояние let count = 0, а в обработчике клика — уже измененное состояние count += 1. Но есть одна проблема — при нажатии кнопки число не изменится, потому что компонент отрисовывает изначальное состояние 0.

Дело в том, что React не видит изменений переменной count. Он отрисовывает компонент в первый раз, потом вызывает функцию компонента и больше ничего не делает. Нужно заставить React повторно вызывать нашу функцию рендера компонента уже с новым состоянием. В этом нам поможет useState() — самый популярный и простой в понимании хук. Именно его мы изучим в этом уроке.

Хук 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>
  )
}

https://codepen.io/hexlet/pen/WNZvQqW

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

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

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

const [todo, setTodo] = useState({ task: 'Вынести мусор' })

// Где-то в колбеке
setTodo({ result: 'Мусор вынесен' })

// На следующем цикле
// Пропало начальное значение
console.log(todo) // => { result: 'Мусор вынесен' }

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

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 })