---
title: Render Props
description: Share rendering logic between components by passing a function or component as a prop.
tokens: ~235
---

# Render Props

The Render Props pattern lets a component delegate **what to render** by accepting a prop that is a function (or a component). The caller controls the output while the component controls the data. A common example is `children` as a function.

## Example

```tsx
function TemperatureInput({ render }: { render: (temp: number) => React.ReactNode }) {
  const [value, setValue] = useState(0);

  return (
    <>
      <input type="number" value={value} onChange={(e) => setValue(+e.target.value)} />
      {render(value)}
    </>
  );
}

<TemperatureInput render={(celsius) => <p>Fahrenheit: {(celsius * 9) / 5 + 32}</p>} />

<TemperatureInput render={(celsius) => <p>Kelvin: {celsius + 273.15}</p>} />
```

`TemperatureInput` owns the input state. Each consumer decides how to display the converted value.

## Note on Hooks

Render props are used in modern React but are not very common. For many cases they can be replaced by custom hooks.