Utilizzo di useEffect Hook di React

L'uso useEffectè probabilmente la parte migliore di React Hooks. Aiuta a ridurre il disordine dei metodi del ciclo di vita dei componenti e, soprattutto, aiuta a separare le diverse logiche che possono apparire nei metodi del ciclo di vita. Oggi esamineremo un esempio per ciascuno dei principali vantaggi di useEffectcon esempi tratti dal sito Web React.

Per prima cosa, esaminiamo come il gancio può aiutare a ridurre il disordine generale. Questo primo caso sarà il modo in cui il tuo tipico metodo del ciclo di vita basato su classi includerebbe in un caso di base senza smontare.

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

Come puoi già vedere dall'esempio sopra, questo si trasformerà in quanto useEffectè buono nel caso di utilizzo di chiamate API e smontaggio. Di seguito è riportato un semplice esempio di come potrebbero apparire i metodi del tuo ciclo di vita se utilizzassi una ChatAPI per iscriverti allo stato online di un amico.

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

Non dimenticare che useEffectviene eseguito su ogni re-rendering! Questo può essere eccessivo se il tuo aggiornamento è graficamente costoso o una chiamata API che non è necessaria costantemente. Una delle parti migliori useEffectè quanto sia facile ottimizzare qualcosa.

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

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

Inoltre, se aggiungi un array vuoto useEffectcome secondo argomento, verrà eseguito solo una volta e quindi smontato se necessario. Questo è simile a se stessi usando componentDidMounte componentWillUnmountsenza usare componentDidUpdateQuesto è un trucco cruciale per sapere se vuoi eseguirlo solo una volta all'inizio.

Ora, questi esempi erano abbastanza semplici e spero di essere stato in grado di guidarti nella tua transizione dall'uso delle classi agli Hooks più facilmente. useEffectè un ottimo strumento per l'utilizzo di Hooks e aiuta a ridurre il carico di gestione di ingombranti funzioni del ciclo di vita gigante che possono accumularsi nella tua base di codice.

Ognuno useEffectè la sua funzione che può gestire il proprio montaggio, aggiornamenti e smontaggi. Ritengo che questo aiuti gli sviluppatori "esterni" a mantenere più facilmente e, se necessario, apportare modifiche a quella parte della base di codice senza rovinare accidentalmente altre parti del codice. Possono anche apportare facilmente modifiche o aggiunte all'ottimizzazione.

Possono tranquillamente sapere che la useEffectfunzione che stanno modificando gestisce solo ciò che è necessario per quella specifica sottoscrizione o aggiornamento. Ovviamente, supponendo che lo sviluppatore originale non abbia aggiunto una logica non correlata a quella funzione! So che non faresti mai una cosa del genere, giusto?

Grazie per aver letto il mio piccolo schpiel sull'uso del useEffectgancio in React. Se ti è piaciuto (e hai imparato qualcosa), stavo pensando di toccare l'argomento dell'ottimizzazione anche in React nel prossimo futuro, in particolare, useStatevisto che non ne ho ancora parlato. In ogni caso, grazie per il tuo tempo e stai al sicuro!