Render Props

Render Props

Render props is a pattern where a component receives a function as a prop and calls it to render its content. Instead of deciding what to render, it lets the parent component decide. Think of it like a restaurant that lets you bring your own ingredients.

This pattern gives you maximum flexibility for sharing behavior between components while keeping control over the final output.

Function as Children

The most common form passes a function as the children prop. The component calls this function with data, and the parent decides how to render it.

import { useState } from 'react'

function MouseTracker({ children }) {
  const [position, setPosition] = useState({ x: 0, y: 0 })

  const handleMouseMove = (e) => {
    setPosition({ x: e.clientX, y: e.clientY })
  }

  return (
    

      {children(position)}
    
  )
}

function App() {
  return (
    
      {({ x, y }) => (
        
Mouse is at ({x}, {y})
      )}
    
  )
}

MouseTracker handles the tracking logic. The parent component decides exactly how to display the coordinates. Total flexibility without tight coupling.

Practical Example

Here is a more realistic example — a data fetcher that gives you full control over loading, error, and success states.

function DataLoader({ url, children }) {
  const [state, setState] = useState({
    data: null,
    loading: true,
    error: null
  })

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => setState({ data, loading: false, error: null }))
      .catch(error => setState({ data: null, loading: false, error }))
  }, [url])

  return children(state)
}

function App() {
  return (
    
      {({ data, loading, error }) => {
        if (loading) return 
        if (error) return 
        return (
          

            {data.map(item => (
              
{item.name}
            ))}
          
        )
      }}
    
  )
}

The DataLoader handles fetching. Your component decides how to present each state. No more duplicate loading logic scattered across your app.

Render Props vs HOCs

Render props avoid the wrapper hell that HOCs can create. Your component tree stays flat and easy to debug. You also get explicit data flow — you can see exactly what data each component receives.

Like HOCs, render props work great with hooks. In fact, many custom hooks are essentially render props turned inside out. Understanding both patterns helps you read and write better React code.