react-tunnels icon indicating copy to clipboard operation
react-tunnels copied to clipboard

Suboptimal approach to render props

Open yuchi opened this issue 6 years ago • 1 comments

Looks like the implementation of TunnelPlaceholder is treating render props as if they were full fledged components by using React.creatElement.

While this is cool because it let you expose a double API:

<TunnelPlaceholder>
  {props => <MyComponent {...props} />}
</TunnelPlaceholder>

// is equal to

<TunnelPlaceholder>
  {MyComponent}
</TunnelPlaceholder>

But this has a major caveat: when using the render-prop API every re-render will unmount and remount the whole placeholder children!

This is because between different render phases React thinks this is a completely new component and that it cannot reconciliate in any way.

What you actually want to achieve (probably) is something along the lines of what react-router does by exposing three different props:

  • render which is a render prop,
  • children which is a render prop,
  • component which is treated as a ComponentType or a Functional Stateless Component.

And you can have a look at how they implement their #render method too.

I’ll make a PR soon so that if you are ok with the approach you can accept it right away.

yuchi avatar May 03 '18 13:05 yuchi

Whooops! There’s a PR exactly for this! See #6

yuchi avatar May 03 '18 13:05 yuchi