useState: ¿Cómo utilizar el Hook useState en React.js?
Hola de nuevo viajero, hoy veremos uno de los Hooks más importantes en la librería de React, y quizá, el que más vas a utilizar, te hablo del Hook useState, el cual es considerado un Hook de estado, ya que, con el podrás agregar un state a los componentes funcionales que desarrolles, y así, controlar el render en tu aplicación.
No olvides que este post forma parte del curso gratuito de React JS donde podrás encontrar varias clases para iniciar en esta librería.
¡No te puedes perder las nuevas clases 🧐!
Suscribirme
by Juan Carlos García
3-Mzo-2023
(2)
Suscribirme al canal:
Tabla de contenido
- 1 ¿Qué aprenderé del Hook useState?
- 2 ¿Qué es el Hook useState?
- 3 ¿Por qué utilizar useState?
- 4 ¿Dónde utilizar useState?
- 5 Declaración de useState
- 6 React recomienda un Hook useState por cada parámetro que necesitemos
- 7 Asignación default para useState
- 8 useState con un JSON
- 9 Array (listas) con useState
¿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.
Suscribirme
Gracias por tu calificación
(2)
Categorías
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')
);
Suscribirme
Gracias por tu calificación
(2)
Categorías
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>
- Lo primero que hago es almacenar nuestro state en una variable temporal que podemos modificar.
- Hago un push a la variable temporal para agregar un nuevo dato.
- 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.
- Para ello, agregamos el state booleanos y lo actualizamos despues de actualizar la lista
- 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.
Suscribirme
Gracias por tu calificación
(2)
Categorías
🧐 Autoevaluación: Hook useState
¿Qué es useState?
¿En dónde podemos utilizar el Hook Satate?
Juan Carlos García
Desarrollador de software
Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como: Node JS, PHP, C# y Bases de datos.
Si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.