Gancho de useStatereacción

El React useStateHook nos permite rastrear el estado en un componente de función.

El estado generalmente se refiere a datos o propiedades que deben rastrearse en una aplicación.

ImportaruseState

Para usar el useStategancho, primero debemos importingresarlo en nuestro componente.

import { useState } from "react";

Tenga en cuenta que estamos desestructurando useStatedesde reactque se trata de una exportación con nombre.

Inicializar useState

Inicializamos nuestro estado llamando useStatea nuestro componente de función.

useState acepta un estado inicial y devuelve dos valores:

• El estado actual.
• Una función que actualiza el estado.

import { useState } from "react";

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

Tenga en cuenta que nuevamente, estamos desestructurando los valores devueltos de useState.

El primer valor, color, es nuestro estado actual.

El segundo valor, setColor, es la función que se utiliza para actualizar nuestro estado.

Por último, establecemos el estado inicial en una cadena vacía: useState("")

Estado de lectura

Ahora podemos incluir nuestro estado en cualquier parte de nuestro 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'));

Estado de actualización

Para actualizar nuestro estado, usamos nuestra función de actualización 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'));

¿Qué puede retener el estado?

¡ El useStategancho se puede usar para realizar un seguimiento de cadenas, números, booleanos, matrices, objetos y cualquier combinación de estos!

Podríamos crear Hooks de múltiples estados para rastrear valores individuales.

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'));

¡O simplemente podemos usar un estado e incluir un objeto en su lugar!

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'));

Actualización de objetos y matrices en estado

Cuando se actualiza el estado, se sobrescribe todo el estado.

¿Y si solo queremos actualizar el color de nuestro coche?

Si solo llamáramos setCar({color: "blue"}), esto eliminaría la marca, el modelo y el año de nuestro estado.

Podemos usar el operador de propagación de JavaScript para ayudarnos.

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'));

Debido a que necesitamos el valor actual de estado, pasamos una función a nuestra setCarfunción. Esta función recibe el valor anterior.

Luego devolvemos un objeto, extendiendo previousStatey sobrescribiendo solo el color.

import { useState } from "react";

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