Excellent tutorial. Many tutorials try to cover render props and fail miserably because they do not do it in a systematic manner that answers the following questions What is a render prop? Why do we need it? How can I implement it? I think everyone should come here to understand what render props concept is and how to apply it. The best I can do to you is to subscribe to your channel and like the video and I have just done so. Thank you for saving me after hours of frustration in trying to understand this convoluted topic Love from Sweden!
Lmao I literally thought I was thinking out loud when I heard the Audio (oh snap) when you passed the state into the render function. 😂 The timing was spot on lol thanks this helped me a lot
@@abhiramsatpute From what I've understood. This is the old way of doing and that's what hooks are solving. Hence you shouldn't be looking to go for this approach if you're using newer versions of react. In fact, if you read the documentation, they have render-props as the "motivation" for moving away from it.
Very well explained. Thank you! I do have a question. What is the difference between the renderProps approach and perhaps just render the button component 2 times?
No big difference. The main help is it will help reduce redundancy in writing code again and again. So a major point while coding is to follow DRY principle, Do not Repeat Yourself. So this helps achieve that. And regarding if it helps in any performance boost, that I’m not sure of .
#Best explanation out there of the render props in react. I would like to check it in typescript or with function base components but this explanation I havent found it nor in colt steele neither by schwarzmuller
@@TheCodeCreative O really awesome. I was asked this in a mid level react interview and had nfi. =/ now did bit of reading not much but HOC arent intended to hold state where as the parent of the render prop does or some crap along those lines xD.
To subscribe to the channel: ruclips.net/channel/UCmOpHGj4JRWCdXhllVTZCVw
Oh snap. It's the best explanation I've met with the various number of videos dedicated to render props technic. Thanks a lot, man.
Great! Thanks for watching!
Extremely informative video. The "oh snap" at 7:55 was perfectly timed for my very noob realisation 😅
😃
This was such an informative video and I loved the pace at which you were going at. I subbed and turned notifications, you're a great teacher sir!
Thank you so much!!
Thanks for such a short and easy-to-follow explanation! After an hour of looking through docs, this video finally made it click for me.
Glad it was helpful!
same here
Excellent tutorial. Many tutorials try to cover render props and fail miserably because they do not do it in a systematic manner that answers the following questions
What is a render prop?
Why do we need it?
How can I implement it?
I think everyone should come here to understand what render props concept is and how to apply it. The best I can do to you is to subscribe to your channel and like the video and I have just done so.
Thank you for saving me after hours of frustration in trying to understand this convoluted topic
Love from Sweden!
Thanks Augustine for the great comment. Glad the video was helpful! Happy holidays and thanks for watching!
It took me quite a while to understand this concept until I discovered this video. Thank you very much for that :)
Glad it was helpful!
This is a fantastic video. Excellent explanations/examples and even a little humor. You need more subscribers!
Thanks for the comment Albert! More videos coming soon 👍🏻
Thank you! This one of the best explanation I found!
Excellent! Thanks for watching!
so glad to see some mature content & explanation!
👍🏻👍🏻👍🏻
Best renderprops explanation! It finally clicked and at the very beginning of your explanation too!!
Excellent, glad to hear!
Finally I got it.❤
Thanks for this clear explaination.
Glad it helped!
thank you!! i like the diagram stuff as well appreciate the effort. One of the few channels i hit the bell button for.
Great! Thanks for watching!
Thank you! Your explanation made this concept so much easier to comprehend :)
Glad it helped!
Thanks for making that so easy to understand. Good job filtering out any unnecessary extras from your example.
Glad it was helpful!
Ahhh makes sense now. Clear and concise. Subscribed.
Excellent! And thank you 👍🏻
Wow! Such a simple explanation of the complex thing! You are my hero 🙌
Glad it helped!
Guitars made this so easy to understand. Thanks
Rock on!
Great video / explanation! There aren't many videos out there on render props
Thanks for watching!
Wow! You made this so easy for me. Thank you
Glad I could help! Let me know what other topics you'd like to see.
Dude amaysing straight to the point new follower for sure
Great, thank you!
Lmao I literally thought I was thinking out loud when I heard the Audio (oh snap) when you passed the state into the render function. 😂 The timing was spot on lol thanks this helped me a lot
Thanks! 🤣
Best Explanation on RUclips..!!! THANX dude..
You're welcome!
🗣JOIN the Code Creative Facebook group! :
facebook.com/groups/1612600368887577
This was Great!
Perfect Explanation
Glad to hear!
Great explanation with a simple example. Thank you very much
You're welcome. Let me know what other topics you'd like to see 👍🏻
Great piece of Information. Thank you for making this concept such simple.
Thanks for watching!
Excellent explanation. Thank you. Subscribed!
📖 Download my FREE "Google Search Secrets for Developers" Cheat Sheet:
store.thecodecreative.com/google-secrets-cheat-sheet
Why am i only seeing this now. This guy deserves more views
Thank you!
Very well explained thanks! Could you explain the differences between this approach with render props and instead using re-usable hooks?
I also wanted to know the same, let me know if you found s a good resource to answer this!
Also, can this Wrapper be called a Higher Order Component?
@@abhiramsatpute From what I've understood. This is the old way of doing and that's what hooks are solving. Hence you shouldn't be looking to go for this approach if you're using newer versions of react. In fact, if you read the documentation, they have render-props as the "motivation" for moving away from it.
@@hectorserrano9314 i get it now, thanks!
@@hectorserrano9314 thanks a lot 👍
Very Well Explained!! Thank you.
You're welcome, thanks for watching!
Amazing explanation !!, thanks a lots.
Thanks for watching!
Best Explanation ever!!
Thanks for watching!
Thank you, the simplest explanation
Glad it was helpful!
Very good and clear explanation
Glad it was helpful!
Thank u So Much, I now have a clear idea about Render Props ! 🙏
Great, thanks for watching!
Thanks for the great explanation.
Thanks for watching!
Nice! Thx for sharing! I am using it with function base components :-)
Excellent, thanks for watching!
@@TheCodeCreative Thx for sharing! keep up the good work ;-)
@@user-he8qc4mr4i Thank you!
"oh snap" that was brilliant haha
😄
very nice practical example, thank you very much !
Glad it helped!
Thanks for the explanation.
Glad it was helpful!
This is a gem
👍🏻
That oh snap lmao,
great explanation thank you.
lol, thanks!
Very well explained. Thank you! I do have a question. What is the difference between the renderProps approach and perhaps just render the button component 2 times?
No big difference. The main help is it will help reduce redundancy in writing code again and again. So a major point while coding is to follow DRY principle, Do not Repeat Yourself. So this helps achieve that. And regarding if it helps in any performance boost, that I’m not sure of .
thanks bro your video very good and understand
Glad it helped!
Great. Would be good if you could compare HOC and render props. And when to use what
Absolutely, thanks for commenting Amit!
Awesome explanation
Glad to hear, thanks!
Thanks nice explanation
Thanks for watching!
So it's only useful in class components? Reusable hooks are much easier to understand.
Thank you
you're welcome!
React Render Props Made Simple! Thankyou
Thanks for watching!
Can the wrapper componet be a functional componet? Or does it have to be class base
It can be functional component, so no 'this' ans state is managed with the useState hook
At the end of the video, instead of creating 2 "Wrapper" components, could counter1 and counter2 be passed to the render method of one Wrapper?
it was a good explanation
Glad it was helpful!
Great tutorial, Can you please share your VSCode theme name and fonts? Thank you.
Thanks! Yes, it's Shades of Purple for the theme and Fira Code for the font.
Is this similar to "higher order components"? We are using a component, to accept a component, and return a component
wow..a bit complex topic explained in so simple way!
Glad it was helpful!
Is there any specific reason you defined the Wrapper as a class based component?
Great stuff :)
Thanks Magnus!
Why did you use a class based component for wrapper?
In order to use state, in this particular example
Great video
👍🏻
#Best explanation out there of the render props in react. I would like to check it in typescript or with function base components but this explanation I havent found it nor in colt steele neither by schwarzmuller
Thanks! Glad it was helpful 👍🏻
Do you think with hooks we can simplify this pattern?
Pretty useful
😀
Awesome explanation +++++++++++++++
Great, thanks for watching!
Thank you!!
You're welcome Suman. Thanks for watching!
what is your vs cdoe theme?
It's called "Shades of Purple"
Amazing lesson! But I'm a little confused about the difference between render props and higher order components
I’m very interested in render props then What is difference with children props?
God bless you!
👍🏻
Hey, what's the name of this theme?
Hi Joao, that's called "Shades of Purple"
having trouble answering difference between render props and hoc
I'm going to do a video on this soon.
@@TheCodeCreative O really awesome. I was asked this in a mid level react interview and had nfi. =/ now did bit of reading not much but HOC arent intended to hold state where as the parent of the render prop does or some crap along those lines xD.
Thanks aloooot
Thanks for watching!
is "render" a keyword in app.js?
nice
👍🏻
be fun if we could code together step by step though
This is same as Higher order components(HOC) concept.
lol "Ohh snap!"
😀
oohs snap... lol what was that about.
😀
dry means don't repeat yourself, but you repeated yourself with the result of complicating the code
Great explanation, thank you!
Glad it was helpful!
Thank you so much 😊😊😊😊
Thanks for watching!
nice
Thank you for watching! Let me know what other tutorials you'd like to see.