What is the Render Props pattern and when would you still use it?

// Render props — component shares state by calling a function prop
function MouseTracker({ render }) {
  const [pos, setPos] = useState({ x: 0, y: 0 });
  return (
    
 setPos({ x: e.clientX, y: e.clientY })}>
      {render(pos)} {/* caller decides what to render */}
    
  );
}

// Usage
 (
  
Mouse at {x}, {y}
)} />

// children as a function (same pattern)

  {({ x, y }) => }

Render props vs custom hooks:

• Custom hooks replaced most render prop use cases (simpler, less nesting)
• Render props still shine when you need to inject JSX into a specific DOM location managed by the component
• Libraries like React Table, Downshift, and Formik use render props for maximum flexibility