React Fragment: <>...</> vs <Fragment> con esempi

Un React Fragment permette a un componente di restituire più elementi senza racchiuderli in un <div> in più. Scrivi <> prima del primo elemento e </> dopo l'ultimo, e React mette gli elementi direttamente nel genitore, senza alcun nodo proprio nella pagina.

function Greeting({ name }) {
    return (
        <>
            <h2 style={{ margin: 0 }}>Hello, {name}</h2>
            <p style={{ marginTop: 4 }}>You have 3 new messages.</p>
        </>
    );
}

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Linus" />
        </div>
    );
}

Ogni Greeting restituisce un titolo e un paragrafo uno accanto all'altro. Elimina le righe <> e </> e l'anteprima mostra invece un errore di build, perché ora la funzione prova a restituire due valori.

Perché un componente ha bisogno di una sola radice

JSX è un modo più comodo di scrivere chiamate di funzione. <h2>Hi</h2> viene compilato più o meno in jsx('h2', { children: 'Hi' }), un'unica espressione. Un'istruzione return può restituire un solo valore, quindi due tag fratelli senza nulla attorno sono come scrivere return a b: il compilatore si ferma con "Adjacent JSX elements must be wrapped in an enclosing tag".

Prima che esistessero i fragment, la soluzione era un <div> contenitore. Funziona, ma il div è un elemento reale. Compare nel DOM, partecipa al layout CSS, e alcuni genitori non lo accettano proprio come figlio. Un fragment soddisfa la regola della radice unica e poi sparisce.

Puoi vedere che non aggiunge nulla. L'esempio qui sotto renderizza gli stessi due elementi attraverso un fragment e attraverso un div, poi conta i figli diretti di ciascun contenitore.

import { useEffect, useRef } from 'react';

function WithFragment() {
    return (
        <>
            <span>A</span>
            <span>B</span>
        </>
    );
}

function WithDiv() {
    return (
        <div>
            <span>A</span>
            <span>B</span>
        </div>
    );
}

export default function App() {
    const first = useRef(null);
    const second = useRef(null);

    useEffect(() => {
        console.log('fragment box children:', first.current.children.length);
        console.log('div box children:', second.current.children.length);
    }, []);

    return (
        <div>
            <div ref={first}><WithFragment /></div>
            <div ref={second}><WithDiv /></div>
        </div>
    );
}

La console stampa 2 per il fragment, i due span, e 1 per il div, che li racchiude. In un contenitore flex o grid questa differenza decide se gli span vengono disposti come elementi o raggruppati in uno solo.

Sintassi breve e componente Fragment

Ci sono due modi di scrivere un fragment, e vengono compilati nella stessa cosa:

import { Fragment } from 'react';

// Short syntax, no import needed
<>
    <dt>React</dt>
    <dd>A library for building user interfaces</dd>
</>

// Long form
<Fragment>
    <dt>React</dt>
    <dd>A library for building user interfaces</dd>
</Fragment>

Usa <>...</> quasi ovunque. Ricorri a <Fragment> in un solo caso: quando il fragment ha bisogno di una key. La sintassi breve non accetta attributi, quindi <key={id}> non è JSX valido. Nel codice più vecchio potresti vedere anche <React.Fragment>; è lo stesso componente raggiunto tramite l'import di default React.

Fragment con key nelle liste

Quando renderizzi una lista con map, ogni elemento ha bisogno di una key perché React possa tracciarlo tra un rendering e l'altro (la pagina su liste e key spiega perché). Se ogni elemento è un gruppo di elementi invece di uno solo, la key va sul fragment, quindi ti serve la forma lunga.

Una lista di definizioni è il caso classico: ogni voce è un <dt> e un <dd>, e un <dl> dovrebbe contenerli direttamente.

import { Fragment, useState } from 'react';

const initialTerms = [
    { id: 1, term: 'Component', meaning: 'A function that returns UI.' },
    { id: 2, term: 'Prop', meaning: 'An input a parent passes to a component.' },
    { id: 3, term: 'State', meaning: 'Data a component remembers between renders.' },
];

export default function App() {
    const [terms, setTerms] = useState(initialTerms);

    return (
        <div>
            <dl>
                {terms.map((t) => (
                    <Fragment key={t.id}>
                        <dt style={{ fontWeight: 600 }}>{t.term}</dt>
                        <dd style={{ marginBottom: 8 }}>{t.meaning}</dd>
                    </Fragment>
                ))}
            </dl>
            <button onClick={() => setTerms([...terms].reverse())}>Reverse</button>
        </div>
    );
}

Clicca Reverse e le coppie si scambiano di posto come unità intere, perché ogni coppia ha la sua key. Anche un <div> attorno a ogni coppia accetterebbe una key, ed è HTML valido dentro un dl, ma aggiunge al markup un terzo livello che un fragment tiene fuori.

Fragment dentro le tabelle

Le tabelle sono il punto in cui un contenitore di troppo fa più danni. Un <tr> si aspetta celle <td> e <th> come figli diretti. Se un componente che restituisce più celle le racchiude in un <div>, il browser tratta il div come una strana cella unica e le celle al suo interno smettono di allinearsi con l'intestazione.

const cell = { border: '1px solid #ccc', padding: '4px 8px' };

function CellsInDiv() {
    return (
        <div>
            <td style={cell}>$4</td>
            <td style={cell}>In stock</td>
        </div>
    );
}

function CellsInFragment() {
    return (
        <>
            <td style={cell}>$4</td>
            <td style={cell}>In stock</td>
        </>
    );
}

export default function App() {
    return (
        <table style={{ borderCollapse: 'collapse' }}>
            <thead>
                <tr>
                    <th style={cell}>Item</th>
                    <th style={cell}>Price</th>
                    <th style={cell}>Stock</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style={cell}>Pen (div)</td>
                    <CellsInDiv />
                </tr>
                <tr>
                    <td style={cell}>Pen (fragment)</td>
                    <CellsInFragment />
                </tr>
            </tbody>
        </table>
    );
}

La riga con il fragment ha il prezzo sotto Price e la disponibilità sotto Stock. Nella riga con il div entrambe le celle sono schiacciate nella colonna Price e la colonna Stock è vuota. In sviluppo React registra anche un avviso che un <div> non può essere figlio di un <tr>; l'anteprima gira come una build di produzione, quindi salta quel controllo, e ciò che vedi qui è il layout rotto. Con il rendering lato server lo stesso errore può causare anche errori di hydration, perché il parser HTML del browser sposta il div fuori posto.

La stessa regola vale per <ul> e <ol>, che dovrebbero contenere elementi <li>, e per <select>, che dovrebbe contenere elementi <option>. Ogni volta che un componente restituisce pezzi che vanno direttamente dentro un genitore di questo tipo, restituisci un fragment.

Fragment o array

Un componente può anche restituire un array di elementi, e React li renderizza in ordine come un fragment. Ogni elemento di un array restituito ha bisogno della sua key, proprio come l'output di map, perché React tratta l'array come una lista:

function Cells() {
    return [<td key="price">$4</td>, <td key="stock">In stock</td>];
}

Funziona, ma è più rumoroso: virgole tra gli elementi, una key su ognuno e una parentesi quadra facile da perdere di vista quando il markup cresce. Usa un fragment per un gruppo fisso di elementi, e tieni gli array per ciò che sono per natura, il risultato di un map sui dati.

Cosa un fragment non può fare

Poiché un fragment non renderizza alcun elemento, non ha dove mettere una classe, uno stile, un gestore di eventi o un ref. <Fragment className="row"> non fa nulla di utile, e l'unica prop che React legge da un fragment è key. Quando devi dare uno stile al gruppo o ascoltare i clic su di esso, ti serve dopotutto un elemento reale, e va benissimo: scegline uno valido dove si trova, come un <tbody> per raggruppare righe o un <li> per contenere un elemento di lista.

Un fragment funziona ovunque funzioni un elemento, anche dentro il rendering condizionale: {show && <>...</>} mostra o nasconde l'intero gruppo in una volta.