Using Composition and Render Props instead of Context API

Component Structure

For this example, I created four nested components namely Main, First, Second and Third. Our final component structure should look like this:

Prop Drilling

If we are using prop drilling, our components will look like this:

I created WithPropDrilling.js file with the code above

Composition

I created another file, Composition.js and copied the code from WithPropDrilling.js. This time, I want to reshape the Main component. Let’s try something like this:

Child component names in First and Second components changed with {props.children}

Render Props

So far we could manage to pass components down without using Prop Drilling, Context API or Redux. But there is one other way to create a similar behavior. It’s called Render Props.

Conclusion

In this post, I tried to explain Composition and Render Props with easy examples. I want to give one more example of Render Props and add some final words. But since I’m working on a blog script lately, I want to publish the rest of this post in my blog. You can read the rest of this post in the link below

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Baris Ozcetin

Baris Ozcetin

Front End Software Engineer - Seattle