разница state и setState в useStake хуке

Question

Сейчас нахожусь в процессе изучения и написал следующий код, который озадачил меня:

function App() {


    const [state, setState] = useState("");

  function handleChange(event) {
        setState(event.target.value);
    }


    return <div>
  <select value={setState} onChange={handleChange}>
  <option value="grey">Серый</option>
  <option value="green">Зеленый</option>
  <option value="red">Красный</option>
  <option value="yellow">Желтый</option>
  </select>
  <div className="color-div" style={{backgroundColor: setState}}></div>
           </div>;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Если в коде заменить setState на state, то код все равно работает корректно:

<select value={setState} onChange={handleChange}>
<div className="color-div" style={{backgroundColor: setState}}></div>

Зачем тогда объявлять две переменные в хуке useState?

Answer 1

Формально вы можете изменить стейт напрямую, установив значение state, но в этом случае не произойдет рендера компонента.

setState нужен, чтобы дергать react api, говоря компоненту, что нужно обновиться.

Подробнее в документации.

БЛОГ НА HUSL

разница state и setState в useStake хуке

Ответы (1 шт):