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