Render props e schemi HOC
Passare una funzione di rendering come prop per iniettare l’interfaccia e racchiudere i componenti in Higher-Order Components per iniettare comportamenti senza modificare l’originale
Render props e schemi HOC è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Due classici pattern di riutilizzo
Prima degli hook, introdotti in React 16.8, per riutilizzare la logica con stato si ricorreva ai Higher-Order Components (HOC) oppure alle render props. Sono rari nel codice nuovo, ma li incontrerà ancora nei codebase legacy e in molte librerie.
Render props: l'idea
Un componente accetta una funzione come prop, generalmente denominata render o children, e la richiama passandole lo stato interno. Chi utilizza il componente decide cosa eseguire in base a quello stato.
function Mouse({ render }) {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => {
const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', handler);
return () => window.removeEventListener('mousemove', handler);
}, []);
return render(pos);
}
// Usage:
<Mouse render={({ x, y }) => <p>{x}, {y}</p>} />children come funzione
La prop children può essere anche una funzione: è lo stesso pattern, con uno JSX più pulito.
function Mouse({ children }) {
const [pos, setPos] = useState({ x: 0, y: 0 });
/* ... */
return children(pos);
}
<Mouse>
{({ x, y }) => <p>{x}, {y}</p>}
</Mouse>Higher-Order Components: l'idea
Un HOC è una funzione che accetta un componente e restituisce un nuovo componente con props o comportamento aggiuntivi. È stato utilizzato ampiamente in Redux con connect() e in React Router con withRouter().
function withMouse(Component) {
return function WithMouse(props) {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => {
const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', handler);
return () => window.removeEventListener('mousemove', handler);
}, []);
return <Component {...props} mouse={pos} />;
};
}
// Usage:
const Position = ({ mouse }) => <p>{mouse.x}, {mouse.y}</p>;
const EnhancedPosition = withMouse(Position);
<EnhancedPosition />Gli HOC si compongono tramite wrapping
Può concatenare più HOC, ma formano un «inferno di wrapper» difficile da analizzare.
// Multiple HOCs:
const Enhanced = withRouter(connect(mapState)(withTranslation()(MyComponent)));
// Equivalent in modern React:
// const Enhanced = MyComponent (reads from hooks: useRouter, useSelector, useTranslation)Render props o HOC
Render props: più esplicite, compatibili con i tipi e senza collisioni di nomi. HOC: più dichiarativi, fanno perdere i tipi statici dei componenti sottoposti a wrapping se non si presta attenzione e possono causare collisioni tra i nomi delle props.
Perché gli hook hanno sostituito entrambi
Gli hook personalizzati raggiungono lo stesso obiettivo con meno complessità: nessun componente wrapper, nessun argomento funzione annidato e nessuna contorsione con i tipi. Gli hook sono la risposta idiomatica del 2025.
// Custom hook equivalent of useMouse:
function useMouse() {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => {
const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
window.addEventListener('mousemove', handler);
return () => window.removeEventListener('mousemove', handler);
}, []);
return pos;
}
// Usage:
const { x, y } = useMouse();Quando le render props sono ancora preferibili
Per i componenti che devono iniettare markup, non solo stato, ad esempio le liste virtualizzate che eseguono il rendering degli elementi in posizioni specifiche, le render props sono ancora la soluzione naturale.
function VirtualList({ items, itemHeight, renderItem }) {
const [scrollTop, setScrollTop] = useState(0);
const start = Math.floor(scrollTop / itemHeight);
const visible = items.slice(start, start + 20);
return visible.map((item, i) => renderItem(item, start + i));
}
<VirtualList items={data} itemHeight={40} renderItem={(item, i) => (
<Row key={i} data={item} />
)} />Buone pratiche per gli HOC (quando necessari)
Se deve scrivere un HOC: copi i metodi statici (hoist-non-react-statics), inoltri le ref (React.forwardRef) e mantenga il displayName per DevTools.
Inoltro delle ref negli HOC
Per impostazione predefinita, gli HOC nascondono le ref: utilizzi forwardRef, così chi utilizza il componente può ancora accedere alla ref del componente sottostante.
function withLogger(Component) {
const Wrapped = React.forwardRef((props, ref) => {
console.log('rendering', Component.name);
return <Component {...props} ref={ref} />;
});
Wrapped.displayName = `withLogger(${Component.name})`;
return Wrapped;
}Riconoscere i pattern legacy
Incontrerà HOC e render props in: react-redux (API precedente), Apollo Client v2, react-router v5 (withRouter), Formik (Field) e styled-components (withTheme). Esegua il refactoring verso gli hook quando le API più recenti di queste librerie lo consentono.
Verifica rapida
Quale pattern hanno sostituito in gran parte gli hook per condividere la logica con stato tra componenti React?
Riepilogo: render props e HOC
Render props: funzione come prop che restituisce JSX, esplicita e compatibile con i tipi. HOC: funzione che avvolge un componente, utilizzata dalle librerie meno recenti (connect, withRouter). Gli hook personalizzati hanno sostituito entrambi per la logica con stato. Le render props restano preferibili quando deve iniettare markup personalizzato, ad esempio nelle liste virtualizzate. Quando scrive HOC: inoltri le ref, trasferisca i metodi statici e imposti displayName.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 41
- Lezioni
- 163
Domande Frequenti
La lezione «Render props e schemi HOC» è gratuita?
Sì — il testo completo di «Render props e schemi HOC» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Render props e schemi HOC»?
Passare una funzione di rendering come prop per iniettare l’interfaccia e racchiudere i componenti in Higher-Order Components per iniettare comportamenti senza modificare l’originale Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Render props e schemi HOC»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Componenti composti con Context
- Render props e schemi HOC
- Portal per modali e tooltip
- Error Boundary