Last updated: Apr 29, 2026

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

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.