By WalkingTree April 23, 2021
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.
This blog is dedicated to yet another useful React hook “useReducer” in continuation to my previous blog, and…
React Hooks are the latest additions to the React block (React version 16.8) as they bring along great…
There is a favourite quote among social scientists that says, “It takes a village to raise a child”….