⬅ AnteriorMenúSiguiente ➡

Lección 17. Hook useState.

Gracias a la implementación de los hooks, los componentes funcionales pueden tener una lógica de programación.

useState permite hacer uso del estado.

Importar useState._

La manera de importar useState es de la siguiente manera:

Copiar código
import { useState } from "react";

Nota: Utilizando desestructuración en la librería de React.

Utilizar useState._

Para hacer uso de useState:

Copiar código
const [valor, setValor] =useState(0);

Nota: Se utiliza la desestructuración de arreglos.

useState utiliza 2 parametros, el valor (o variable de estado) y la función para actualizarse (utilizada para modificar la variable del estado).

Cada estado (variable) tiene su propia funcion actualizadora.

Por convencion se suele llamar a la funcion actualizado como set(valor o estado).

Ejemplo simple._

Un ejemplo simple de un componente funcional utilizando useState.

Copiar código
import React, {useState} from "react";

export default function Componente() {

  const [valor, setValor] = useState(0);
	
  return(
    <div>
      <span>el valor del componente es {valor}</span>
      <button onClick={() => setValor(valor +1)}>Aumentar valor</button>
    </div>
  )
}

Nota: Este componente tiene un estado llamado valor inicializado en 0, una función actualizadora llamada setValor que al hacer click en el botón, se ejecuta actualizando el estado en +1.

Ejemplo simple._

Copiar código
import React, {useState} from "react";

export default function ContadorHooks() {

  console.log(useState()); //Impresión de visualización de hook useState en consola (tiene 2 parametros, uno primitivo y otro es una funcion)

  //Un estado llamado contador inicializado en 0 y su funcion actualizadora llamada setContador
  const [contador, setContador] = useState(0);

  //Funcion sumar para actualizar contador en +1
  const sumar = () => setContador(contador+1);

  //Funcion restar para actualizar contador en -1
  const restar = () => setContador(contador-1);

  return(
    <>
      <h2>Hooks - Use estate</h2>

      <nav>
        <button onClick={sumar}>+</button>
        <button onClick={restar}>-</button>
      </nav>
			
      <h3>{contador}</h3>
    </>
  )
}

Nota: Este es un contador simple.

También podemos definir las funciones actualizadoras, se recomienda hacerlas en formato de Arrow functions.

useState permite hacer nuestro código mas entendible, menos complejo y mas corto.

⬅ AnteriorMenúSiguiente ➡