Callbacks y hook useEffect

Resumen

Antes de ver callbacks, traten de entender todo lo anterior!.
Ahora sí, si estás preparado, agarrate del apoyabrazos de la silla y traten de entender bien callbacks.
Hablando en serio (?), esta vez no hubo mucha práctica porque me gustaría aplicar esto en algún intento de tienda virtual (futuro proyecto) en donde usemos callbacks y/o useEffect. Estos temas son esenciales entender porque los usaremos siempre.
Nunca lo menciono, pero si tienen dudas, comenten en esta publicación!

Podrás ver la lista de los 100 días en este enlace.

Callbacks

Callbacks es la forma de dar información de un componente hijo a un componente padre. La manera de realizar un callback en React es de la siguiente forma:

1. Imaginando que tenemos solo dos componentes, uno padre y otro hijo. El padre va a tener que mandar una función sin ejecutar mediante props al hijo. La función tiene que vivir en el componente padre.
2. El hijo, mediante una acción del usuario, va a ejecutar esa función que llega por props, para devolverle la información al padre. Esto es si no queremos mandar datos de ningún tipo.
3. Si queremos enviar datos de cualquier tipo al componente padre, deberemos hacerlo mediante parámetros de esa función que ejecutamos en el componente hijo.

🤯
Si, yo tampoco entendí al principio. Esto se ve mejor en la práctica.

Un ejemplo de esta interacción sería:

• Componente padre:

function handleCallback(data) {
    // data va a ser la informacion que recibe el padre desde el hijo
    console.log(data);
}
<Child callbackcito={handleCallback} />; // Le pasamos la funcion del componente padre al componente hijo sin ejecutar

• Componente hijo:

function Child(props) {
    function handleClick() {
        props.callbackcito("Info para devolver a mi padre"); // Esta info que envio, se va a guardar en data del componente padre
    }

    return <button onClick={handleClick}>Ejecutar CALLBACK</button>;
}

Tal vez, con este ejemplo se entienda mejor el concepto de callback. Unos ejemplos sobre el uso de callbacks es en una tienda.
Supongamos que tenemos esta estructura de componentes:

App
|---> Nav ---> Buscador
|---> Lista de Productos ---> Producto * 2000

En una tienda, necesitaremos filtrar los productos disponibles por solo los que nos interesan. Entonces, las acciones que debemos realizar son:

1. Tipear en el Buscador palabras claves
2. Mediante callback, obtener esa información en Nav
3. Mediante otro callback, obtener esta información en App
4. Usando props, mando esta información a Lista de Productos
5. Acotar la cantidad de componentes Producto con la información recibida.

Hook useEffect

Este hook nos sirve para controlar el ciclo de vida de un componente. Un componentes tiene 3 fases: creación, actualización y destrucción. Creamos los componentes al montarlos en una función, actualizamos según la interacción del usuario o al pasar props y destruimos cuando sacamos el nodo del DOM.

El hook useEffect nos va a dejar ejecutar una porción de código inmediatamente después de que el componente se monte. Nos dejará montrar otra porción de código con cada actualización.

Se escribe algo así:

import React, { useEffect } from "react";

function Test() {
    useEffect(() => {
        // Algo para ejecutar al montar
    }, []); // Este segundo parametro es un watcher
}

useEffect utiliza arrow functions, donde el primer argumento es la porción de código que debe ejecutar. El segundo argumento es un watcher, o sea, le indicamos a useEffect que tiene que mirar. Esto tiene dos funciones:

• Si no indicamos el watcher, o sea un array vacío, el código se ejecuta una sola vez.
• Si indicamos el watcher, va a estar constantemente viendo una variable. Si esa variable cambiar, inmediatamente se ejecuta ese código.

Una (muy) mala idea es no poner un segundo argumento y lo que pasará es que, con cada actualización (con useState, props), se activa el useEffect. React se enoja si hacés esto.

Un ejemplo típico para useEffect es el consumo de API. Volvamos a un proyecto anterior y consumamos la API de GitHub. Lo unico debemos tener en cuenta es que no vamos a poder usar async await con useEffect, debido a que no lo admite. Esto es por su ciclo de vida! Vamos necesitar desmontar el componente al ejecutar el código y de la manera tradicional se convierte en un promesa.

import React, { useState, useEffect } from "react";

function App() {
    const [user, setUser] = useState({});

    useEffect(() => {
        fetchData();
    }, []);

    async function fetchData() {
        const getData = await fetch(
            "https://api.github.com/user/JaviCeRodriguez"
        );
        const dataToJson = await getData.json();

        setUser(dataToJson);

        console.log(dataToJson);
    }

    return (
        <>
            <p>Nombre: {user.name}</p>
            <p>Localizacion: {user.location}</p>
            <p>Compañia: {user.company}</p>
            <p>Bio: {user.bio}</p>
        </>
    );
}

Esta es una manera eficaz de consumir la API! Ahora, si solo pasamos un argumento (el código), o, llamamos al a función fetchData fuera del useEffect, veremos desde la consola que estaremos realizando infinitamente un HTTP Request a la API, llegando al número límite permitido (rate limit). Rate limite sirve para evitar los ataques DDOS a los servidores.

La publicación del día 12 va a ser la última del curso de React de CourseIt, luego realizaremos proyectos tipo desafío de devchallenges o frontendmentor, utilizando JS y/o React.

Día 11/100