javivelasco / javivelasco/react-tunnels

Suboptimal approach to render props

Open
#8 1 comment 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.