In React, Render Props is a technique used to share logic between components using a function prop. Instead of using children or composition, a function is passed as a prop to render content dynamically. This approach works well with functional components and hooks.

Here’s an example of how to implement Render Props with functional components:

Example

import React, { useState } from 'react';

// The component using render props
const MouseTracker = ({ render }) => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setMousePosition({
      x: event.clientX,
      y: event.clientY,
    });
  };

  return (
    

      {render(mousePosition)}
    
  );
};

// Component that consumes the render props
const App = () => {
  return (
    

      
Mouse Tracker
       (
        
Mouse Position: {x}, {y}
      )}/>
    
  );
};

export default App;

Explanation:

• MouseTracker is a functional component that takes a render prop.
• The render prop is a function that receives the mouse position and returns JSX.
• The App component passes a function as the render prop, which displays the mouse's x and y coordinates.

This pattern allows for more flexibility in deciding how to render content based on logic inside the MouseTracker component.