03-component-did-mount

03 Component Did Mount

Leer del estado y actualizarlo en un componente funcional es algo genial, pero nos falta otra parte importante de los componentes de la clase, ¿qué pasa con controladores de eventos de ciclo de vida como componentDidMount? ¿Cómo podemos conectarnos a un evento? así en un componente funcional? React.useEffect es tu amigo.

Steps

• Tomaremos como punto de partida la muestra 00 boilerplate. Copie el contenido de la    proyecte en una carpeta nueva y ejecute npm install.

npm install

• Abrimos el fichero ./src/webparts/{nombredenuestrowebpart}/hooks/demo1.tsx

import * from React from "react";

export const MyComponent = () => {
  const [username, setUsername] = React.useState("");

  return (
    <>
      <h4>{username}</h4>
      <input value={username} onChange={e => setUsername(e.target.value)} />
    </>
  );
};

-Si ejecutamos la muestra, no se mostrará nada (el nombre está vacío), ¿qué pasa si queremos    asignar algún valor justo cuando el componente está montado? Podemos hacer uso de    React.useEffect pasando como segundo argumento una matriz vacía (eso es importante    si no pasamos esto, el código dentro del useEffect se ejecutará en    montar y después de cada render).

./src/demo.js

import * as React from 'react';

export const MyComponent = () => {
  const [username, setUsername] = React.useState("");

+  React.useEffect(() => {
+    setUsername("Hulk");
+  }, []);

  return (
    <>
      <h4>{username}</h4>
      <input value={username} onChange={e => setUsername(e.target.value)} />
    </>
  );
};

• Ahora si ejecutamos el ejemplo nos mostrará Hulk como nombre de usuario.

• Vamos un paso más allá, simulemos una llamada asincrónica (lo haremos    usando setTimeout)

import * as React from 'react';

export const MyComponent = () => {
  const [username, setUsername] = React.useState("");

  React.useEffect(() => {
-    setUsername("Hulk");
+    // Simulating async call
+    setTimeout(() => {
+      setUsername("Hulk");
+    }, 1500);
  }, []);

  return (
    <>
      <h4>{username}</h4>
      <input value={username} onChange={e => setUsername(e.target.value)} />
    </>
  );
};

• Ahora Hulk se mostrará despues de 1,5 segundos, en lugar de usar setTimeout podeis usar fetch o cualquier otra opción similar para realizar peticiones Ajax.