The **render props pattern** is a way to reuse behavior by passing a [function](/javascript/functions-in-javascript) to a component and letting that [function](/javascript/functions-in-javascript) decide what UI should be rendered. Instead of a reusable component deciding exactly what its UI looks like, it provides data or behavior to the function supplied by its parent. ### Basic Idea ```text Reusable component ↓ manages state or behavior ↓ calls a function prop ↓ parent decides the UI ``` ### Simple Example Suppose we want reusable mouse-position logic: ```jsx import { useState } from "react"; function MouseTracker({ render }) { const [position, setPosition] = useState({ x: 0, y: 0 }); function handleMouseMove(event) { setPosition({ x: event.clientX, y: event.clientY }); } return (

{render(position)}

); } ``` Use it like this: ```jsx function App() { return ( (

Mouse position: {x}, {y}

)} /> ); } ``` `MouseTracker` owns the behavior: ```text Track mouse position ``` while the caller decides the presentation: ```text Show coordinates Draw an icon Move an element Display a chart ``` ### The Prop Does Not Have to Be Named render The important part is that a function is passed and called to produce [React](/courses/reactjs) content. For example: ```jsx {(data) => ( )} ``` Here `children` itself acts as a render prop. The component could implement: ```jsx function DataProvider({ children }) { const data = useSomeData(); return children(data); } ``` ### Why Was This Pattern Useful? Before [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback), sharing stateful behavior between components often required patterns such as: ```text Higher-Order Components Render props Container components ``` Render props made the reused data explicit at the point where the UI was defined. ### Drawback: Nested Render Functions Several render-prop components can create deeply nested [JSX](/courses/reactjs): ```jsx {(user) => ( {(permissions) => ( {(theme) => ( )} )} )} ``` This can become harder to read. Custom [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback) usually provide a flatter solution in modern function components: ```jsx const user = useAuth(); const permissions = usePermissions(); const theme = useTheme(); ``` ### Are Render Props Still Valid? Yes. Render props are still a valid composition technique and can be useful when a component intentionally gives consumers control over rendering. They are simply less common for general reusable stateful logic now that Hooks exist. ### Interview-Ready Answer The render props pattern reuses behavior by passing a function to a component and calling that function with data or actions. The reusable component manages the logic while the caller decides how the UI should look. Render props were especially common before Hooks and remain useful when consumers need explicit control over rendering.