Ehi ragazzi, in questa procedura dettagliata vi mostrerò tutto ciò che dovete sapere per utilizzare la funzione useEffect di React come un professionista.

Una breve storia

Prima che esistesse useEffect , esistevano metodi del ciclo di vita, vale a dire:

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 questi metodi del ciclo di vita, possiamo gestire in modo affidabile qualsiasi modifica allo stato del componente, quindi perché la modifica di useEffect ?

Inserisci React Stateless Components

Ad un certo punto (credo già nel 2016), il team di React ha preso la decisione di creare componenti React che possono essere istanziati solo con una normale funzione Javascript vecchia scuola. Così:

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

Inserisci React.useEffect

Il nuovo approccio per gestire i cambiamenti di stato è arrivato sotto forma di una funzione useEffect esposta dalla libreria React. Quindi, come ricreare i nostri amati metodi componentDidMount , componentDidUpdate e componentWillUnmount ? Espandiamo la nostra precedente funzione stateless:

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>
}

Un'altra cosa che abbiamo aggiunto a questo esempio, React.useState, un hook di stato, non rientra nell'ambito di questo tutorial, ma scopri di più qui !

Andare oltre la gestione del ciclo di vita

È fantastico poter gestire lo stato di un componente così come con i precedenti metodi del ciclo di vita. Tra la semplicità e la riutilizzabilità delle funzioni stateless, e la funzione React.useEffect, è diventato disponibile un nuovo paradigma: le funzioni stateful riutilizzabili, o più comunemente denominate: hook personalizzati .

Un lettore esperto come te probabilmente ha notato che con useEffect non possiamo accedere alla proprietà prevProps o prevState come prima. Non aver paura! Leggi la soluzione per questo qui . Il motivo per cui questa soluzione funziona è perché React.useRef non attiva il re-render del componente. Inoltre, useEffect senza dipendenze si attiva ogni volta che viene eseguito un nuovo rendering del componente, indipendentemente dal cambiamento di stato che l'ha attivato.

Ciao ganci personalizzati

Non c'è davvero nessun esempio di base migliore per un hook personalizzato di quello che React condivide nella loro documentazione ufficiale qui . Iniziamo dalla parte inferiore dell'esempio e procediamo verso l'alto:

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;
}

Conclusione

In questo tutorial, abbiamo esaminato:

1. Come abbiamo gestito il ciclo di vita di un componente prima di useEffect e perché questo approccio è diventato obsoleto
2. Come possiamo usare useEffect per gestire efficacemente il ciclo di vita di un componente
3. Come possiamo sfruttare la riutilizzabilità delle funzioni stateless di React e useEffect per creare funzioni stateful riutilizzabili.