javivelasco / javivelasco/react-tunnels
Suboptimal approach to render props
- Dominant language
- JavaScript
- Stars
- 395
- Forks
- 12
- PR merge metrics
- No merged PRs in 30d
Description
Looks like the implementation of `TunnelPlaceholder` is treating render props as if they were full fledged components [by using `React.creatElement`](https://github.com/javivelasco/react-tunnels/blob/5d636e3533777aee5d68094db3f1fd29ccd1cf10/src/TunnelPlaceholder.js#L39-L44).
While this is cool because it let you expose a double API:
```jsx
{props => }
// is equal to
{MyComponent}
```
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](https://github.com/ReactTraining/react-router/blob/4b61484ec9eea4bc3a2eb36028c47934414542ae/packages/react-router/modules/Route.js#L19-L21) 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](https://github.com/ReactTraining/react-router/blob/4b61484ec9eea4bc3a2eb36028c47934414542ae/packages/react-router/modules/Route.js#L113-L127) too.
I’ll make a PR soon so that if you are ok with the approach you can accept it right away.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in src/TunnelPlaceholder.js, especially the React.createElement implementation at lines 39-44, and compare the render approach with the referenced react-router Route implementation. Done means render-prop updates no longer unmount and remount placeholder children while the existing component and render-prop APIs remain supported.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100