El Hook de useState


*

">

Qué es un Hook? useState?


Cuando usar un hook?

Para empezar necesitamos saber que es un Hook:
Podria considerarse que es algo relativamente nuevo y la misma web oficial lo explica asi: "Un Hook es una función especial que permite “conectarse” a características de React."
Podemos usarlo cuando necesitamos añadir un estado a nuestro componente sin la necesidad de llamar a una clase

En este ejemplo usamos el hook de useState y sera expicado mas adelante 

import React from 'react';

const Contador = ({ value }) => {
  const [numeracion, setNumeracion] = useState(0);
  const handleAdd = () => {
    setNumeracion(numeracion + 1);
    // setNumeracion((c)=> c + 1); Tambien valido para la linea anterior
  };

  return (
    <>
      <h2>{numeracion}</h2>
      <button onClick={handleAdd}>Boton que suma +1</button>
    </>
  );
};
Contador.propTypes = {
  value: PropTypes.number.isRequired,
};

export default Contador;

Las 2 reglas de los Hooks
Regla 1. No llames Hooks dentro de ciclos, condicionales o funciones anidadas
Regla 2.- Llama Hooks solo en funciones de React

">

Como usar useState en React?


useState para que sirve?

El useState es un hook que nos devuelve un array [valor, cambiador] y un "valor default"

Por lo general en este hook se asignan asi las constantes [valor,setValor] y pueden ser los nombres que querramos pero se usa este modelo para leer mas facil el codigo
Gracias a la desestructuración de arrays de JavaScript usamos los corchetes para no escribir tanto codigo

El primer elemento es el estado inicial y el segundo es una función que se utiliza para actualizar el estado inicial a su vez el valor devuelto por la función se utilizará como estado inicial.

En este ejemplo se usa 3 veces useState para modificar un contador que empezamos con 50 

import React from "react";

const Contador = ({ value = 50 }) => {
  const [cantidad, setCantidad] = useState(value);

  const handleAdd = () => {
    setCantidad(cantidad + 1);
  };

  const handleSubstract = () => {
    setCantidad(cantidad - 1);
  };

  const handleReset = () => {
    setCantidad(value);
  };

  return (
    <>
      <h1>CounterApp</h1>
      <h2>{cantidad}</h2>

      <button onClick={handleAdd}> Boton que suma +1 </button>
      <button onClick={handleSubstract}> Boton que resta -1 </button>
      <button onClick={handleReset}> Boton de RESET </button>
    </>
  );
};
Contador.propTypes = {
  value: PropTypes.number.isRequired,
};

export default Contador;