Use a Render Prop
cdb.reacttraining.com
Use a Render Prop
1–10 of 35 posts
Re: Use a Render Prop
#2Neat! Didn't know about this concept. Any more examples of this being used somewhere?
Re: Use a Render Prop
#3Neat! Didn't know about this concept. Any more examples of this being used somewhere?
The technique discussed is a kind of inversion of control, a concept which has a pretty long history (~30 years according to the wikipedia article). I've been writing React for a couple of months now and had settled on this method without knowing it was considered new or in anyway unusual.
Re: Use a Render Prop
#4Neat! Didn't know about this concept. Any more examples of this being used somewhere?
Using ReasonReact with ReasonML sort of forces you down this path due to its strong type system. It’s quite lovely once you get used to it.
Re: Use a Render Prop
#5Even using the term "higher order" that seems like a very OOP solution, while render props is very functional and thus a better idiom for JavaScript.
Re: Use a Render Prop
#6What would the code look like to use this approach for Redux.
Could Redux boilerplate be reduced?
Re: Use a Render Prop
#7Even using the term "higher order" that seems like a very OOP solution, while render props is very functional and thus a better idiom for JavaScript.
"Higher order" sounds pretty functional to me. Higher order functions and all. Although I guess the term higher order function is hardly even spoken of in real functional languages because they're taken for granted.
Re: Use a Render Prop
#8As a note, it is not safe for a component using a render prop to implement shouldComponentUpdate. The problem is that the render prop may close over data that the component is unaware of. The Asana core components used to the use the render prop pattern until we discovered that issue and also realized it made tests harder to write. Now we use React.cloneElement instead.
Re: Use a Render Prop
#9What would the code look like to use this approach for Redux. Could Redux boilerplate be reduced?
Hi, I'm a Redux maintainer.
First, could you clarify what _you_ mean by "Redux boilerplate" in this case? The phrase gets thrown around frequently, but it means different things to different people. Just yesterday, I tweeted some thoughts on how you can use as much abstraction as you want with Redux, and linked to examples of reusable action creator/reducer logic [0]. I also wrote a pair of blog posts that discuss the intent behind Redux's design [1], and why common usage patterns exist [2].
It's worth noting that React-Redux was originally written using a "render props"-type approach, but was changed to be a Higher-Order Component before it hit 1.0. In fact, there was a thread a month ago that discussed render props-based reimplementations of `connect` [3], and in that thread I linked to several recent examples of people reinventing that wheel as well as prior discussion of why React-Redux wound up as a HOC.
Finally, earlier this year I opened up an issue to discuss ways that we can improve both the "getting started" experience for Redux users, as well as build more powerful abstractions on top of Redux [4]. I'd love more feedback and ideas (and ideally people from the community volunteering to help us make things better).
[0] https://twitter.com/acemarke/status/928453589739155456
[1] http://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao...
[2] http://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao...
Re: Use a Render Prop
#10Neat! Didn't know about this concept. Any more examples of this being used somewhere?
Other packages have been doing this for a while: react-virtualized, react-motion, react-form ... I wonder why the topic pops up seemingly every week