Tutorials › React Modern Development › Render Props

Render Props

5 min read

Render Props pass a function as a prop to share logic while the consumer controls rendering. The component calls render(data) to produce output. Custom hooks have mostly replaced this pattern in modern React code.

Render Props Pattern

function Toggle({ render }) {
  const [on, setOn] = useState(false);
  return render({ on, toggle: () => setOn(!on) });
}

// Usage
 (
  
)} />

← Compound Components Next: Higher Order Components →

Quick Access

Render Props

Render Props Pattern