Gancho de useStatereação

O React useStateHook nos permite rastrear o estado em um componente de função.

O estado geralmente se refere a dados ou propriedades que precisam ser rastreados em um aplicativo.

Importar useState

Para usar o useStateHook, primeiro precisamos inseri- importlo em nosso componente.

import { useState } from "react";

Observe que estamos desestruturando useState, reactpois é uma exportação nomeada.

Inicializar useState

Inicializamos nosso estado chamando useStateem nosso componente de função.

useState aceita um estado inicial e retorna dois valores:

• O estado atual.
• Uma função que atualiza o estado.

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

Observe que, novamente, estamos desestruturando os valores retornados de useState.

O primeiro valor, color, é o nosso estado atual.

O segundo valor, setColor, é a função que é usada para atualizar nosso estado.

Por fim, definimos o estado inicial como uma string vazia: useState("")

Estado de leitura

Agora podemos incluir nosso estado em qualquer lugar em nosso componente.

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return <h1>My favorite color is {color}!</h1>
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Atualizar estado

Para atualizar nosso estado, usamos nossa função de atualização de estado.

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

O que o Estado pode reter

O useStateHook pode ser usado para rastrear strings, números, booleanos, arrays, objetos e qualquer combinação destes!

Poderíamos criar vários Hooks de estado para rastrear valores individuais.

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Ou podemos usar apenas um estado e incluir um objeto!

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Atualizando objetos e arrays no estado

Quando o estado é atualizado, todo o estado é substituído.

E se quisermos apenas atualizar a cor do nosso carro?

Se apenas chamássemos setCar({color: "blue"}), isso removeria a marca, modelo e ano do nosso estado.

Podemos usar o operador spread JavaScript para nos ajudar.

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Como precisamos do valor atual de state, passamos uma função para nossa setCarfunção. Esta função recebe o valor anterior.

Em seguida, retornamos um objeto, espalhando previousStatee sobrescrevendo apenas a cor.

import { useState } from "react";

function KeepCount() {
  const [, ] = useState(0);
}