React › Render Props Pattern

What is a common naming alternative to render props, using children as a function instead?

Intermediate

Answer

Instead of a named prop called render, some components accept children as a function directly, which reads a bit more naturally in JSX since it looks like normal nested content, even though it is technically still a function being called by the parent component.

function DataProvider({ children }) {
  const [data, setData] = useState(null);
  useEffect(() => { fetchData().then(setData); }, []);
  return children(data);
}

<DataProvider>
  {(data) => (data ? <p>{data.name}</p> : <p>Loading</p>)}
</DataProvider>

Real-world example A shared DataProvider component uses children as a function so that using it in JSX still looks like normal nested content, even though it is actually calling a function to decide exactly what gets displayed.

Common follow-ups: Is there a real functional difference between using a prop called render versus using children as a function?;Which style do most modern component libraries prefer today?

Component Composition & Children Props;Custom Hooks