Más sobre estado

Search…
Más sobre estado
En un componente funcional se puede crear un estado utilizando useState. Esta función retorna un arreglo con dos elementos:
El estado
Una función para modificar el estado
import React, { useState } from "react";
​
function Welcome() {
  const [counter, setCounter] = useState("Hola Mundo") // define el estado con un valor inicial
​
  return <h1>{counter}</h1>;
}
El estado es de sólo lectura, no debes modificar directamente como en el siguiente ejemplo:
// mal - no hagas esto
counter = 2;
Para modificar el estado utiliza la función que retorna el useState, en nuestro ejemplo sería setCounter.
setCounter(2);
Cuando la modificación de un estado depende del estado anterior se debe hacer de la siguiente forma para evitar problemas de asincronía:
setCounter(prevCounter => prevCounter++);
En vez de pasarle un valor al setCounter le estamos pasando una función que recibe el estado y retorna un nuevo estado.
Arreglos y objetos
Cuando el estado es un arreglo o un objeto hay que tener cuidado porque cada vez que se modifica ese estado se crea un nuevo arreglo u objeto. A esto se le conoce como inmutabilidad. La idea es que los cambios al estado sean explícitos y predecibles, y las aplicaciones más fáciles de mantener en el tiempo.
Acostumbrarse a escribir código inmutable toma algún tiempo pero es una buena práctica. En esta guía vamos a ver algunas técnicas para manipular arreglos y objetos de forma inmutable.
Arreglos
En vez de modificar el arreglo original para insertar, actualizar y eliminar elementos, lo que vamos a hacer es construir un nuevo arreglo con el cambio. Veamos cómo hacerlo.
Para los siguientes ejemplos vamos a suponer que tenemos un componente con el siguiente estado:
const [arr, setArr] = useState([1, 2, 3]);
Insertando elementos
Para insertar un elemento a un arreglo utiliza el método concat que retorna un nuevo arreglo con el nuevo elemento:
// bien
setArr(arr => arr.concat(4)); // crea un nuevo arreglo
​
// mal
setArr(arr => arr.push(4)); // modifica el arreglo original
Cambiando un elemento
Existen varias formas de cambiar un elemento de forma inmutable. La primera es con el método map:
// duplicar todos los elementos
setArr(arr => arr.map(n => n * 2));
​
// duplicar sólo el elemento en la posición 1
const idx = 1;
setArr(arr => arr.map((n, i) => i === idx ? n * 2 : n));
La segunda es utilizando el método slice y concat. Por ejemplo si queremos cambiar la segunda posición por un 5:
const idx = 1;
setArr(arr => {
  return arr.slice(0, idx)
              .concat(5)
              .concat(arr.slice(idx + 1));
})
La tercera es con el nuevo operador ... (spread) de JavaScript:
const idx = 1;
setArr(arr => {
  return [...arr.slice(0, idx), 5, ...arr.slice(idx + 1)];
});
Removiendo un elemento
Puedes remover un elemento de forma inmutable de varias formas. La primera es con el método filter:
const idx = 1;
setArr(arr => arr.filter(e, i) => i !== idx);
La segunda es utilizando el método slice y concat:
const idx = 1;
setArr(arr => arr.slice(0, idx).concat(arr.slice(idx + 1)))
La tercera es con el nuevo operador ... (spread):
const idx = 1;
setArr(arr => {
  return [...arr.slice(0, idx), ...arr.slice(idx + 1)];
})
Objetos
Con los objetos pasa algo similar que con los arreglos. En vez de modificarlos directamente vamos a crear un nuevo objeto cada vez que necesitamos hacer una modificación.
Para los siguientes ejemplos vamos a suponer que tenemos un componente con el siguiente estado:
const [obj, setObj] = useState({ a: 1, b: 2, c: 3 });
Agregando y modificando propiedades
Para agregar o modificar propiedades en los objetos utiliza el operador ... (spread) de JavaScript:
// agregar una propiedad
setObj(obj => { ...obj, d: 4 });
​
// modificar una propiedad
setObj(obj => { ..., c: 5 });
Componentes
Formularios
Last modified 3mo ago
Copy link
On this page
Arreglos y objetos
Arreglos
Insertando elementos
Cambiando un elemento
Removiendo un elemento
Objetos
Agregando y modificando propiedades