Lemoncode TV

React UseState lazy

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'});

¿Qué quiere decir esto? Que el objeto que se crea dentro del useState se instancia, aunque sólo se use la primera vez que se renderiza la función (el resto useState 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 en cada repintado del componente.

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

Lazy initialization

Veamos este ejemplo con nombre de usuario y apellidos:

import "./styles.css";
import React from "react";

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

  return (
    <div className="App">
      <h1>
        Hello {myClient.name} {myClient.lastname}
      </h1>
      <input
        value={myClient.name}
        onChange={(e) =>
          setMyClient({
            ...myClient,
            name: e.target.value,
          })
        }
      />
      <input
        value={myClient.lastname}
        onChange={(e) =>
          setMyClient({
            ...myClient,
            lastname: e.target.value,
          })
        }
      />
    </div>
  );
}

Vamos añadir el inicializador con función:

import "./styles.css";
import React from "react";

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

+  const [myClient, setMyClient] = React.useState( () => ({
+    name: "Pepe",
+   lastname: "Perez"
+ })
+ );


  return (
    <div className="App">

Para comprobar que solo se llama una vez vamos a añadir un console.log

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

+    const [myClient, setMyClient] = React.useState( () => {
+      console.log('lazy initializer invoked');
+      return {
+        name: "Pepe",
+       lastname: "Perez",
+      };
+     });

Como puedes ver sólo se llama la primera vez que se renderiza el componente.

¿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.