"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", h1: "h1", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Alert, Badge} = _components; if (!Alert) _missingMdxReference("Alert", true); if (!Badge) _missingMdxReference("Badge", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { id: "advanced-react-patterns-for-scalable-applications", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#advanced-react-patterns-for-scalable-applications", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Advanced React Patterns for Scalable Applications"] }), "\n", _jsx(_components.p, { children: "React patterns are reusable solutions to common problems in React development. In this guide, we'll explore advanced patterns that will help you build more maintainable and scalable applications." }), "\n", _jsxs(_components.h2, { id: "compound-components-pattern", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#compound-components-pattern", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Compound Components Pattern"] }), "\n", _jsx(_components.p, { children: "The compound components pattern allows you to create components that work together to form a complete UI. This pattern is great for building flexible and reusable component APIs." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// components/Tabs.tsx" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "React" }), ", { createContext, useContext, useState } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "TabsContextType" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "activeTab" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "setActiveTab" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "tab" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" })] }), ") =>"] }), " ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "TabsContext" }), " = createContext<", _jsx(_components.span, { className: "hljs-title class_", children: "TabsContextType" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ">(", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ")\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "Tabs" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["{ children, defaultTab }: { children: React.ReactNode; defaultTab: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), " }"] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [activeTab, setActiveTab] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(defaultTab)\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "TabsContext.Provider" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{{" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "activeTab" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "setActiveTab" }), " }}>"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"tabs\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "TabList" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{ children }: { children: React.ReactNode }" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"tab-list flex border-b\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "Tab" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["{ value, children }: { value: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "; children: React.ReactNode }"] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " context = ", _jsx(_components.span, { className: "hljs-title function_", children: "useContext" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "TabsContext" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!context) ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Tab must be used within Tabs'" }), ")\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { activeTab, setActiveTab } = context\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " isActive = activeTab === value\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{" }), "`", _jsx(_components.span, { className: "hljs-attr", children: "tab" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "px-4" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "py-2" }), " ${", _jsx(_components.span, { className: "hljs-attr", children: "isActive" }), " ? '", _jsx(_components.span, { className: "hljs-attr", children: "border-b-2" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "border-blue-500" }), "' ", _jsx(_components.span, { className: "hljs-attr", children: ":" }), " ''}`}\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " setActiveTab(value)}\n >\n {children}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "TabPanels" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{ children }: { children: React.ReactNode }" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"tab-panels\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "TabPanel" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["{ value, children }: { value: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "; children: React.ReactNode }"] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " context = ", _jsx(_components.span, { className: "hljs-title function_", children: "useContext" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "TabsContext" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!context) ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'TabPanel must be used within Tabs'" }), ")\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { activeTab } = context\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (activeTab !== value) ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"tab-panel p-4\"" }), ">"] }), "{children}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n}\n"] }) }), "\n", _jsxs(_components.h3, { id: "usage-example", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#usage-example", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Usage Example"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// Usage" }), "\n<", _jsx(_components.span, { className: "hljs-title class_", children: "Tabs" }), " defaultTab=", _jsx(_components.span, { className: "hljs-string", children: "\"tab1\"" }), ">\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "TabList" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Tab" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"tab1\"" }), ">"] }), "Tab 1", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Tab" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"tab2\"" }), ">"] }), "Tab 2", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Tab" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"tab3\"" }), ">"] }), "Tab 3", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "TabPanels" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "TabPanel" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"tab1\"" }), ">"] }), "Content for Tab 1", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "TabPanel" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"tab2\"" }), ">"] }), "Content for Tab 2", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "TabPanel" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"tab3\"" }), ">"] }), "Content for Tab 3", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n\n"] }) }), "\n", _jsxs(_components.h2, { id: "custom-hooks-pattern", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#custom-hooks-pattern", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Custom Hooks Pattern"] }), "\n", _jsx(_components.p, { children: "Custom hooks allow you to extract component logic into reusable functions. They're perfect for sharing stateful logic between components." }), "\n", _jsxs(_components.h3, { id: "uselocalstorage-hook", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#uselocalstorage-hook", children: _jsx(_components.span, { className: "icon icon-link" }) }), "useLocalStorage Hook"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// hooks/useLocalStorage.ts" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useState, useEffect } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " useLocalStorage(", _jsx(_components.span, { className: "hljs-attr", children: "key" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "initialValue" }), ": T) {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Get from local storage then parse stored json or return initialValue" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [storedValue, setStoredValue] = useState(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (", _jsx(_components.span, { className: "hljs-keyword", children: "typeof" }), " ", _jsx(_components.span, { className: "hljs-variable language_", children: "window" }), " === ", _jsx(_components.span, { className: "hljs-string", children: "'undefined'" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " initialValue\n }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " item = ", _jsx(_components.span, { className: "hljs-variable language_", children: "window" }), ".", _jsx(_components.span, { className: "hljs-property", children: "localStorage" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getItem" }), "(key)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " item ? ", _jsx(_components.span, { className: "hljs-title class_", children: "JSON" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "parse" }), "(item) : initialValue\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "log" }), "(error)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " initialValue\n }\n })\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Return a wrapped version of useState's setter function that persists the new value to localStorage" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "setValue" }), " = (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "value" }), ": T | ((val: T) => T)"] }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Allow value to be a function so we have the same API as useState" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " valueToStore = value ", _jsx(_components.span, { className: "hljs-keyword", children: "instanceof" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Function" }), " ? ", _jsx(_components.span, { className: "hljs-title function_", children: "value" }), "(storedValue) : value\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setStoredValue" }), "(valueToStore)\n \n ", _jsx(_components.span, { className: "hljs-comment", children: "// Save to local storage" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (", _jsx(_components.span, { className: "hljs-keyword", children: "typeof" }), " ", _jsx(_components.span, { className: "hljs-variable language_", children: "window" }), " !== ", _jsx(_components.span, { className: "hljs-string", children: "'undefined'" }), ") {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "window" }), ".", _jsx(_components.span, { className: "hljs-property", children: "localStorage" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "setItem" }), "(key, ", _jsx(_components.span, { className: "hljs-title class_", children: "JSON" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "stringify" }), "(valueToStore))\n }\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "log" }), "(error)\n }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " [storedValue, setValue] ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), "\n}\n"] }) }), "\n", _jsxs(_components.h3, { id: "usedebounce-hook", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#usedebounce-hook", children: _jsx(_components.span, { className: "icon icon-link" }) }), "useDebounce Hook"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// hooks/useDebounce.ts" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useState, useEffect } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " useDebounce(", _jsx(_components.span, { className: "hljs-attr", children: "value" }), ": T, ", _jsx(_components.span, { className: "hljs-attr", children: "delay" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), "): T {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [debouncedValue, setDebouncedValue] = useState(value)\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "useEffect" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " handler = ", _jsx(_components.span, { className: "hljs-built_in", children: "setTimeout" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setDebouncedValue" }), "(value)\n }, delay)\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-built_in", children: "clearTimeout" }), "(handler)\n }\n }, [value, delay])\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " debouncedValue\n}\n"] }) }), "\n", _jsxs(_components.h3, { id: "useasync-hook", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#useasync-hook", children: _jsx(_components.span, { className: "icon icon-link" }) }), "useAsync Hook"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// hooks/useAsync.ts" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useState, useEffect, useCallback } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "AsyncState" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": T | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "boolean" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Error" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " useAsync(\n ", _jsx(_components.span, { className: "hljs-attr", children: "asyncFunction" }), ": ", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Promise" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "dependencies" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "any" }), "[] = []\n) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [state, setState] = useState<", _jsx(_components.span, { className: "hljs-title class_", children: "AsyncState" }), ">({\n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ",\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " execute = ", _jsx(_components.span, { className: "hljs-title function_", children: "useCallback" }), "(", _jsx(_components.span, { className: "hljs-title function_", children: "async" }), " () => {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setState" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), " })\n \n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " data = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "asyncFunction" }), "()\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setState" }), "({ data, ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), " })\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setState" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "loading" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": error ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Error" }), " })\n }\n }, dependencies)\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "useEffect" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "execute" }), "()\n }, [execute])\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ...state, execute }\n}\n"] }) }), "\n", _jsxs(_components.h2, { id: "render-props-pattern", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#render-props-pattern", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Render Props Pattern"] }), "\n", _jsx(_components.p, { children: "The render props pattern allows you to share code between components using a prop whose value is a function." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// components/DataFetcher.tsx" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useState, useEffect } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "DataFetcherProps" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "url" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "children" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "data" }), ": {\n data: T | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n loading: ", _jsx(_components.span, { className: "hljs-built_in", children: "boolean" }), "\n error: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n }"] }), ") =>"] }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "React" }), ".", _jsx(_components.span, { className: "hljs-property", children: "ReactNode" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "DataFetcher" }), "({ url, children }: ", _jsx(_components.span, { className: "hljs-title class_", children: "DataFetcherProps" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [data, setData] = useState(", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [loading, setLoading] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [error, setError] = useState<", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ">(", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ")\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "useEffect" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "fetchData" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setLoading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " response = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "fetch" }), "(url)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!response.", _jsx(_components.span, { className: "hljs-property", children: "ok" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Failed to fetch data'" }), ")\n }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " result = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " response.", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "()\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setData" }), "(result)\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (err) {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setError" }), "(err ", _jsx(_components.span, { className: "hljs-keyword", children: "instanceof" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Error" }), " ? err.", _jsx(_components.span, { className: "hljs-property", children: "message" }), " : ", _jsx(_components.span, { className: "hljs-string", children: "'An error occurred'" }), ")\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "finally" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setLoading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n }\n }\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "fetchData" }), "()\n }, [url])\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsxs(_components.span, { className: "xml", children: [_jsx(_components.span, { className: "hljs-tag", children: "<>" }), "{children({ data, loading, error })}", _jsx(_components.span, { className: "hljs-tag", children: "" })] }), "\n}\n"] }) }), "\n", _jsxs(_components.h3, { id: "usage-example-1", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#usage-example-1", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Usage Example"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// Usage" }), "\n<", _jsx(_components.span, { className: "hljs-title class_", children: "DataFetcher" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), "[]> url=", _jsx(_components.span, { className: "hljs-string", children: "\"/api/users\"" }), ">\n {", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ data, loading, error }" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (loading) ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "Loading...", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (error) ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "Error: {error}", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!data) ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "No data", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n \n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "ul" }), ">"] }), "\n {data.map(user => (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "li" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{user.id}" }), ">"] }), "{user.name}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ))}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n }}\n\n"] }) }), "\n", _jsxs(_components.h2, { id: "higher-order-components-hoc", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#higher-order-components-hoc", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Higher-Order Components (HOC)"] }), "\n", _jsx(_components.p, { children: "HOCs are functions that take a component and return a new component with additional functionality." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// hocs/withAuth.tsx" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "React" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useAuth } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/hooks/useAuth'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "LoginForm" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/LoginForm'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " withAuth

(\n ", _jsx(_components.span, { className: "hljs-title class_", children: "WrappedComponent" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "React" }), ".", _jsx(_components.span, { className: "hljs-property", children: "ComponentType" }), "

\n) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "AuthenticatedComponent" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "props" }), ": P"] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { user, loading } = ", _jsx(_components.span, { className: "hljs-title function_", children: "useAuth" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (loading) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "Loading...", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!user) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "LoginForm" }), " />"] }) }), "\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "WrappedComponent" }), " {", _jsx(_components.span, { className: "hljs-attr", children: "...props" }), "} />"] }) }), "\n }\n}\n\n", _jsx(_components.span, { className: "hljs-comment", children: "// Usage" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ProtectedDashboard" }), " = ", _jsx(_components.span, { className: "hljs-title function_", children: "withAuth" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "Dashboard" }), ")\n"] }) }), "\n", _jsxs(_components.h2, { id: "state-reducer-pattern", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#state-reducer-pattern", children: _jsx(_components.span, { className: "icon icon-link" }) }), "State Reducer Pattern"] }), "\n", _jsx(_components.p, { children: "For complex state management, the reducer pattern provides predictable state updates." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// hooks/useCounter.ts" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useReducer } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "CounterState" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "count" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "step" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "CounterAction" }), " =\n | { ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'increment'" }), " }\n | { ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'decrement'" }), " }\n | { ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'reset'" }), " }\n | { ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'set_step'" }), "; ", _jsx(_components.span, { className: "hljs-attr", children: "step" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), " }\n | { ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'set_count'" }), "; ", _jsx(_components.span, { className: "hljs-attr", children: "count" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), " }\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "counterReducer" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "state" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "CounterState" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "action" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "CounterAction" })] }), "): ", _jsx(_components.span, { className: "hljs-title class_", children: "CounterState" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "switch" }), " (action.", _jsx(_components.span, { className: "hljs-property", children: "type" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'increment'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ...state, ", _jsx(_components.span, { className: "hljs-attr", children: "count" }), ": state.", _jsx(_components.span, { className: "hljs-property", children: "count" }), " + state.", _jsx(_components.span, { className: "hljs-property", children: "step" }), " }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'decrement'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ...state, ", _jsx(_components.span, { className: "hljs-attr", children: "count" }), ": state.", _jsx(_components.span, { className: "hljs-property", children: "count" }), " - state.", _jsx(_components.span, { className: "hljs-property", children: "step" }), " }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'reset'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ...state, ", _jsx(_components.span, { className: "hljs-attr", children: "count" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "0" }), " }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'set_step'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ...state, ", _jsx(_components.span, { className: "hljs-attr", children: "step" }), ": action.", _jsx(_components.span, { className: "hljs-property", children: "step" }), " }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "case" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'set_count'" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ...state, ", _jsx(_components.span, { className: "hljs-attr", children: "count" }), ": action.", _jsx(_components.span, { className: "hljs-property", children: "count" }), " }\n ", _jsx(_components.span, { className: "hljs-attr", children: "default" }), ":\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " state\n }\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "useCounter" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["initialCount = ", _jsx(_components.span, { className: "hljs-number", children: "0" }), ", initialStep = ", _jsx(_components.span, { className: "hljs-number", children: "1" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [state, dispatch] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useReducer" }), "(counterReducer, {\n ", _jsx(_components.span, { className: "hljs-attr", children: "count" }), ": initialCount,\n ", _jsx(_components.span, { className: "hljs-attr", children: "step" }), ": initialStep,\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "increment" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => ", _jsx(_components.span, { className: "hljs-title function_", children: "dispatch" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'increment'" }), " })\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "decrement" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => ", _jsx(_components.span, { className: "hljs-title function_", children: "dispatch" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'decrement'" }), " })\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "reset" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => ", _jsx(_components.span, { className: "hljs-title function_", children: "dispatch" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'reset'" }), " })\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "setStep" }), " = (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "step" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" })] }), ") => ", _jsx(_components.span, { className: "hljs-title function_", children: "dispatch" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'set_step'" }), ", step })\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "setCount" }), " = (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "count" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" })] }), ") => ", _jsx(_components.span, { className: "hljs-title function_", children: "dispatch" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "'set_count'" }), ", count })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "count" }), ": state.", _jsx(_components.span, { className: "hljs-property", children: "count" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "step" }), ": state.", _jsx(_components.span, { className: "hljs-property", children: "step" }), ",\n increment,\n decrement,\n reset,\n setStep,\n setCount,\n }\n}\n"] }) }), "\n", _jsxs(_components.h2, { id: "provider-pattern", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#provider-pattern", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Provider Pattern"] }), "\n", _jsx(_components.p, { children: "The provider pattern is great for sharing global state and functionality." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// contexts/ThemeContext.tsx" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "React" }), ", { createContext, useContext, useState, useEffect } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Theme" }), " = ", _jsx(_components.span, { className: "hljs-string", children: "'light'" }), " | ", _jsx(_components.span, { className: "hljs-string", children: "'dark'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ThemeContextType" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "theme" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Theme" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "toggleTheme" }), ": ", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "setTheme" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "theme" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Theme" })] }), ") =>"] }), " ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ThemeContext" }), " = createContext<", _jsx(_components.span, { className: "hljs-title class_", children: "ThemeContextType" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ">(", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ")\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "ThemeProvider" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{ children }: { children: React.ReactNode }" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [theme, setTheme] = useState<", _jsx(_components.span, { className: "hljs-title class_", children: "Theme" }), ">(", _jsx(_components.span, { className: "hljs-string", children: "'light'" }), ")\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "useEffect" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " savedTheme = ", _jsx(_components.span, { className: "hljs-variable language_", children: "localStorage" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getItem" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'theme'" }), ") ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Theme" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (savedTheme) {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setTheme" }), "(savedTheme)\n }\n }, [])\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "useEffect" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "localStorage" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "setItem" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'theme'" }), ", theme)\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "document" }), ".", _jsx(_components.span, { className: "hljs-property", children: "documentElement" }), ".", _jsx(_components.span, { className: "hljs-property", children: "classList" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "toggle" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'dark'" }), ", theme === ", _jsx(_components.span, { className: "hljs-string", children: "'dark'" }), ")\n }, [theme])\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "toggleTheme" }), " = (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setTheme" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "prev" }), " =>"] }), " prev === ", _jsx(_components.span, { className: "hljs-string", children: "'light'" }), " ? ", _jsx(_components.span, { className: "hljs-string", children: "'dark'" }), " : ", _jsx(_components.span, { className: "hljs-string", children: "'light'" }), ")\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "ThemeContext.Provider" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{{" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "theme" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "toggleTheme" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "setTheme" }), " }}>"] }), "\n {children}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "useTheme" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " context = ", _jsx(_components.span, { className: "hljs-title function_", children: "useContext" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "ThemeContext" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!context) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'useTheme must be used within a ThemeProvider'" }), ")\n }\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " context\n}\n"] }) }), "\n", _jsxs(_components.h2, { id: "best-practices", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#best-practices", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Best Practices"] }), "\n", _jsx(Alert, { type: "info", children: _jsx(_components.p, { children: "Here are some best practices when using these patterns:" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Choose the right pattern" }), " - Each pattern solves specific problems"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Keep it simple" }), " - Don't over-engineer solutions"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Consider performance" }), " - Some patterns can impact rendering performance"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Type safety" }), " - Use TypeScript for better developer experience"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Testing" }), " - Make sure your patterns are testable"] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "performance-considerations", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#performance-considerations", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Performance Considerations"] }), "\n", _jsxs(_components.h3, { id: "memoization-with-reactmemo", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#memoization-with-reactmemo", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Memoization with React.memo"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// components/ExpensiveComponent.tsx" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "React" }), ", { memo } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Props" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "any" }), "[]\n ", _jsx(_components.span, { className: "hljs-attr", children: "onItemClick" }), ": ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" })] }), ") =>"] }), " ", _jsx(_components.span, { className: "hljs-built_in", children: "void" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ExpensiveComponent" }), " = memo<", _jsx(_components.span, { className: "hljs-title class_", children: "Props" }), ">(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ data, onItemClick }" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n {data.map(item => (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{item.id}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " onItemClick(item.id)}>\n {item.name}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ))}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n})\n\n", _jsx(_components.span, { className: "hljs-title class_", children: "ExpensiveComponent" }), ".", _jsx(_components.span, { className: "hljs-property", children: "displayName" }), " = ", _jsx(_components.span, { className: "hljs-string", children: "'ExpensiveComponent'" }), "\n"] }) }), "\n", _jsxs(_components.h3, { id: "usecallback-and-usememo", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#usecallback-and-usememo", children: _jsx(_components.span, { className: "icon icon-link" }) }), "useCallback and useMemo"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// Optimized component" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "OptimizedComponent" }), "(", _jsx(_components.span, { className: "hljs-params", children: "{ items, filter }" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " filteredItems = ", _jsx(_components.span, { className: "hljs-title function_", children: "useMemo" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " items.", _jsx(_components.span, { className: "hljs-title function_", children: "filter" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "item" }), " =>"] }), " item.", _jsx(_components.span, { className: "hljs-property", children: "name" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "includes" }), "(filter))\n }, [items, filter])\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " handleItemClick = ", _jsx(_components.span, { className: "hljs-title function_", children: "useCallback" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" })] }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Handle click" }), "\n }, [])\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsx(_components.span, { className: "xml", children: _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "ExpensiveComponent" }), " \n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{filteredItems}" }), " \n ", _jsx(_components.span, { className: "hljs-attr", children: "onItemClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{handleItemClick}" }), " \n />"] }) }), "\n )\n}\n"] }) }), "\n", _jsxs(_components.h2, { id: "conclusion", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusion", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Conclusion"] }), "\n", _jsx(_components.p, { children: "These advanced React patterns provide powerful ways to structure your applications and share logic between components. Choose the pattern that best fits your use case and team preferences." }), "\n", _jsx(_components.p, { children: "Remember:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Compound Components" }), " for flexible component APIs"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Custom Hooks" }), " for sharing stateful logic"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Render Props" }), " for sharing render logic"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "HOCs" }), " for cross-cutting concerns"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Reducers" }), " for complex state management"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Providers" }), " for global state"] }), "\n"] }), "\n", _jsx(Badge, { children: "React" }), "\n", _jsx(Badge, { children: "Patterns" }), "\n", _jsx(Badge, { children: "Architecture" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Related Articles

QR Code Security: How Hackers Exploit Them and How to Stay Safe with QRGuard

How to Self-Host Matrix Chat on Local and VPS