Frontend Academy · Lektion

Render Props- og HOC-mønstre

Videregiv en render-funktion som prop for at indsætte UI, og omslut komponenter i Higher-Order Components for at indsætte funktionalitet uden at ændre originalen.

Lektion 2 af 413 trin

Render Props- og HOC-mønstre er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

To klassiske mønstre til genbrug

Før hooks, altså før React 16.8, betød genbrug af logik med tilstand enten Higher-Order Components (HOCs) eller render props. De er sjældne i ny kode, men du møder dem stadig i ældre kodebaser og mange biblioteker.

Render props – idéen

En komponent modtager en funktion som prop, ofte med navnet render eller children, og kalder den med sin interne tilstand. Brugeren bestemmer, hvad der skal gengives med denne tilstand.

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 som funktion

Proppen children kan også være en funktion – det er det samme mønster med renere JSX.

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 – idéen

En HOC er en funktion, der modtager en komponent og returnerer en ny komponent med ekstra props eller adfærd. Den blev brugt intensivt i Redux' connect() og React Routers 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 />

HOC'er kombineres ved indpakning

Du kan stable HOC'er – men de skaber et »indpakningshelvede«, som er svært at fejlfinde.

// Multiple HOCs:
const Enhanced = withRouter(connect(mapState)(withTranslation()(MyComponent)));
// Equivalent in modern React:
// const Enhanced = MyComponent (reads from hooks: useRouter, useSelector, useTranslation)

Render props eller HOC

Render props er mere eksplicitte, venlige over for typer og uden navnekollisioner. HOC'er er mere deklarative, mister statiske typer på indpakkede komponenter, hvis du ikke passer på, og der kan opstå kollisioner mellem prop-navne.

Hvorfor hooks erstattede begge mønstre

Brugerdefinerede hooks opfylder det samme mål med mindre ceremoniel kode: ingen omsluttende komponenter, ingen indlejrede funktionsargumenter og ingen typeakrobatik. Hooks er det idiomatiske svar i 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();

Hvornår render props stadig er bedst

Til komponenter, der skal indsætte markup og ikke kun tilstand – f.eks. virtualiserede lister, der gengiver elementer på bestemte positioner – er render props stadig det naturlige valg.

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

Bedste praksis for HOC'er (når det er nødvendigt)

Hvis du er nødt til at skrive en HOC: kopiér statiske metoder (hoist-non-react-statics), videresend refs (React.forwardRef), og behold displayName til DevTools.

Videresendelse af refs i HOC'er

HOC'er skjuler som standard refs – brug forwardRef, så brugerne stadig kan tilgå ref'en på den underliggende komponent.

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

Genkendelse af ældre mønstre

Du møder HOC'er og render props i react-redux, som har en ældre API, Apollo Client v2, react-router v5 med withRouter, Formik med Field og styled-components med withTheme. Refaktorér til hooks, når de nyere API'er i disse biblioteker gør det muligt.

Hurtigt tjek

Hvilke mønstre har hooks i vid udstrækning erstattet til deling af logik med tilstand mellem React-komponenter?

Besvar den i den interaktive lektion

Opsummering: Render Props og HOC'er

Render props er en funktion som prop, der returnerer JSX, og de er eksplicitte og venlige over for typer. HOC'er er funktioner, der omslutter en komponent, og de bruges af ældre biblioteker som connect og withRouter. Brugerdefinerede hooks har erstattet begge mønstre til logik med tilstand. Render props er stadig bedst, når du skal indsætte tilpasset markup, f.eks. i virtualiserede lister. Når du skriver HOC'er: brug forwardRef, kopiér statiske metoder, og angiv displayName.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Render Props- og HOC-mønstre” gratis?

Ja — hele teksten til “Render Props- og HOC-mønstre” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Render Props- og HOC-mønstre”?

Videregiv en render-funktion som prop for at indsætte UI, og omslut komponenter i Higher-Order Components for at indsætte funktionalitet uden at ændre originalen. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Render Props- og HOC-mønstre”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Frontend Academy