Render props vs hook: quando vince quale

Vince il hook nella maggior parte dei casi, perché restituisce stato e funzioni senza imporre markup; vince la render prop quando la struttura deve restare al componente che la ospita, come in una lista virtualizzata o in un grafico.

Cosa restituisce ciascuno

Il hook restituisce dati e callback, e il chiamante scrive il JSX. La render prop riceve una funzione che il componente chiama con i suoi dati, e quella funzione restituisce il JSX: il controllo della struttura passa dall’altra parte.

function useHover() {
  const [hovered, setHovered] = useState(false);
  const bind = {
    onMouseEnter: () => setHovered(true),
    onMouseLeave: () => setHovered(false),
  };
  return { hovered, bind };
}

function Hover({ children }) {
  const [hovered, setHovered] = useState(false);
  const bind = {
    onMouseEnter: () => setHovered(true),
    onMouseLeave: () => setHovered(false),
  };
  return children({ hovered, bind });
}

La differenza in una tabella

Quando la render prop è l’unica scelta

Quando la libreria possiede le misure: una lista virtualizzata conosce l’altezza delle righe, un grafico conosce gli assi, un drag and drop conosce le maniglie. Il chiamante non può riscrivere quel markup, quindi la funzione che riceve i dati è l’unico contratto sensato.

Perché il hook ha vinto nei casi normali

Un hook non aggiunge un componente all’albero, non richiede una funzione nuova a ogni render e si compone con altri hook. Il tipo di ritorno si legge nella firma, e il test si scrive con renderHook senza montare nessun markup.

L’errore che costa un render

Una funzione freccia scritta dentro il JSX cambia identità a ogni passaggio: se il componente è avvolto in memo, il confronto sulle props fallisce e il sottoalbero si ridisegna. Con il hook lo stesso problema esiste sulle dipendenze, ma si vede in un punto solo.

Il comando

Per verificare entrambe le forme serve un test runner e una libreria di rendering; il comando installa i due pacchetti e lancia la suite.

npm install --save-dev vitest @testing-library/react
npx vitest run

Record vivi nel catalogo

Il catalogo contiene entrambe le forme: use-mouse-position-ref è un hook pubblicato come record, spotlight-card decide da sé il markup e riceve solo i contenuti, container-scroll-animation possiede la misura dello scroll. Sono record fra i 111.985 componenti.

Fonte e licenza

React e @testing-library/react sono distribuiti con licenza MIT. La documentazione React tiene ancora una pagina dedicata alle render props proprio perché il pattern non è sparito: gli hook coprono i casi in cui il markup non è in gioco.

La limitazione

Un hook non può restituire JSX, quindi una libreria che deve possedere il markup non può essere un hook: chi espone entrambe le forme costringe il chiamante a imparare due contratti e a scegliere senza un criterio unico.

Dove continuare

Le regole di chiamata sono in regole degli hook; quando derivare lo stato evita del tutto l’effetto è in stato derivato; il confronto con i composable di Vue è in Composition API di Vue 3.