¡Stop passing props between React components! Apply composition pattern

Passing props between React components is a common practice when building complex applications. While it works well for small-scale applications, it can quickly become unmanageable as the application grows larger. Passing props down several levels of components can make it difficult to maintain and debug the code. In this article, we’ll explore the composition pattern and how it can help you organize your code and reduce the number of props you need to pass between components. By the end of this article, you’ll have a better understanding of the composition pattern and how to apply it to your React applications. <h2>Dependencies:</h2> Styled Components for fast styling: <blockquote> npm install styled-components npm install -D @types/styled-components </blockquote> <h2>Bad: Inheritance Pattern</h2> In this example we will show a grid of products brought from a fake api, each product will have a thumbnail, title, description, rating, stock and price. <h2>Getting products</h2> First, we’ll create a custom hook to get the products and load status and error if the fetch fails. In this example I’m using typescript, the schema I’m importing is just a typescript interface to define the product, but you can use javascript if you want. <a href="https://medium.com/@flavtech/stop-passing-props-between-react-components-apply-composition-pattern-15b132bf0686">Visit Now</a>