React: Состояние компонента и useState

С помощью хука useState можно создать локальное состояние внутри функционального компонента.

import React from 'react';

// создаем переменную для хранения состояния
// используя деструктуризацию массива
// синтаксис: const [stateVariable] = React.useState(defaultValue);
function App() {
  const [language] = React.useState('javascript');
  return <div>I am learning {language}</div>;
}

Обновление состояния

Разумеется, созданное состояние можно обновить, иначе не имело бы смысла его создавать. Для этого используются функции-сеттеры:

function App() {
  // сеттер идет вторым параметром в деструктурируемом массиве
  // для именования используется префикс set + имя переменной в PascalCase
  const [language, setLanguage] = React.useState("python");

  return (
    <div>
      <button onClick={() => setLanguage("javascript")}>
        Change language to JS
      </button>
      <p>I am now learning {language}</p>
    </div>
  );
}

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

function App() {
  const [language, setLanguage] = React.useState("python");
  const [yearsExperience, setYearsExperience] = React.useState(0);

  return (
    <div>
      <button onClick={() => setLanguage("javascript")}>
        Change language to JS
      </button>
      <input
        type="number"
        value={yearsExperience}
        onChange={event => setYearsExperience(event.target.value)}
      />
      <p>I am now learning {language}</p>
      <p>I have {yearsExperience} years of experience</p>
    </div>
  );
}

В useState в качестве состояния можно передать примитивное значение или даже объект. Если обновление зависит от предыдущего состояния, то в сеттер можно передать не объект, а функцию. Первым параметром она получит текущий state, а вернуть должна новый.

function App() {
  const [developer, setDeveloper] = React.useState({
    language: "",
    yearsExperience: 0,
    isEmployed: false
  });

  function handleToggleEmployment(event) {
    // передаем в сеттер функцию
    // в качестве параметра получаем текущее состояние
    // возвращаем обновленное состояние
    setDeveloper(prevState => {
      return { ...prevState, isEmployed: !prevState.isEmployed };
    });
  }

  return (
    <button onClick={handleToggleEmployment}>Toggle Employment Status</button>
  );
}