Как использовать useState в React: примеры и объяснения

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

Использование useState осуществляется с помощью вызова этой функции внутри функционального компонента и передачи начального состояния в качестве аргумента. Далее useState возвращает массив из двух элементов: первый элемент - текущее состояние, второй элемент - функция, которая позволяет изменить состояние.

Пример кода:

js
import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
  }
  return (
    

      
Count: {count}
      
        Increment
      
    
  );
}
export default Counter;

В данном примере компонент Counter имеет состояние count, которое инициализируется значением 0 при первом рендере. В функции handleClick происходит изменение состояния путем вызова функции setCount с новым значением.

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