📦 Render Props Pattern in React

Render Props is a pattern in React where a component accepts a function as a prop and calls it to determine what to render. It helps in sharing logic between components using a reusable wrapper.

💡 1. What is a Render Prop?

A render prop is a function prop that returns JSX. The parent component provides rendering logic via this function.

🧪 2. Example: Mouse Tracker

class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (e) => {
    this.setState({ x: e.clientX, y: e.clientY });
  };

  render() {
    return (
      <div style={{ height: '100px' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

⚙️ 3. Usage Example

function App() {
  return (
    <MouseTracker render={({ x, y }) => (
      <h2>Mouse position: ({x}, {y})</h2>
    )} />
  );
}

✅ 4. Why Use Render Props?

• Encapsulates reusable logic (like state or effects)
• Flexible rendering with full control in consumer
• Better alternative to HOCs in some cases

🧠 5. Modern Alternatives

• React Hooks are now preferred for most use cases
• Still useful for class-based components or controlled rendering

📌 Tips

• Name your render prop consistently (e.g. render or children)
• Use prop drilling or context to pass additional shared state