Reatividade de States no React

Vamos agora ver como a reatividade funciona. Ela faz com que, ao alterar um state, as mudanças sejam instantaneamente refletidas na tela.

Vamos ver um exemplo. Suponha que temos um state com o nome de um produto:

jsxconst [name, setName] = useState('prod');

Vamos exibir o nome do produto no JSX:

jsxreturn <div>
  <span>{name}</span>
</div>;

Agora vamos criar um botão que, ao ser clicado, alterará nosso state:

jsxreturn <div>
  <span>{name}</span>
  <button onClick={clickHandler}>btn</button>
</div>;

No manipulador de clique, usamos a função setName para definir um novo nome para o produto:

jsxfunction clickHandler() {
  setName('xxxx');
}

Vamos juntar todo o nosso código. O resultado será que após clicar no botão, o texto mudará instantaneamente para o novo valor:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  function clickHandler() {
    setName('xxxx');
  }
  
  return <div>
    <span>{name}</span>
    <button onClick={clickHandler}>btn</button>
  </div>;
}

O uso de funções manipuladoras separadas não é obrigatório. Você pode usar uma função anônima de seta:

jsxfunction App() {
  const [name, setName] = useState('prod');
  
  return <div>
    <span>{name}</span>
    <button onClick={() => setName('xxxx')}>btn</button>
  </div>;
}