Lemoncode TV

React useState a fondo

Ponerte a jugar con useState es muy fácil, pero conforme avanzamos desarrollando nos podemos encontrar muchos casos arista que nos pueden frustrar si no conocemos bien cómo funcionan, y cómo tratar ciertos casos arista.

Temario

1 Use State I - Conceptos

Antes de la aparición de los hooks en React la única forma de tener estado en React era usando componentes de clases o tirando de soluciones tales como redux.

Desde que aparecieron los hooks podemos usar el hook useState para tener estado en componentes funcionales.

Ver lección

2 Use State II - Use State objetos

Manejar useState con tipos elementales como string o number está muy bien, pero y si... ¿Tengo una ficha de cliente? ¿Tengo que crear un useState por cada campo? No, no te hace falta directamente puedes manejar objetos, veamos como.

Ver lección

3 Use State III - Lazy initializer

Cada vez que se pinta un componente de tipo función, se ejecuta la función completa, es decir, si tenemos algo así como:

export default function App() {
 const [myClient, setMyClient] = React.useState({name: 'Pepe', lastname: 'Perez'});

¿Que quiere decir esto? Que el objeto que se crea dentro del useState se crea en memoria, aunque sólo se use la primera vez que que renderiza la función (el resto lo descarta y tira del valor que esté almacenado en su parte de estado).

Esto no suele ser un problema si los datos son elementales o si el objeto es pequeño, pero si tenemos un objeto grande o si tiramos por ejemplo de una lectura del local storage si puede ser un problema, ya que penalizaría cada render.

Para solucionar este problema podemos usar lo que llaman "lazy initialization"

Ver lección

4 Use state IV - Function Dispatch

El hook de useState nos ofrece una función para setear el nuevo estado (un dispatcher), esta acción de setear un valor es asícnrona, es decir justo en la siguiente line de ejecucíon de un set de estado no tengamos el nuevo valor disponible, seguramente habrá que esperar a que se tire un nuevo render.

Esto nos puede llevar a casos extraños si trabajamos con asincronía (por ejemplo si usamos un fetch para pedir datos a servidor o si usamos un setTimeout).

Ver lección

¿Te apuntas a nuestro máster?

Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.