Skip to main content

useState

O hook useState é um dos hooks mais utilizados no dia-a-dia. Ele é o responsável por amazenar um determinado estado em uma "variável" fazendo uso de uma função.

Exemplo:

Live Editor
function NoOneComponent() {
  const [belt, setBelt] = useState('black');
  const [age, setAge] = useState(33);
  const [cartShop, setCartShop] = useState('item-00');

  function addToCartShop() {
    setCartShop(prev => prev + ' item-01');
  }

  return (
    <div>
      Belt color: <strong>{belt}</strong> - Age: <i>{age}</i>
      <br />
      <h3>{cartShop}</h3>
      <button onClick={addToCartShop}>Add to cart</button>
    </div>
  );
}
Result
Loading...

Dessa forma posso utilizar a variável belt para armazenar os valores que desejo, podem ser strings, objetos, arrays, funções, boolean, null, undefined, qualquer tipo de valor que eu possa atribuir a uma variãvel JavaScript.

A forma de atualizar a variável belt não é através de uma atribuilção normal, como belt = "blue", mas através uma chamada de função, neste caso utilizando o método setBelt.

O prefixo set é somente uma convenção, é uma forma de visualmente sabermos que é para setar (atribuir) um valor à variável de nome posterior, no caso belt. Posso usar outra forma? Sim, funciona. Mas é importante não fugir deste modelo porque qualquer projeto que você encontre que utilize um hook useState que pregue esse formato vai ser fácil de trabalhar e entender. Outros modelos podem causar confusão.

Sendo assim, o hook useState possui a seguinte formação:

const [var, fun] = useState(initialValue)

É importante ressaltar que o initialValue não é obrigatório e caso não seja informato ele é iniciado como undefined. Declarar um formato inicial ou não vai de acordo com a necessidade.

Importante, caso a página possua vários useState disparando renders encadeadamente é altamente recomendado utilizar outra abordagem para controlar o estado. Uma das alternativas é o uso do hook useReducer

tip

Conheça mais sobre os hooks em:

Referências:​