"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h2: "h2", h3: "h3", h4: "h4", img: "img", p: "p", pre: "pre", span: "span", strong: "strong", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Like other React Developers, you often find yourself dealing with the common challenge of managing state and data flow efficiently." }), "\n", _jsxs(_components.p, { children: ["One common issue that came in is ", _jsx(_components.strong, { children: "Prop Drilling," }), " where data is being passed from parent to child and deeply nested child components making all the components depend on each other. You can learn more about ", _jsx(_components.a, { href: "https://programmingly.dev/the-beginners-guide-to-master-props-in-react", children: "Props in React here" }), "."] }), "\n", _jsx(_components.p, { children: "It makes our code hard to manage, components are no longer reusable, and leads to bad code." }), "\n", _jsx(_components.p, { children: "In this article, I’ll share some practical tips and tricks for writing cleaner code and avoiding prop drilling with code examples." }), "\n", _jsx(_components.h2, { children: "What is Prop Drilling?" }), "\n", _jsx(_components.p, { children: "The term Prop Drilling often means, when we want specific data from a parent component to a deeply nested component tree, and that data is being passed from each component in that tree and reaches a destination component." }), "\n", _jsx(_components.p, { children: "This practice led us to complexity, hard to maintain, and made our components fully depend on each other which also destroyed the re-useability of components." }), "\n", _jsx(_components.p, { children: "Take a look at the below image, the blue boxes represent the components hierarchy tree that passes the same props for the destination component." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://iukfpyemhzrbbamzihpp.supabase.co/storage/v1/object/public/assets/blog-thumbnail-1753358063121", alt: "prop drilling" }) }), "\n", _jsx(_components.h4, { children: "Example Scenario:" }), "\n", _jsx(_components.p, { children: "Imagine you’re building an e-commerce application where users can browse products, view details, and add to a cart. The product data passed through each component from the parent to the deeply nested child component to serve product data. Here is an example:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Top-level component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ProductPage" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " products" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Product 1'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'$10'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Product 2'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'$20'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ];" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ProductList" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " products" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{products} />" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Intermediate component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ProductList" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "products" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "ul" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {products." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "product" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ProductCard" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{product.id} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "product" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{product} />" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ))}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Deeply nested component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ProductCard" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "product" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "li" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{product.name}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{product.price}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ProductDetails" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " product" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{product} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Deeply nested component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ProductDetails" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "product" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h3" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{product.name}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{product.price}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Details: Detailed description about the product." })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["If you see this example code, you’ll find it similar to the above image, where product data passed from ", _jsx(_components.code, { children: "ProductPage" }), " to ", _jsx(_components.code, { children: "ProductList" }), " then ", _jsx(_components.code, { children: "ProductCard" }), " and reaches the destination component at ", _jsx(_components.code, { children: "ProductDetails" }), " ."] }), "\n", _jsx(_components.h3, { children: "How to avoid Prop Drilling and writing Clean Code?" }), "\n", _jsx(_components.p, { children: "In the above example, you’ll see how data is drilled down from parent to deeply nested child component, which is now a bad practice and leads to so many bugs and is hard to maintain." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "The actual solution proposed for this problem is to make the state global." }), " This is what we call separation of concern, in which functionality is kept separate from the UI and used whenever it is needed."] }), "\n", _jsx(_components.p, { children: "To solve the prop drilling problem and implement the global state management solution, Here are some solutions with an example:" }), "\n", _jsx(_components.h3, { children: "1) Context API" }), "\n", _jsx(_components.p, { children: "The Context API in React provides a way to share state to multiple components without passing the props through each component." }), "\n", _jsx(_components.p, { children: "In Context API, functionality is managed in one place and the same data is consumed by only those components that need it." }), "\n", _jsx(_components.p, { children: "See this example below to understand how Context API solves this problem with a simpler more easier solution:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Create a context for the product" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " ProductContext" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "createContext" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ProductProvider" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "children" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "products" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ProductContext.Provider" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " value" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{products}>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {children}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Top-level component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ProductPage" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " products" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Product 1'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'$10'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Product 2'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'$20'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ];" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ProductProvider" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " products" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{products}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ProductList" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Intermediate component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ProductList" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ProductContext.Consumer" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "products" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "ul" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {products." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "product" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ProductCard" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{product.id} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "product" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{product} />" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ))}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " )}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Deeply nested component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ProductCard" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "product" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "li" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{product.name}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{product.price}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ProductDetails" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ProductDetails" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ProductContext.Consumer" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "products" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " product" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " products." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "find" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "p" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " p.id " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "); " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Example to find a specific product" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h3" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{product.name}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{product.price}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Details: Detailed description about the product." })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["In this example, ", _jsx(_components.code, { children: "ProductContext" }), " is used for sharing product data to each component where needed without drilling the props deeply."] }), "\n", _jsx(_components.h4, { children: "2) Component Composition" }), "\n", _jsxs(_components.p, { children: ["Another great way to avoid prop drilling is by using the react best practice that involves the creation of nested smaller but reusable components to build complex UI. This is like the ", _jsx(_components.a, { href: "https://programmingly.dev/atomic-design-pattern-how-to-set-up-your-reactjs-project-structure", children: "atomic design pattern" }), " i have explained previously where we think of each element as an atom and combine them to build widgets, modules, and so on."] }), "\n", _jsx(_components.p, { children: "This method helps to logically group related data and functionality. It helps us write cleaner code and reduce the need for prop drilling too." }), "\n", _jsx(_components.p, { children: "By using Component Composition, imagine a user wants to see its info and orders on the User Dashboard Page." }), "\n", _jsx(_components.p, { children: "Here is how we can implement this example using Component Composition:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Mock Data" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " user" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Alice Doe\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " email: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"alice@example.com\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " orders" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", item: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Laptop\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"$999\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", status: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Delivered\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", item: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Headphones\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"$199\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", status: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Shipped\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "3" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", item: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Smartphone\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"$799\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", status: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Processing\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ];" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Main Dashboard Component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Dashboard" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">User Dashboard" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "/* Compose User Profile and Order List */" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "UserProfile" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " user" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{user} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "OrderHistory" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " orders" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{orders} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // User Profile Component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " UserProfile" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "user" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">User Profile" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "><" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "strong" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Name: {user.name}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "><" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "strong" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Email: {user.email}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Order History Component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " OrderHistory" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "orders" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Order History" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "ul" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {orders." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "order" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "OrderItem" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{order.id} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "order" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{order} />" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ))}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Order Item Component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " OrderItem" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "order" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "li" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "><" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "strong" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Item: {order.item}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "><" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "strong" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Price: {order.price}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "><" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "strong" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Status: {order.status}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Dashboard;" })] })] }) }) }), "\n", _jsx(_components.h3, { children: "3) Extract State Logic into Custom Hook" }), "\n", _jsx(_components.p, { children: "In the above example, you see how data can be managed globally in one place in Context API." }), "\n", _jsx(_components.p, { children: "The only difference between custom hook way and Context API is Context is used to manage globally and components must be wrapped with Providers to share data." }), "\n", _jsx(_components.p, { children: "But Custom Hooks work well with less data, like Fetching User Data and servers from one place. Here data is centralized but no wrapper is needed." }), "\n", _jsx(_components.p, { children: "Whole logic is maintained in one place which is shared across different components to avoid prop drilling and keep code clean and non-repetitive." }), "\n", _jsx(_components.p, { children: "Here is how we can achieve the same result with Custom Hook by extending Component Composition:" }), "\n", _jsx(_components.h4, { children: "1) Creating Custom Hook:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Custom Hook" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { useState } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Custom Hook: useDashboardData" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useDashboardData" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "user" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setUser" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Alice Doe\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " email: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"alice@example.com\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " });" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "orders" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setOrders" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "([" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", item: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Laptop\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"$999\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", status: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Delivered\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", item: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Headphones\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"$199\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", status: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Shipped\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { id: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "3" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", item: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Smartphone\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"$799\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", status: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Processing\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ]);" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { user, orders, setUser, setOrders };" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " useDashboardData;" })] })] }) }) }), "\n", _jsx(_components.h4, { children: "2) Sharing data between different Components:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " useDashboardData " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./useDashboardData\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "; " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Import Custom Hook" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Dashboard" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "user" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "orders" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useDashboardData" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(); " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// State and data from the custom hook" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">User Dashboard" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "UserProfile" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " user" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{user} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "OrderHistory" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " orders" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{orders} />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " UserProfile" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "user" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">User Profile" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "strong" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Name: {user.name}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "strong" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Email: {user.email}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " OrderHistory" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "orders" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Order History" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "ul" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {orders." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "order" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "OrderItem" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{order.id} " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "order" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{order} />" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ))}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " OrderItem" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "order" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "li" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "strong" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Item: {order.item}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "strong" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Price: {order.price}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "strong" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Status: {order.status}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Dashboard;" })] })] }) }) }), "\n", _jsx(_components.h2, { children: "Wrapping thing" }), "\n", _jsx(_components.p, { children: "React can be an amazing library, we can create or break things. But with the right knowledge and best practices, we can build amazing apps by writing clean code and managing the state very easily." }), "\n", _jsx(_components.p, { children: "In this article, I tried to explain 3 different ways to avoid prop drilling problems along with best practices for writing clean code." }), "\n", _jsx(_components.p, { children: "By focusing on these methods we’ll not only improve the performance of applications but also make the development process more efficient and enjoyable." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };