Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Estados compuestos con useState

9/19
Recursos

Aportes 12

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Este curso vá buenísimo hasta ahora, me encanta!

Estado simple con useState:

// Así se declaran
const [ value, setValue ] = React.useState('');
const [ error, setError ] = React.useState(false);
const [ loading, setLoading ] = React.useState(false);
 
// Así se consumen
console.log(loading);

// Así se actualizan
setLoading(true);

Estado compuesto con useState:

// Así se declaran
const [ state, setState ] = React.useState({
    value: '',
    error: false,
    loading: false,
});
 
// Así se consumen
console.log(state.loading);

// Así se actualizan
setState({
   ...state,
   error: true,
   loading: false,
})

Estado compuesto con classState (no hay estados simples):

// Así se declaran
constructor(props) {
   super(props);
 
   this.state = {
       value: '',
       error: false,
       loading: false,
   }
}
 
// Así se consumen
console.log(this.state.loading);

// Así se actualizan
this.setState({ error: true, loading: false });

En react el estado debe ser inmutable, esto significa que no podemos modificarlo. Para realizar una actualizacion sobre el estado es necesario sobreescribirlo. Esto no representa un problema y pasa desapercibido al utilizar estados independientes pero los estados compuestos son una coleccion, por eso no basta modificar una de sus entradas, debemos crear una nueva coleccion y hacer que nuestro estado apunte a ella

Cree un customHook useStateMany para estos casos donde el estado es un objeto

Estados compuestos cuando los valores cambian juntos o estan muy relacionados : value, loading, error (caso clásico de consulta a un api)

Solución a un problema personal.

La app estaba toda rota sin saber porque. El cambio que hice fue colocar el spred operator junto al state de primero y luego colocar las variable que cambiaban para que funcionara ya que en un principio estaba colocando primero las actualizaciones y de ultimo el …state.

Obviamente era una mala operación ya que actualizaba pero una vez que llegaba de nuevo al …state, retomaba su configuración original y por eso la app no hacia nada.

Mi practica

import React from "react";

const SECURITY_CODE = "andrea";

function UseState({name}) {
    const [state, setState] = React.useState({
        value: "",
        error: false,
        loading: false
    });

    const [value, setValue] = React.useState('');
    const [error, setError] = React.useState(false);
    const [loading, setLoading] = React.useState(false);

    React.useEffect(() => {

        if (!!state.loading) {
            setState({
                ...state, error: false
            });
            setTimeout(() => {
                if (state.value !== SECURITY_CODE) {
                    setState({
                        ...state, error: true, loading: false
                    });
                }else{
                    setState({
                        ...state, error: false, loading: false
                    });
                }

            }, 3000);
        }
    }, [state]);

    return (
        <div>
            <h2>Eliminar {name}</h2>
            <p>Por favor, escribe el código de seguridad</p>
            {(!state.loading && state.error) && (
                <p> El Código es incorrecto</p>
            )}
            {state.loading && (
                <p> Cargando...</p>
            )}
            <input
                value={state.value}
                onChange={(event) => {
                    setState({
                        ...state,
                        value: event.target.value
                    });
                }}
                placeholder="Código de Seguridad"
            />
            <button
                onClick={() => {
                    setState({
                        ...state,
                        loading: true
                    })
                }}
            >Comprobar
            </button>
        </div>
    );
}

export {UseState};

Para refrescar del curso de introducción…
A setState() le podemos pasar una función que va a recibir los valores del estado anterior, por si no lo tenemos presente en el contexto donde vamos a hacer la actualización:

setState( prevState => { ...prevState, error: true })

De esa manera podemos agregar todas las propiedades que tiene nuestro estado con el Spread Operator y luego redefinir las que nosotros queramos actualizar 😄

**Si sigues teniendo el error de la consola aqui esta la solucion: **

Buen el error pasaba porque “antes del llamado a la api” en mi useEffect tenia un setState({ error: false }); sin el objeto completo. Luego de que se lo puse funciono a la perfeccion. Aseuremonos que todos nuestros setState esten completo con el objeto de …state. Mas abajo le dejare el ejemplo.

setState({ ...state,error: false });

bueno, esta parte del estado compuesto no la tenia

¡Wow! No se me había ocurrido esta forma de hacer estado compuesto en componentes con funciones…

No veo ninguna ventaja de usar estados compuestos con useState, debes escribir mas codigo lo cual lo hace mas difícil de leer, mucho codigo repetitivo