Как работает useState в хуках?

useState - это хук, предоставляемый React, который позволяет вам добавлять состояние в функциональные компоненты. Хуки были введены в React версии 16.8 и являются альтернативой использованию классов для работы с состоянием и жизненным циклом компонентов.

Когда вы вызываете хук useState, он возвращает массив из двух элементов. Первый элемент - это текущее состояние, второй элемент - функция, которую можно использовать для обновления состояния.

Например, давайте создадим простой функциональный компонент в React и используем хук useState:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

В этом примере мы создали компонент Counter, который отображает текущее значение "count" и две кнопки, которые добавляют или уменьшают значение "count".

Строка const [count, setCount] = useState(0); объявляет новое состояние "count" с начальным значением 0 и функцию "setCount", которую мы будем использовать для обновления состояния. Здесь мы используем деструктуризацию массива для присваивания первого элемента массива состояния (текущее значение "count") переменной "count" и второго элемента массива (функция "setCount") переменной "setCount".

Функция "setCount" - это функция, которую предоставляет хук useState и которую мы вызываем, чтобы обновить состояние "count". Мы передаем ей новое значение, которое хотим установить для "count". В примере мы используем анонимные стрелочные функции для увеличения и уменьшения значения "count" при нажатии на соответствующие кнопки.

Когда функция "setCount" вызывается, React автоматически обновляет значение состояния "count" и перерисовывает компонент, чтобы отобразить новое значение. Если мы не вызываем функцию "setCount", значение "count" остается неизменным.

Одна из главных причин использования хука useState является его простота и гибкость. Он позволяет добавлять состояние в функциональные компоненты без необходимости конвертировать их в классы. Кроме того, хук useState также позволяет использовать несколько состояний в одном компоненте.