By WalkingTree  April  23,  2021

An alternative to Props Drilling in React

React has a unidirectional pattern for data flow and it is followed strictly. In React, the child component cannot pass data to the parent component and the data only flows in one way, i.e from the parent to the child. To modify, the child shares state between two child components, we use props.

But there are situations where the Header component doesn’t make use of the props but passes them to the Profile component and this situation is called props drilling. The problem with props drilling is that things can get messy, and debugging might become difficult as well. A good solution can be to reach out for the context API or Redux, but we could simply use composition to our advantage. 

Composition is a way of assembling components. React gives a powerful tool that helps with composition – children-props. Let’s just say, the child’s prop is available on every component. The Header component is a wrapper for the children. This way, we can refactor our App component render in App.js. 

This pattern helps build more scalable reusable components, especially when building a tool, a library, or components used by a large number of people.

Read on to know more about Composition in React framework.

React Blogs

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.