No React, Render Props é uma técnica usada para compartilhar lógica entre componentes usando uma propriedade de função. Em vez de usar filhos ou composição, uma função é passada como suporte para renderizar o conteúdo dinamicamente. Essa abordagem funciona bem com componentes funcionais e ganchos.

Aqui está um exemplo de como implementar Render Props com componentes funcionais:

Exemplo

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;

Explicação:

• MouseTracker é um componente funcional que usa uma propriedade de renderização.
• A prop render é uma função que recebe a posição do mouse e retorna JSX.
• O componente App passa uma função como suporte de renderização, que exibe as coordenadas xey do mouse.

Esse padrão permite mais flexibilidade na decisão de como renderizar o conteúdo com base na lógica dentro do componente MouseTracker.