Usando el gancho useEffect de React

Usar useEffectes probablemente la mejor parte de React Hooks. Ayuda a reducir el desorden de los métodos del ciclo de vida de los componentes y, lo que es más importante, ayuda a separar la lógica diferente que puede aparecer en los métodos del ciclo de vida. Hoy, vamos a repasar un ejemplo para cada uno de los principales beneficios de useEffectcon ejemplos que son del sitio web de React.

Primero, repasemos cómo el gancho puede ayudar a reducir el desorden general. Este primer caso será cómo su método típico de ciclo de vida basado en clases se incluiría en un caso básico sin desmontar.

componentDidMount() { 
    document.title = `You clicked ${this.state.count} times`;  
}
componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;  
}

useEffect(() => {
    document.title = `You clicked ${count} times`;  
});

Como ya puede ver en el ejemplo anterior, esto se reflejará en qué tan bueno useEffectes en el caso de usar llamadas API y desmontar. A continuación se muestra un ejemplo simple de cómo se verían sus métodos de ciclo de vida si estuviera usando una ChatAPI para suscribirse al estado en línea de un amigo.

componentDidMount() {
    ChatAPI.subscribeToFriendStatus(      
        this.props.friend.id,      
        this.handleStatusChange    
    );  
}
componentWillUnmount() {    
    ChatAPI.unsubscribeFromFriendStatus(      
        this.props.friend.id,      
        this.handleStatusChange    
    );  
}
handleStatusChange(status) {    this.setState({      isOnline: status.isOnline    });  }

useEffect(() => {    
    function handleStatusChange(status) {
        setIsOnline(status.isOnline);    
    }
ChatAPI.subscribeToFriendStatus(
        props.friend.id, 
        handleStatusChange
    );
return function cleanup() {
        ChatAPI.unsubscribeFromFriendStatus(
            props.friend.id, 
            handleStatusChange );    
    };  
});

¡No olvides que useEffectse ejecuta en cada renderizado! Esto puede ser excesivo si su actualización es gráficamente costosa o una llamada a la API que no se necesita constantemente. Una de las mejores partes useEffectes lo fácil que es optimizar algo.

useEffect(() => {
    const subscription = props.source.subscribe();
return () => {
      subscription.unsubscribe();
    };
},
  [props.source],
);

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

Además, si agrega una matriz vacía useEffectcomo segundo argumento, solo se ejecutará una vez y luego se desmontará si es necesario. Esto es similar a si solo estuviera usando componentDidMounty componentWillUnmountsin usar componentDidUpdate. Este es un truco crucial para saber si solo desea ejecutarlo una vez al principio.

Ahora, estos ejemplos fueron bastante simples y espero haber podido guiarlo en su transición de usar Clases a Hooks más fácilmente. useEffectes una gran herramienta en el uso de Hooks, y ayuda a disminuir la carga de administrar funciones de ciclo de vida gigantes y voluminosas que pueden acumularse en su base de código.

Cada una useEffecttiene su propia función que puede manejar su propio montaje, actualizaciones y desmontajes. Siento que esto ayuda a los desarrolladores "externos" a mantener más fácilmente y, si es necesario, realizar cambios en esa parte del código base sin estropear accidentalmente otras partes del código. También pueden realizar fácilmente cambios o adiciones a la optimización.

Pueden saber con seguridad que la useEffectfunción que están modificando solo maneja lo que es necesario para esa suscripción o actualización específica. ¡Por supuesto, asumiendo que el desarrollador original no agregó una lógica no relacionada a esa función! Sé que nunca harías algo así, ¿verdad?

Gracias por leer mi pequeño schpiel sobre el uso del useEffectgancho en React. Si lo disfrutó (y aprendió algo), estaba pensando en tocar el tema de la optimización en React también en un futuro cercano, en particular, useStateya que aún no he hablado de eso. Independientemente, ¡gracias por su tiempo y manténgase a salvo!