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

В JavaScript-библиотеке React хук 'useState' используется для управления состоянием в функциональных компонентах. До появления хуков, состояние в React можно было управлять только в классовых компонентах, что затрудняло разработку и портативность кода.

В основе работы хука 'useState' лежит функция, которую он возвращает. Эта функция получает один аргумент — новое значение состояния, и возвращает новую версию состояния, которая заменяет старую.

import React, { useState } from 'react';

function Example() {
  // Объявление переменной состояния, которую мы назовём "count"
  const [count, setCount] = useState(0);

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

В этом примере useState объявляет новую переменную состояния count и функцию, позволяющую обновлять это состояние (setCount). Прежде всего, мы передаем начальное значение в useState, в данном случае 0. Затем, при клике на кнопку, вызывается функция setCount, увеличивающая значение count на один.

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

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