useState: ¿Cómo utilizar el Hook useState en React.js?

¿Qué aprenderé del Hook useState?

• Tipos de declaraciones
• Como crear un Hook de estado por cada parámetro que necesitemos
• useState con JSON
• Manipular una lista

Repositorio

• Puedes descargar el código aquí.
• O clonar el repositorio completo y cambiar a la rama "usestate".

git clone https://github.com/EWebik/react-js.git
git checkout usestate

¿Qué es el Hook useState?

Con useState podemos agregar un state a nuestros componentes funcionales, y así, poder utilizarlos tal y como lo haríamos con un componente de clase. 

¿Por qué utilizar useState?

Al utilizar este Hook de estado podemos ahorrarnos bastante código, pero sobre todo, podemos utilizarlo bajo lógica funcional, la cual, es mucho más fácil de comprender que otras lógicas, como por ejemplo, la programación orientada a objetos.

¿Dónde utilizar useState?

Un Hook de estado solo puede ser utilizado en componentes funcionales, y no funcionará en componentes de clase, ni, en funciones que no sean de React.

• Si tienes dudas sobre los tipos de componentes, puedes visitar mi post de Componentes y propiedades en React.

Declaración de useState

Dado que estamos utilizando JavaScript y EcmaScript 6, podemos utilizar:

• Notación de punto
• O Desestructuración

Cualquiera de las dos notaciones, debemos comprender que useState regresa un arreglo donde:

• La posición cero es el state
• Y la segunda posición es una función que nos permite modificar el valor del state.

Veamos un ejemplo de ambos casos.

Notación de punto

import React from 'react';

//Componente funcional
const Componente = (props)=>{
          //Declaración de punto 
          const state = React.useState();
          //useState regresa un array
          const _state = state[0]; //valor del state
          const setState = state[1]; //función

         return(
              <p>{_state }</p>
         )
}

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

Por Desestructuración

import React, {useState} from 'react';

//Componente funcional
const Componente = (props)=>{
          //Declaración por desestructuración
          const [state, setState] = useState();

         return(
              <p>{state}</p>
         )
}

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

Con la notación por desestructuración eliminamos unas cuantas lineas de código y hacemos que el código se más fácil de leer y entender.

React recomienda un Hook useState por cada parámetro que necesitemos

En la documentación oficial se recomienda que si podemos utilizar múltiples useState, lo hagamos, esto quiere decir que, si en nuestro componente necesitamos manipular varios datos de estado, estos los separemos declarando varios useState, por ejemplo:

import React, {useState} from 'react';

//Componentes funcionales
const Componente = (props)=>{
         //Declarar un Hook por cada variable de estado que necesitemos
         const [enteros, setEnteros] = useState();
         const [texto, setTexto] = useState();
         const [booleanos, setBooleanos] = useState();
        
         return(
              <p>{enteros}</p>
              <p>{texto}</p>
              <p>{booleanos ? "True":"False"}</p>
         )
}

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

Asignación default para useState

Nuestro Hook de estado al ser declarado puede recibir un parámetro como dato de inicialización, el cual puede ser un dato primitivo como, integer, string, booleano o incluso objetos.

Lo importante de esta inicialización es que solo afecta al componente durante el montaje, y no vuelve a inferir en los update. A lo que me refiero es que solo se inicializarán en el momento que se crea el componente y serán omitidos, si hay un updtae ya sea por alguna variable de estado o cambio en las propiedades del componente.

Veamos un ejemplo:

import React, {useState} from 'react';

//Componentes funcionales
const Componente = (props)=>{
         //Declarar un Hook por cada variable de estado que necesitemos
         const [enteros, setEnteros] = useState(0); //Inicialización con un entero
         const [texto, setTexto] = useState("EWebik");  //Inicialización con un string
         const [booleanos, setBooleanos] = useState(true); //Inicialización con un Booleano
         const [_json, setJson] = useState({
                 enteros:0,
                 texto:"EWebik",
                 booleanos:true,
          }); //Inicialización con un objeto JSON
        
         return(
              <p>{enteros}</p>
              <p>{texto}</p>
              <p>{booleanos ? "True":"False"}</p>
              <p>{_json.texto}</p>
         )
}

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

useState con un JSON

Bien, ya hemos visto como declarar nuestro state y como asignar un valor por default, ahora, quizá realmente necesitamos manejar un objeto como un JSON, ya que quizá, es un formulario y tiene un montón de campos, y obvio, es más fácil usar un JSON.

En el siguiente ejemplo, vamos a usar useState con un JSON y modificaremos el state utilizando el operador spread para combinar los datos nuevos con los antiguos.

import React, {useState} from 'react';

//Componentes funcionales
const Componente = (props)=>{

         //Declarar un Hook useState con JSON
         const [_json, setJson] = useState({
                 enteros:0,
                 texto:"EWebik",
                 booleanos:true,
          }); //Inicialización con un objeto JSON
        
         return(
              <div>
                   <p>{_json.enteros}</p>
                   <button onClick={()=>{
                              setJson({
                                    ..._json,
                                   enteros: _json.enteros + 1
                              });
                    }}>Clic</button>
                   <p>{_json.texto}</p>
                  <input type="text" onChange={(e)=>{
                             setJson({
                                 ..._json,
                                texto: e.target.value
                            });
                  }} />
                  <p>{_json.booleanos ? "True":"False"}</p>
                  <input type="checkbox" onChange={(e)=>{
                              setJson({
                                  ..._json,
                                  booleanos: e.target.checked
                              });
                   }} />
              </div>
         )
}

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

Del código anterior podemos resaltar que, para acceder a los atributos del JSON debemos realizar notación de punto.

<p>{_json.enteros}</p>
<p>{_json.texto}</p>
<p>{_json.booleanos ? "True":"False"}</p>

Y para actualizar usamos cada función que regresa useState y utilizamos el operador spread.

setJson({
     ..._json,
     enteros: _json.enteros + 1
});

setJson({
     ..._json,
     texto: e.target.value
});

setJson({
     ..._json,
     booleanos: e.target.checked
});

Espero no haberte confundido, recuerda que esta clase cuenta con vídeo donde hago esto paso a paso, quizá te quede más claro.

Array (listas) con useState

Como ultimo ejemplo veremos la asignación y recuperación del estado si este es un array o bien una lista. Es muy similar al ejemplo anterior, así que veamos el código.

import React, {useState} from 'react';

//Componentes funcionales
const Componente = (props)=>{

        const [booleanos, setBooleanos] = useState(true);
         //Declarar un Hook useState de Lista (Array)
        const [lista, setLista] = useState([
                  { 
                    item:0
                  },
                  {
                   item:1
                  }
         ]);
        
         return(

       <div>
            <button onClick={()=>{
                 let tLista = lista;
                 tLista.push({
                   item: lista.length
                 });
                setLista(tLista);
               console.log(tLista);
              //setTimeout(() => {
               setBooleanos(!booleanos);  
             //}, 100);

           }}>Agregar</button>
          <ul>
            {
                lista.map((item,index)=>(
                   <li key={index}>{item.item}</li>
               ))
           }
         </ul>
         </div>
              
         )
}

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

Espero que hayas seguido el curso y que la mayor parte del código te haya quedado claro, ya que, mucho de ello lo hemos visto en clases pasadas, así que, solo me centraré en la parte de la actualización del state.

        <button onClick={()=>{
                 let tLista = lista;
                 tLista.push({
                   item: lista.length
                 });
                setLista(tLista);
               console.log(tLista);
              //setTimeout(() => {
               setBooleanos(!booleanos);  
             //}, 100);

           }}>Agregar</button>

1. Lo primero que hago es almacenar nuestro state en una variable temporal que podemos modificar.
2. Hago un push a la variable temporal para agregar un nuevo dato.
3. Actualizamos el state, a través de, setLista(tLista)

Si el código lo dejamos hasta este punto, no veríamos cambios en la DOM, es como si no agregáramos ningún dato al state. Esto es por que el cambio se da dentro del objeto lista, pero la DOM no ve este cambio, así que, necesitamos algo que entere al componente de un cambio de state y realice una actualización.

1. Para ello, agregamos el state booleanos y lo actualizamos despues de actualizar la lista
2. Con esto el componente actualizará y veremos en la DOM que se agrega un nuevo item a la lista.

Excelente, hemos llegado al final de este post y ya sabes varias maneras en que puedes manipular el Hook de estado use State. Ahora solo debes practicar para aterrizar todos estos conceptos. Nos vemos en el siguiente post.