Ciclo di vita dei componenti React: mount, update, unmount

Il ciclo di vita di un componente React ha tre fasi: il montaggio (il componente compare sullo schermo per la prima volta), l'aggiornamento (esegue un nuovo render perché sono cambiati il suo stato, le props o il context) e lo smontaggio (viene rimosso). Nei function component reagisci a queste fasi con useEffect: un effetto con [] viene eseguito dopo il montaggio, un effetto con dipendenze viene eseguito dopo gli aggiornamenti in cui sono cambiate, e la funzione restituita da un effetto viene eseguita allo smontaggio.

La console sotto l'anteprima mostra ogni fase mentre avviene.

import { useEffect, useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    console.log('render, count =', count);

    useEffect(() => {
        console.log('mounted');
        return () => console.log('unmounted');
    }, []);

    useEffect(() => {
        if (count > 0) console.log('updated, count =', count);
    }, [count]);

    return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

export default function App() {
    const [show, setShow] = useState(true);

    return (
        <div>
            {show && <Counter />}
            <button onClick={() => setShow(!show)} style={{ marginInlineStart: 8 }}>
                {show ? 'Unmount' : 'Mount'} the counter
            </button>
        </div>
    );
}

La console inizia con render, count = 0 e mounted. Ogni clic su Count registra un rendering e un aggiornamento. Unmount registra unmounted; Mount again riparte da count = 0, perché lo stato è stato buttato via insieme al componente.

Montaggio

Un componente viene montato la prima volta che React lo renderizza in un certo punto dell'albero. React chiama la funzione, crea i nodi DOM dal JSX che restituisce, li inserisce, lascia che il browser disegni la pagina e poi esegue gli effetti del componente.

useEffect(fn, []) è dove avvii le cose che devono esistere per tutto il tempo in cui il componente è sullo schermo: una sottoscrizione, un timer, una connessione, una prima richiesta di dati. Viene eseguito dopo il disegno, quindi non ritarda mai il primo frame.

Aggiornamento

Un componente si aggiorna (esegue un nuovo render) quando:

• cambia il suo stato,
• il suo genitore si renderizza di nuovo (per default, si renderizza anche ogni figlio, che le sue props siano cambiate o no),
• cambia un context che legge.

Dopo ogni aggiornamento, React esegue gli effetti le cui dipendenze sono cambiate. Prima di eseguire di nuovo un effetto, esegue la funzione di cleanup precedente di quell'effetto, così la vecchia sottoscrizione viene chiusa prima che si apra quella nuova. La pagina sul rendering spiega più in dettaglio cosa provoca un rendering.

Smontaggio

Un componente viene smontato quando il suo genitore smette di renderizzarlo (come fa {show && <Counter />} qui sopra), quando cambia la sua key, o quando viene smontata la root stessa. React rimuove i suoi nodi DOM, esegue la funzione di cleanup di ogni effetto e butta via il suo stato. Se il componente ricompare più tardi, è un'istanza completamente nuova.

Genitori e figli

React renderizza dall'alto verso il basso ma esegue gli effetti dal basso verso l'alto. Quando un genitore e un figlio vengono montati insieme, gli effetti del figlio vengono eseguiti per primi, così l'effetto di un genitore può contare sul fatto che i suoi figli siano completamente pronti.

import { useEffect, useState } from 'react';

function Child() {
    console.log('render Child');
    useEffect(() => {
        console.log('Child effect');
        return () => console.log('Child cleanup');
    }, []);
    return <p>I am the child.</p>;
}

function Parent() {
    console.log('render Parent');
    useEffect(() => {
        console.log('Parent effect');
        return () => console.log('Parent cleanup');
    }, []);
    return <Child />;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Remove' : 'Add'} both</button>
            {show && <Parent />}
        </div>
    );
}

Il montaggio registra render Parent, render Child, Child effect, Parent effect. Premi Remove e le funzioni di cleanup vengono eseguite nell'ordine inverso: Parent cleanup, poi Child cleanup.

Fasi di render e commit

Ogni aggiornamento passa per due fasi:

1. Fase di render. React chiama i tuoi componenti per calcolare il nuovo JSX e lo confronta con il risultato precedente. Sullo schermo non cambia ancora nulla. React può mettere in pausa questo lavoro, eseguirlo due volte in StrictMode o buttarlo via, ed è per questo che il rendering deve essere puro: niente richieste, niente sottoscrizioni, niente modifiche a variabili esterne.
2. Fase di commit. React applica le differenze al DOM, collega i ref ed esegue le callback di useLayoutEffect, tutto prima che il browser disegni la pagina. Le callback di useEffect vengono eseguite dopo, di solito una volta che il browser ha disegnato la pagina. Quando l'aggiornamento è stato causato da un clic o da un altro input discreto, React le esegue invece subito dopo i layout effect, così il risultato è pronto prima dell'evento successivo.

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

export default function App() {
    const [count, setCount] = useState(0);
    console.log('1. render phase: computing JSX for', count);

    useLayoutEffect(() => {
        console.log('2. commit phase: layout effect, DOM updated, not painted yet');
    });

    useEffect(() => {
        console.log('3. effect: after the commit');
    });

    return <button onClick={() => setCount(count + 1)}>Render again ({count})</button>;
}

Ogni clic registra le tre righe nello stesso ordine. Questi effetti non hanno un array delle dipendenze, quindi vengono eseguiti dopo ogni rendering. Aggiungi [] come secondo argomento a entrambi e vengono eseguiti solo dopo il primo.

I metodi del ciclo di vita delle classi e i loro equivalenti con gli hook

I class component esprimono il ciclo di vita con metodi dal nome preciso. Li incontrerai nel codice più vecchio e negli error boundary, che richiedono ancora una classe.

Ecco una classe che registra ogni metodo mentre viene eseguito:

import { Component, useState } from 'react';

class Logger extends Component {
    constructor(props) {
        super(props);
        this.state = { clicks: 0 };
        console.log('constructor');
    }
    static getDerivedStateFromProps(props, state) {
        console.log('getDerivedStateFromProps');
        return null;
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log('shouldComponentUpdate');
        return true;
    }
    getSnapshotBeforeUpdate() {
        console.log('getSnapshotBeforeUpdate');
        return null;
    }
    componentDidMount() {
        console.log('componentDidMount');
    }
    componentDidUpdate() {
        console.log('componentDidUpdate');
    }
    componentWillUnmount() {
        console.log('componentWillUnmount');
    }
    render() {
        console.log('render');
        return <button onClick={() => this.setState({ clicks: this.state.clicks + 1 })}>Clicks: {this.state.clicks}</button>;
    }
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            {show && <Logger />}
            <button onClick={() => setShow(!show)} style={{ marginInlineStart: 8 }}>Toggle</button>
        </div>
    );
}

Il montaggio registra constructor, getDerivedStateFromProps, render, componentDidMount. Un clic registra getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate. Fai restituire false a shouldComponentUpdate e i clic smettono di aggiornare il pulsante: lo stato cambia, ma React salta il rendering. La pagina sui class component mostra come convertire una classe come questa in una funzione.

Ragiona in termini di sincronizzazione, non di ciclo di vita

La tabella degli hook è utile per leggere il codice vecchio, ma può portarti a scrivere effetti che copiano le abitudini delle classi, come un unico grande effetto "did mount" e un unico grande effetto "did update". Un effetto si legge meglio come "mantieni questa cosa esterna sincronizzata con questi valori": connettiti a roomId, e quando roomId cambia, disconnettiti e riconnettiti. Scrivi un effetto per ogni cosa che sincronizzi, elenca come dipendenze i valori che usa e lascia che sia React a decidere quando eseguirlo.