Hola chicos, en este tutorial les mostraré todo lo que necesitan saber para usar la función useEffect de React como un profesional.

Una breve historia

Antes de que existiera useEffect , existían métodos de ciclo de vida, a saber:

1. componenteDidMount
2. componenteDidUpdate
3. componenteWillUnmount

componentDidUpdate(prevProps, prevState) {
  if (prevProps.foo !== this.props.foo) {/* do something */} 
  if (prevState.bar !== this.state.bar)  {/* do something else */}
}

Con estos métodos de ciclo de vida, podemos manejar de manera confiable cualquier cambio en el estado del componente, entonces, ¿por qué el cambio a useEffect ?

Ingrese React Stateless Components

En un momento (creo que ya en 2016), el equipo de React tomó la decisión de crear componentes de React que se pueden instanciar con solo una función regular de Javascript de la vieja escuela. Entonces:

import React from "react";
function MyFunc() {
  return <div>Hey!</div>
}

Ingrese React.useEffect

El nuevo enfoque para administrar los cambios de estado llegó en forma de una función useEffect expuesta por la biblioteca React. Entonces, ¿cómo recreamos nuestros amados métodos componentDidMount , componentDidUpdate y componentWillUnmount ? Ampliemos nuestra función sin estado anterior:

import React from "react";
function MyFunc(props) {
const [bar setBar] = React.useState(null);
  
  React.useEffect(() => {
    console.log("componentDidMount");
    return () => {
      console.log("componentDidUnmount")
    }
  }, []);
  
  React.useEffect(() => {
    console.log("componentDidUpdate when 'bar' changes");
  }, [bar]);
React.useEffect(() => {
    console.log("componentDidUpdate when 'props.foo' changes");
  }, [props.foo]);
return <div>Hey!</div>
}

Otra cosa que agregamos a este ejemplo, React.useState, un gancho de estado, está fuera del alcance de este tutorial, ¡pero obtenga más información al respecto aquí !

Ir más allá de la gestión del ciclo de vida

Es genial que podamos administrar el estado de un componente, así como con los métodos de ciclo de vida anteriores. Entre la simplicidad y la reutilización de las funciones sin estado y la función React.useEffect, tenemos disponible un nuevo paradigma: funciones con estado reutilizables, o más comúnmente llamadas: ganchos personalizados .

Un lector experto como usted probablemente notó que con useEffect, no podemos acceder a la propiedad prevProps o prevState como antes. ¡No temáis! Lea la solución para eso aquí . La razón por la que esta solución funciona es porque React.useRef no activa la repetición del componente. Además, useEffect sin dependencias se activa cada vez que se vuelve a renderizar el componente, independientemente del cambio de estado que lo haya activado.

Hola ganchos personalizados

Realmente no hay mejor ejemplo base para un gancho personalizado que el que React comparte en su documentación oficial aquí . Comencemos por la parte inferior del ejemplo y avancemos:

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

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

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

Conclusión

En este tutorial, revisamos:

1. Cómo gestionamos el ciclo de vida de un componente antes de useEffect y por qué ese enfoque quedó obsoleto
2. Cómo podemos utilizar useEffect para gestionar eficazmente el ciclo de vida de un componente
3. Cómo podemos aprovechar la capacidad de reutilización de las funciones sin estado de React y useEffect para crear funciones con estado reutilizables.