Какова роль 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;

Описание:

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

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

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

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

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