Forem: Make It Real

React useEffect

Make It Real — Wed, 14 Jun 2023 13:26:12 +0000

useEffect es probablemente el hook más confuso e incomprendido en React. Hoy quiero aclararte eso.

Usamos hooks todo el tiempo en Make It Real y comprender useEffect es crucial si vamos a escribir código React de estilo moderno.
A continuación veremos:

A continuación veremos:
Cómo ejecutar un effect(efecto) en cada render.
Cómo ejecutar un efecto solo en el primer render.
Cómo ejecutar un efecto en el primer render y volver a ejecutarlo cuando cambia una “dependencia”.
Cómo ejecutar un efecto con limpieza.

¿Qué es useEffect?
El hook useEffect nos permite realizar side effects (efectos secundarios) en nuestros componentes de función. Los side effects son acciones externas al código que se está ejecutando, por ejemplo:

Llamadas a API
Actualizar el DOM
Suscribirse a eventos (event listeners).
Todos estos son efectos secundarios que podríamos necesitar que un componente realice en diferentes momentos.

Ejecutar useEffect en cada render
El hook useEffect no devuelve ningún valor, sino que toma dos argumentos, siendo el primero obligatorio y el segundo opcional. El primer argumento es la función callback del efecto que queremos que ejecute hook (es decir, el efecto en sí). Supongamos que queríamos colocar un mensaje console.log() dentro del callback del useEffect.


import { useEffect } from "react";

export const FunctionComponent = () => {
  useEffect(() => {
    console.log("run for every componentrender");
  });

  return (
    // ...
  );
}

De forma predeterminada, el efecto establecido en el hook useEffect se ejecuta cuando el componente se renderiza por primera vez y después de cada actualización. Si ejecutamos el código anterior, notaremos que se genera el mensaje console.log('run for every componentrender')a medida que se renderiza nuestro componente. Si nuestro componente alguna vez se volviera a renderizar (por ejemplo, de un cambio de estado con algo como useState), el efecto se ejecutaría nuevamente.

A veces, volver a ejecutar un efecto en cada renderizado es exactamente lo que quieres. Pero la mayoría de las veces, solo desea ejecutar el efecto en ciertas situaciones, como en el primer renderizado.

Cómo ejecutar el useEffect solo en el primer render
El segundo argumento del hook useEffect es opcional y es una lista de dependencias que nos permite decirle a React que omita la aplicación del efecto solo hasta que se den ciertas condiciones. En otras palabras, el segundo argumento del hook useEffect nos permite limitar cuándo se ejecutará el efecto. Si simplemente colocamos un array vacío como segundo argumento, así es como le decimos a React que solo ejecute el efecto en el renderizado inicial.

import { useEffect } from "react";

export const FunctionComponent = () => {
  useEffect(() => {
    console.log("run only for first component render (i.e.component mount)");
  }, []);

  return (
    // ...
  );
}

Con el código anterior, el mensaje console.log() solo se activará cuando el componente se monte por primera vez y no se volverá a generar, incluso si el componente se vuelve a renderizar varias veces.

Esto es mucho más “eficiente” que ejecutar en cada renderizado, pero ¿no hay un término medio feliz? ¿Qué pasa si queremos rehacer el efecto, si algo cambia?

Ejecutar el useEffect en el primer render y volver a ejecutarlo cuando cambie la dependencia
En lugar de hacer que un efecto se ejecute una vez al principio y en cada actualización, podemos intentar restringir el efecto para que se ejecute solo al principio y cuando cambie cierta dependencia.

Supongamos que queríamos lanzar un mensaje console.log() cada vez que cambiara el valor de una propiedad de estado. Podemos lograr esto colocando la propiedad de estado como una dependencia del callback del efecto. Mira el siguiente ejemplo de código:


import { useState, useEffect } from "react";

export const FunctionComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(
      "run for first component render and re-run when 'count' changes"
    );
  }, [count]);

  return (
    <button onClick={()=> setCount(count + 1)}>
      Click to increment count and trigger effect
    </button>
  );
}

Arriba tenemos un botón en el template del componente responsable de cambiar el valor de la propiedad de estado de count cuando se hace click. Cada vez que se cambie la propiedad de estado count (es decir, cada vez que se haga click en el botón), notaremos que se ejecuta el callback del efecto y se activa el mensaje console.log().

Ejecutar efecto con limpieza
Se ejecuta un callbak de efecto cada vez en el procesamiento inicial y cuando especificamos cuándo se debe ejecutar un efecto. El hook useEffect también brinda la capacidad de ejecutar una limpieza después del efecto. Esto se puede hacer especificando una función de retorne al final de nuestro efecto.


import { useState, useEffect } from "react";

export const FunctionComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(
      "run for first component render and re-run when 'count' changes"
    );

    return () => {
      console.log("run before the next effectand when component unmounts");
    };
  }, [count]);

  return (
    <button onClick={()=> setCount(count + 1)}>
      Click to increment count and trigger effect
    </button>
  );
}

En el ejemplo anterior, notaremos que el mensaje de la función de limpieza se activa antes de que se ejecute el efecto deseado. Además, si nuestro componente alguna vez se desmonta, la función de limpieza también se ejecutará.

Un buen ejemplo de cuándo podríamos necesitar una limpieza es cuando configuramos una suscripción a nuestro efecto, pero queremos eliminar la suscripción cada vez que se realice la próxima llamada de suscripción, para evitar memory leaks.

Estas son principalmente todas las diferentes formas en que el hook useEffect se puede utilizar para ejecutar efectos secundarios en componentes. Te invito a ver esta guia visual de useEffect de ALEX SIDORENKO que ilustra estos conceptos a través de una serie de GIF es a la vez inteligente y eficaz, especialmente para los estudiantes visuales. También hay una visualización de cómo funcionan las funciones de primera clase si quieres más.

https://alexsidorenko.com/blog/useeffect/

¿ChatGPT reemplazará a los programadores?

Make It Real — Wed, 14 Jun 2023 12:51:37 +0000

El surgimiento de ChatGPT y otros LLMs (Modelos de Lenguaje Avanzado) ha despertado temor por la posibilidad de que pueda reemplazar varios trabajos, incluyendo el de los programadores.

¿Cómo funcionan los LLMs como ChatGPT?
Un LLM (Large Language Model) se alimenta de una gran cantidad de información (p.e. la información pública que existe hoy en Internet) para crear un modelo estadístico que dada una entrada (p.e. una pregunta) genere una salida (una respuesta).

Por ejemplo, al ingresar el texto “Había una vez” en ChatGPT recibí la siguiente continuación: “Había una vez una pequeña aldea en lo profundo del bosque. Esta aldea estaba rodeada de exuberante vegetación y habitada por personas amables y trabajadoras …”. Y ahí continúa.

Como es un modelo estadístico la respuesta puede cambiar así usemos el mismo texto. Por ejemplo, la segunda vez generó el siguiente texto: “Había una vez una historia.”. Y ahí terminó.

Ignorando lo aburrido de la última respuesta, es increíble que el concepto funcione y que genere respuestas coherentes.

Muchos LLMs también son capaces de generar código y ¡lo hacen muy bien!

Sin embargo, debemos tener en cuenta que los LLMs dependen de la información de la que se alimenten y del modelo estadístico que genere. Se necesitan enormes cantidades de datos y un gran poder computacional para generar estos modelos.

¿Qué hace un(a) programador(a)?
Hay muchos tipos de programadores. Algunos trabajan aplicaciones Web, otros en aplicaciones móviles, otros en crear herramientas para otros programadores, etc. En este post nos vamos a centrar en programadores Web y móvil Juniors, que son los que más nos interesan en esta discusión.

Generalmente, cuando una persona termina el programa TOP de Make It Real y empieza a trabajar en una empresa como desarrollador Web y/o móvil, el primer paso es descargar el código de la aplicación que le hayan asignado y hacerlo funcionar en su propia máquina. Cada aplicación es diferente así que la instalación puede tomar desde algunas horas hasta algunos días.

Luego le asignarán tareas para desarrollar nuevas funcionalidades y solucionar errores o problemas. Esto requiere entender el contexto del problema, identificar el código que se necesita escribir o cambiar, investigar cómo hacerlo, escribir o modificar el código (idealmente escribir algunas pruebas automatizadas) y seguir el proceso que tenga la empresa para desplegarlo en producción para que los usuarios finales lo puedan utilizar.

La programación es un proceso que requiere personas creativas y recursivas que puedan entender el contexto de la aplicación (cómo está la aplicación estructurada, qué tecnologías se están usando, cómo afectan el código que estamos escribiendo, qué es realmente lo que quiere el cliente, qué restricciones existen, etc.) y generen una solución.

Escribir código es sólo una fracción del trabajo.

¿Los LLMs reemplazaran a los programadores?
La programación es de las disciplinas más documentadas en Internet y de las comunidades más abiertas a compartir conocimiento.

Incluso antes de ChatGPT se podían encontrar respuestas a la mayoría de problemas a las que uno se puede enfrentar en programación en sitios como StackOverflow o en la infinidad de blogs de programación.

Esto ha permitido que la productividad de los programadores haya crecido de forma exponencial desde la llegada de la Web en los noventas. Pero ese incremento en productividad no desaceleró la demanda de programadores, al contrario, las aplicaciones se hicieron mucho más complejas y se crearon nuevas tecnologías como voz sobre IP, servicios de streaming, criptomonedas, entre muchas otras.

Mi predicción es que las empresas no van a requerir menos programadores, al contrario, van a requerir más, porque cada vez van a querer hacer cosas más interesantes y complejas, que les den una mayor ventaja competitiva y les permita aumentar sus ingresos.

¿Reemplazará algún día la Inteligencia Artificial a los programadores?
Los logros de los LLMs son impresionantes, pero son solo el inicio de la revolución hacia una automatización mucho más completa.

Se va a necesitar mucho más que LLMs para automatizar nuestro trabajo como programadores, pero ese debería ser nuestro objetivo a largo plazo, porque una vez lo logremos, lo más probable es que también hayamos automatizado el trabajo del resto de la humanidad y nadie más necesite un trabajo para sobrevivir.

Es muy temprano para predecir qué pasará pero lo único cierto es que los programadores tendremos una gran influencia en ese futuro.

Conclusión
No, los LLMs no reemplazarán a los programadores. Escribir código es sólo una fracción del trabajo de un(a) programador(a) y los LLMs son una herramienta que incrementará la productividad (o eso es lo que esperamos).

Un aumento en productividad no significa que las empresas dejarán de contratar programadores, al contrario, los avances en Inteligencia Artificial están creando nuevas oportunidades para que las empresas creen y actualicen sus soluciones, y aumenten su ventaja competitiva.

Sin embargo, a largo plazo, nuestro objetivo como programadores sí debería ser el de lograr reemplazarnos, porque es muy posible que cuando lo logremos nadie más tenga que volver a trabajar para sobrevivir.