Какова роль render props в React?

Паттерн render props позволяет компонентам гибко передавать рендеринг через функцию, переданную в качестве пропса. Это полезно, когда нужно передать динамическую логику или состояние в дочерние компоненты. Например:

import React, { useState } from 'react'; 

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });  
  const handleMouseMove = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });  
  };  
  
  return (
      <div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>      
      	{render(position)}    
      </div>  
  ); 
} 

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

Описание:

• MouseTracker — это компонент, который отслеживает координаты мыши и передает их в функцию через render проп.

• Вместо классового компонента используется функциональный компонент с хуком useState для хранения позиции мыши.

• handleMouseMove обновляет координаты x и y при движении мыши.

• В компоненте App, через render проп передается функция, которая определяет, как отобразить данные — в данном случае, показывая позицию мыши на экране.

Таким образом, функциональный подход с использованием хуков также легко позволяет реализовать паттерн render props, сохраняя логику и гибкость.