A good design of React components is the key to a maintainable and easy to change codebase.
In this sense, React offers a lot of design techniques like composition, hooks, higher-order components, render props, and more.
Render props is efficient to design components in a loosely coupled manner. Its essence consists in using a special prop (usually named render) that delegates the rendering logic to the parent component:
import Mouse from 'Mouse';
function ShowMousePosition() {
return (
<Mouse
render={({ x, y }) => <div>Position: {x}px, {y}px</div> }
/>
);
}
When using this pattern, sooner or later you’ll face a problem of nesting components within multiple render prop callbacks: render props callback hell.
In this post, I will describe 3 simple and efficient approaches on how to solve this problem: using class component, function composition or react-adopt tool.
#react #render prop #programming