react-tunnels
react-tunnels copied to clipboard
Suboptimal approach to render props
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.
Whooops! There’s a PR exactly for this! See #6