"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", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://programmingly.dev/think-atomic-break-complex-ui-into-react-components-for-better-design", children: "React's component-based architecture" }), " revolves around the concept of state. Understanding how to effectively initialize, update, and manage state is crucial for building robust and performant React applications. In this comprehensive guide, we'll explore various methods of state management in React, focusing on functional components and hooks. We'll cover everything from basic state initialization to advanced state management techniques, including the batching process."] }), "\n", _jsxs(_components.h3, { children: [_jsx(_components.code, { children: "useState()" }), ": The Building Block of State Management"] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.a, { href: "https://react.dev/reference/react/useState", children: "useState hook" }), " is the most basic and commonly used method for managing the state in functional components. It's perfect for simple state management scenarios."] }), "\n", _jsx(_components.h4, { children: "Syntax" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsx(_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: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "state" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setState" }), _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: "(initialState);" })] }) }) }) }), "\n", _jsx(_components.h4, { children: "Real-world Example: Shopping Cart Item Counter" }), "\n", _jsxs(_components.p, { children: ["Let's create a simple shopping cart item counter using ", _jsx(_components.code, { children: "useState" }), ":"] }), "\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, { 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: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ShoppingCartCounter" }), _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: "itemCount" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setItemCount" }), _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: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "0" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " addItem" }), _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: "#B392F0" }, children: " setItemCount" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "prevCount" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " prevCount " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "+" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _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: " removeItem" }), _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: "#B392F0" }, children: " setItemCount" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "prevCount" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Math." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "max" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "0" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", prevCount " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "-" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "));" })] }), "\n", _jsx(_components.span, { "data-line": "", 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: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Shopping Cart" })] }), "\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: ">Items in cart: {itemCount}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{addItem}>Add Item" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{removeItem}>Remove Item" })] }), "\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: ["In this example, we use ", _jsx(_components.code, { children: "useState" }), " to initialize and manage the ", _jsx(_components.code, { children: "itemCount" }), " state. The ", _jsx(_components.code, { children: "setItemCount" }), " function allows us to update the state based on user interactions."] }), "\n", _jsxs(_components.h4, { children: ["When to Use ", _jsx(_components.code, { children: "useState()" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "For managing simple, independent pieces of state" }), "\n", _jsx(_components.li, { children: "When the state updates are straightforward and don't depend on other state values" }), "\n", _jsx(_components.li, { children: "In smaller components where prop drilling isn't an issue" }), "\n"] }), "\n", _jsxs(_components.h3, { children: [_jsx(_components.code, { children: "useReducer()" }), ": Managing Complex State Logic"] }), "\n", _jsxs(_components.p, { children: ["When state logic becomes more complex or when the next state depends on the previous one, ", _jsx(_components.a, { href: "https://react.dev/reference/react/useReducer", children: "useReducer" }), " can be a more suitable choice."] }), "\n", _jsx(_components.h4, { children: "Syntax" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsx(_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: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "state" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "dispatch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useReducer" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(reducer, initialState);" })] }) }) }) }), "\n", _jsx(_components.h4, { children: "Real-world Example: Todo List" }), "\n", _jsxs(_components.p, { children: ["Let's create a more complex todo list application using ", _jsx(_components.code, { children: "useReducer" }), ":"] }), "\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, { useReducer } " }), _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: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Reducer function" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " todoReducer" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "state" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "action" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " switch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (action.type) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " case" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'ADD_TODO'" }), _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: " [" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "state, { id: Date." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "now" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(), text: action.payload, completed: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "false" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }];" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " case" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'TOGGLE_TODO'" }), _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: " state." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "todo" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " todo.id " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " action.payload " }), _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: "todo, completed: " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "!" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "todo.completed } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " todo" })] }), "\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: " case" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'DELETE_TODO'" }), _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: " state." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "filter" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "todo" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " todo.id " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "!==" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " action.payload);" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _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: " state;" })] }), "\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: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " TodoList" }), _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: "todos" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "dispatch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useReducer" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(todoReducer, []);" })] }), "\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: "inputText" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setInputText" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "''" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " addTodo" }), _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: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (inputText." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "trim" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "()) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " dispatch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ type: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'ADD_TODO'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", payload: inputText });" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setInputText" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, 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: " " }), "\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: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Todo List" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "input" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " value" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{inputText}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " onChange" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "e" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " setInputText" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(e.target.value)}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " placeholder" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Enter a new todo\"" })] }), "\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: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{addTodo}>Add Todo" })] }), "\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: " {todos." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "todo" }), _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: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{todo.id}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "span" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{{ textDecoration: todo.completed " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'line-through'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'none'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _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: "#B392F0" }, children: " dispatch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ type: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'TOGGLE_TODO'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", payload: todo.id })}" })] }), "\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: " {todo.text}" }) }), "\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: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _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: "#B392F0" }, children: " dispatch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ type: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'DELETE_TODO'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", payload: todo.id })}>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Delete" }) }), "\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", _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.p, { children: ["In this example, we use ", _jsx(_components.code, { children: "useReducer" }), " to manage a more complex state structure for a todo list. The reducer function handles different actions like adding, toggling, and deleting todos."] }), "\n", _jsxs(_components.h4, { children: ["When to Use ", _jsx(_components.code, { children: "useReducer()" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "When state logic is complex and involves multiple sub-values" }), "\n", _jsx(_components.li, { children: "When the next state depends on the previous one" }), "\n", _jsx(_components.li, { children: "When you want to improve performance for components that trigger deep updates" }), "\n"] }), "\n", _jsxs(_components.h3, { children: [_jsx(_components.code, { children: "useContext()" }), ": Sharing State Across Components"] }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.a, { href: "https://react.dev/reference/react/useContext", children: "useContext hook" }), ", combined with the Context API, allows you to share state across multiple components without explicitly passing props through every level of the component tree."] }), "\n", _jsx(_components.h4, { children: "Syntax" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsx(_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: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " value" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useContext" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(MyContext);" })] }) }) }) }), "\n", _jsx(_components.h4, { children: "Real-world Example: Theme Switcher" }), "\n", _jsx(_components.p, { children: "Let's create a theme switcher that affects multiple 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, { createContext, useContext, 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: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Create a context" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " ThemeContext" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " createContext" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Theme provider component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ThemeProvider" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "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: "theme" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setTheme" }), _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: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'light'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " toggleTheme" }), _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: "#B392F0" }, children: " setTheme" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "prevTheme" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " prevTheme " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'light'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " ?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'dark'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'light'" }), _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: " " }), "\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: "ThemeContext.Provider" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " value" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{{ theme, toggleTheme }}>" })] }), "\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: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// A component that uses the theme" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ThemedButton" }), _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: "theme" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "toggleTheme" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useContext" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(ThemeContext);" })] }), "\n", _jsx(_components.span, { "data-line": "", 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: "button" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{toggleTheme}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _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: " backgroundColor: theme " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'light'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " ?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " '#fff'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " '#333'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " color: theme " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'light'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " ?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " '#333'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " '#fff'" }), _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: " Toggle Theme" }) }), "\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: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Another component that uses the theme" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ThemedText" }), _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: "theme" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useContext" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(ThemeContext);" })] }), "\n", _jsx(_components.span, { "data-line": "", 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: "p" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{{ color: theme " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'light'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " ?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " '#333'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " '#fff'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }}>" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Current theme: {theme}" }) }), "\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: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Main app component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " App" }), _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: "ThemeProvider" }), _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: ">Theme Switcher Example" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "ThemedText" }), _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: "ThemedButton" }), _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.p, { children: ["In this example, we use the Context API with ", _jsx(_components.code, { children: "useContext" }), " to create a theme that can be easily accessed and modified by multiple components without prop drilling."] }), "\n", _jsxs(_components.h4, { children: ["When to Use ", _jsx(_components.code, { children: "useContext()" })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "When you need to share state across multiple components at different nesting levels" }), "\n", _jsx(_components.li, { children: "To avoid prop drilling in larger applications" }), "\n", _jsx(_components.li, { children: "When you want to create a global state that doesn't require frequent updates" }), "\n"] }), "\n", _jsx(_components.h3, { children: "Redux Toolkit: Centralized State Management" }), "\n", _jsxs(_components.p, { children: ["For larger applications with complex state management needs, ", _jsx(_components.a, { href: "https://redux-toolkit.js.org/tutorials/quick-start", children: "Redux Toolkit" }), " offers a powerful solution. It provides utilities to simplify common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire \"slices\" of state at once."] }), "\n", _jsx(_components.h4, { children: "Real-world Example: E-commerce Cart Management" }), "\n", _jsx(_components.p, { children: "Let's create a simple e-commerce cart using the Redux Toolkit:" }), "\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: " { configureStore, createSlice } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " '@reduxjs/toolkit'" }), _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: " { Provider, useSelector, useDispatch } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'react-redux'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Create a slice for cart state" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " cartSlice" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " createSlice" }), _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: "'cart'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " initialState: []," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " reducers: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " addItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "state" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "action" }), _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: " existingItem" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " state." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "find" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "item" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " item.id " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " action.payload.id);" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (existingItem) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " existingItem.quantity " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "+=" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _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: "#F97583" }, children: "else" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " state." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "push" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "action.payload, quantity: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _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: "#B392F0" }, children: " removeItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": (" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "state" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "action" }), _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: " index" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " state." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "findIndex" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "item" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " item.id " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " action.payload);" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (index " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "!==" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " -" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (state[index].quantity " }), _jsx(_components.span, { style: { color: "#F97583" }, children: ">" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " state[index].quantity " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "-=" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _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: "#F97583" }, children: "else" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " state." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "splice" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(index, " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1" }), _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: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Create the store" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " store" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " configureStore" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " reducer: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " cart: cartSlice.reducer," }) }), "\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: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Extract action creators" }) }), "\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: "addItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "removeItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " cartSlice.actions;" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Cart component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Cart" }), _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: " cartItems" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useSelector" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "state" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " state.cart);" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " dispatch" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useDispatch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] }), "\n", _jsx(_components.span, { "data-line": "", 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: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Shopping Cart" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {cartItems." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "item" }), _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: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{item.id}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "span" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{item.name} - Quantity: {item.quantity}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _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: "#B392F0" }, children: " dispatch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "addItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(item))}>+" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _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: "#B392F0" }, children: " dispatch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "removeItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(item.id))}>-" })] }), "\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: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Product list component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ProductList" }), _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: " dispatch" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useDispatch" }), _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: "#79B8FF" }, 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: "#79B8FF" }, children: "15" }), _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: ", name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Product 3'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", price: " }), _jsx(_components.span, { style: { color: "#79B8FF" }, 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: " " }), "\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: "h2" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Products" })] }), "\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: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{product.id}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "span" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{product.name} - ${product.price}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _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: "#B392F0" }, children: " dispatch" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "addItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(product))}>Add to Cart" })] }), "\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: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Main app component" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " App" }), _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: "Provider" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " store" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{store}>" })] }), "\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: ">E-commerce App" })] }), "\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: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Cart" }), _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.p, { children: ["In this example, we use Redux Toolkit to manage the state of a shopping cart. The ", _jsx(_components.code, { children: "cartSlice" }), " defines the state structure and the actions that can modify it. The ", _jsx(_components.code, { children: "useSelector" }), " hook is used to access the state, while ", _jsx(_components.code, { children: "useDispatch" }), " is used to dispatch actions."] }), "\n", _jsx(_components.h3, { children: "When to Use Redux Toolkit" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "In larger applications with complex state management needs" }), "\n", _jsx(_components.li, { children: "When you need a predictable state container" }), "\n", _jsx(_components.li, { children: "When you want to centralize your application's state" }), "\n", _jsx(_components.li, { children: "When you need to implement complex data flows" }), "\n", _jsx(_components.li, { children: "When you want to leverage Redux's powerful ecosystem of middleware and developer tools" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Other Core React Hooks for State" }), "\n", _jsxs(_components.p, { children: ["While ", _jsx(_components.code, { children: "useState" }), ", ", _jsx(_components.code, { children: "useReducer" }), ", and ", _jsx(_components.code, { children: "useContext" }), " are the primary hooks for state management, other core React hooks can also play a role in managing component state and side effects."] }), "\n", _jsx(_components.h3, { children: _jsx(_components.code, { children: "useRef()" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react.dev/reference/react/useRef", children: "useRef" }), " is often used to store mutable values that don't require re-rendering when they change."] }), "\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, { useRef, useEffect } " }), _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: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " StopWatch" }), _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: " timerIdRef" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useRef" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "null" }), _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: "time" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setTime" }), _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: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "0" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " useEffect" }), _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: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " clearInterval" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(timerIdRef.current);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }, []);" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " startTimer" }), _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: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (timerIdRef.current) " }), _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: " timerIdRef.current " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " setInterval" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " setTime" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "time" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " time " }), _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: "#79B8FF" }, children: "1000" }), _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: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " stopTimer" }), _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: "#B392F0" }, children: " clearInterval" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(timerIdRef.current);" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " timerIdRef.current " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " null" }), _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: " " }), "\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: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Time: {time} seconds" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{startTimer}>Start" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{stopTimer}>Stop" })] }), "\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.h4, { children: [_jsx(_components.a, { href: "https://react.dev/reference/react/useMemo", children: "useMemo()" }), " and ", _jsx(_components.a, { href: "https://react.dev/reference/react/useCallback", children: "useCallback()" })] }), "\n", _jsx(_components.p, { children: "These hooks are used for performance optimization by memoizing values and functions." }), "\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, { useState, useMemo, useCallback } " }), _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: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " ExpensiveCalculation" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "list" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "onItemClick" }), _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: "selectedIndex" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setSelectedIndex" }), _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: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "0" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Memoize expensive calculation" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " sortedList" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useMemo" }), _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: " console." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "log" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Sorting list...'" }), _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: " [" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "list]." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "sort" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "a" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "b" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " a " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "-" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " b);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }, [list]);" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Memoize callback function" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " handleItemClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useCallback" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "index" }), _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: "#B392F0" }, children: " setSelectedIndex" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(index);" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " onItemClick" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(sortedList[index]);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }, [onItemClick, sortedList]);" }) }), "\n", _jsx(_components.span, { "data-line": "", 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: " {sortedList." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "item" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "index" }), _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" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{index}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _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: "#B392F0" }, children: " handleItemClick" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(index)}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " style" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{{ fontWeight: index " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " selectedIndex " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'bold'" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'normal'" }), _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: " {item}" }) }), "\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.h3, { children: "Understanding the Batching Process" }), "\n", _jsx(_components.p, { children: "Before we dive into the batching process, let's understand the problem it solves. In React, state updates trigger re-renders of components. When multiple state updates occur in rapid succession, it can lead to unnecessary re-renders, affecting performance." }), "\n", _jsx(_components.h4, { children: "The Problem: Multiple Re-renders" }), "\n", _jsx(_components.p, { children: "Consider this 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: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Counter" }), _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: "count" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setCount" }), _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: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "0" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " handleClick" }), _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: "#B392F0" }, children: " setCount" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(count " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "+" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setCount" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(count " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "+" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setCount" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(count " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "+" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _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: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " console." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "log" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Render'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", 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: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Count: {count}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{handleClick}>Increment" })] }), "\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: ["In this example, you might expect the count to increase by 3 when the button is clicked. However, it only increases by 1. This is because React batches the state updates that occur in event handlers. The ", _jsx(_components.code, { children: "console.log('Render')" }), " would only appear once in the console, indicating a single re-render."] }), "\n", _jsx(_components.h4, { children: "The Solution: Automatic Batching" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://react.dev/blog/2021/12/17/react-conf-2021-recap#react-18-and-concurrent-features", children: "React 18" }), " introduced automatic batching for all updates, regardless of where they originate. This means that multiple state updates are grouped together, resulting in a single re-render."] }), "\n", _jsx(_components.p, { children: "Here's how you can leverage batching for better performance:" }), "\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: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Counter" }), _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: "count" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setCount" }), _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: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "0" }), _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: "flag" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setFlag" }), _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: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "false" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " handleClick" }), _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: "#B392F0" }, children: " setCount" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "c" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " c " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "+" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " setFlag" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "f" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " !" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "f);" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // These updates will be batched together" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " };" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " console." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "log" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Render'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", 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: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Count: {count}" })] }), "\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: ">Flag: {flag." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "toString" }), _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: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{handleClick}>Update" })] }), "\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: ["In this example, both ", _jsx(_components.code, { children: "setCount" }), " and ", _jsx(_components.code, { children: "setFlag" }), " will be batched together, resulting in a single re-render."] }), "\n", _jsx(_components.h3, { children: "When Batching Doesn't Occur?" }), "\n", _jsxs(_components.p, { children: ["There are still some scenarios where batching might not occur automatically, such as in asynchronous operations. In these cases, you can use ", _jsx(_components.code, { children: "ReactDOM.flushSync()" }), " to force a synchronous update:"] }), "\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: " { flushSync } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'react-dom'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " AsyncCounter" }), _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: "count" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setCount" }), _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: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "0" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " handleAsyncIncrement" }), _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: "#B392F0" }, children: " setTimeout" }), _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: "#B392F0" }, children: " flushSync" }), _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: "#B392F0" }, children: " setCount" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "c" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " c " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "+" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _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: " // This update will be processed immediately" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }, " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "1000" }), _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: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " console." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "log" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "'Render'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", 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: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Count: {count}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{handleAsyncIncrement}>Async Increment" })] }), "\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: ["In this example, ", _jsx(_components.code, { children: "flushSync" }), " ensures that the state update inside the timeout callback is processed immediately, without batching."] }), "\n", _jsx(_components.h3, { children: "Benefits of Batching" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Improved Performance" }), ": By reducing the number of re-renders, batching can significantly improve the performance of your React applications, especially in complex UIs with frequent state updates."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Consistency" }), ": Batching ensures that the DOM is updated consistently, avoiding potential visual inconsistencies that could occur with multiple rapid updates."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Simplified Mental Model" }), ": Developers can think about state updates as isolated events, without worrying about the order or timing of multiple updates occurring close together."] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Conclusion" }), "\n", _jsxs(_components.p, { children: ["Understanding the various ways to initialize and manage state in React is crucial for building efficient and scalable applications. From the simplicity of ", _jsx(_components.code, { children: "useState" }), " for local component state to the power of Redux Toolkit for global state management, each method has its place in the React ecosystem."] }), "\n", _jsx(_components.p, { children: "Here's a quick recap of when to use each method:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useState" }), ": For simple, local state management within a component."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useReducer" }), ": For more complex state logic, especially when the next state depends on the previous one."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useContext" }), ": For sharing state across multiple components without prop drilling."] }), "\n", _jsx(_components.li, { children: "Redux Toolkit: For centralized state management in larger applications with complex data flows." }), "\n", _jsxs(_components.li, { children: ["Other hooks like ", _jsx(_components.code, { children: "useRef" }), ", ", _jsx(_components.code, { children: "useMemo" }), ", and ", _jsx(_components.code, { children: "useCallback" }), ": For specific use cases like mutable values and performance optimization."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Remember, the choice of state management technique depends on the size and complexity of your application. Start with the simplest solution that meets your needs, and scale up as your application grows." }), "\n", _jsxs(_components.p, { children: ["Lastly, always keep in mind the batching process in React. Automatic batching in React 18 helps improve performance by grouping multiple state updates together. However, be aware of scenarios where batching might not occur automatically, and use tools like ", _jsx(_components.code, { children: "flushSync" }), " when necessary."] }), "\n", _jsx(_components.p, { children: "By mastering these state management techniques and understanding the batching process, you'll be well-equipped to build efficient, maintainable, and performant React applications." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };