"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", br: "br", code: "code", figure: "figure", h2: "h2", h3: "h3", h4: "h4", hr: "hr", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: ["As a beginner React developer, you’ve probably come across two fundamental concepts: react ", _jsx(_components.strong, { children: "state" }), " vs ", _jsx(_components.strong, { children: "props" }), ". They’re the bread and butter of building React components, but deciding when to use one or the other can be confusing. Don’t worry; you’re not alone. In this blog, we’ll break it down step by step, complete with real-world examples to make things click."] }), "\n", _jsx(_components.h2, { children: "What Are Props and State?" }), "\n", _jsxs(_components.p, { children: ["In my previous article, I've ", _jsx(_components.a, { href: "https://programmingly.dev/the-beginners-guide-to-master-props-in-react/", children: "explained Props by diving deeper" }), " into when to use them, let’s quickly define these concepts:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Props (short for properties)" }), ": These are inputs to a component. Think of them as the arguments you pass to a function. Props are ", _jsx(_components.strong, { children: "read-only" }), " and cannot be modified by the component receiving them."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "State" }), ": This is data that a component manages itself. It’s mutable (i.e., can be changed) and is often used to track things like user input, toggles, or any dynamic data."] }), "\n"] }), "\n", _jsx(_components.h3, { children: "Difference between State and Props" }), "\n", _jsxs(_components.p, { children: ["Understanding the difference between ", _jsx(_components.strong, { children: "state" }), " and ", _jsx(_components.strong, { children: "props" }), " is fundamental to working with React effectively. Let’s break it down:"] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: _jsx(_components.strong, { children: "Feature" }) }), _jsx(_components.th, { children: _jsx(_components.strong, { children: "State" }) }), _jsx(_components.th, { children: _jsx(_components.strong, { children: "Props" }) })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Definition" }) }), _jsx(_components.td, { children: "Internal data managed by the component." }), _jsx(_components.td, { children: "Data passed from a parent component." })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Mutability" }) }), _jsx(_components.td, { children: "Mutable (can be updated within the component)." }), _jsx(_components.td, { children: "Immutable (read-only)." })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Ownership" }) }), _jsx(_components.td, { children: "Owned by the component itself." }), _jsx(_components.td, { children: "Owned by the parent component." })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Purpose" }) }), _jsx(_components.td, { children: "Used to manage dynamic data that changes over time." }), _jsx(_components.td, { children: "Used to pass data and functions to child components." })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Scope" }) }), _jsx(_components.td, { children: "Local to the component (private)." }), _jsx(_components.td, { children: "Shared between parent and child components." })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "Updates" }) }), _jsxs(_components.td, { children: ["Can be updated using ", _jsx(_components.code, { children: "setState" }), " or hooks like ", _jsx(_components.code, { children: "useState" }), "."] }), _jsx(_components.td, { children: "Cannot be updated by the receiving component." })] })] })] }), "\n", _jsx(_components.h4, { children: "Quick Example:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "State" }), ": Imagine a toggle button where clicking it switches the state between “on” and “off.” The button manages its state internally."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Props" }), ": Think of a ", _jsx(_components.code, { children: "Greeting" }), " component that displays a user’s name. The name is passed as a prop from a parent component and doesn’t change within the ", _jsx(_components.code, { children: "Greeting" }), " component."] }), "\n"] }), "\n", _jsx(_components.p, { children: "By understanding these differences, you can make informed decisions on when to use state or props in your React components." }), "\n", _jsx(_components.h3, { children: "A Quick Analogy: The Recipe vs. The Kitchen" }), "\n", _jsx(_components.p, { children: "Imagine you’re a chef following a recipe:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Props" }), " are like the ingredients delivered to you. They’re pre-measured, fixed, and you can't change them once they arrive. For example, if the recipe calls for two cups of flour you can’t magically make it three."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "State" }), " is like the inventory in your kitchen. You can adjust it on the fly add more salt, remove sugar, or even replace butter with oil if you run out. You have full control over it."] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "When to Use React State vs Props" }), "\n", _jsx(_components.p, { children: "Here’s a general rule of thumb:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Use ", _jsx(_components.strong, { children: "props" }), " to pass data ", _jsx(_components.strong, { children: "from a parent component to a child component" }), "."] }), "\n", _jsxs(_components.li, { children: [_jsxs(_components.a, { href: "https://react.dev/learn/state-a-components-memory", children: ["Use ", _jsx(_components.strong, { children: "state" }), " to manage data"] }), " ", _jsx(_components.strong, { children: "that changes over time within a component" }), "."] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "Real-World Examples" }), "\n", _jsx(_components.p, { children: "Let’s bring this to life with a couple of practical scenarios." }), "\n", _jsxs(_components.h4, { children: ["1. ", _jsx(_components.strong, { children: "Building a Greeting Component" })] }), "\n", _jsxs(_components.p, { children: ["Imagine you’re creating a simple ", _jsx(_components.code, { children: "Greeting" }), " component that displays a message based on the user’s name. Here’s how you might use props:"] }), "\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: " Greeting" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "props" }), _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: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Hello, {props.name}!;" })] }), "\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: "// Usage" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Greeting" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " name" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Alice\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["In this example, ", _jsx(_components.code, { children: "name" }), " is passed as a prop from the parent component to ", _jsx(_components.code, { children: "Greeting" }), ". Since the ", _jsx(_components.code, { children: "Greeting" }), " component doesn’t need to modify ", _jsx(_components.code, { children: "name" }), ", props are the perfect choice."] }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h4, { children: ["2. ", _jsx(_components.strong, { children: "Managing a Counter" })] }), "\n", _jsx(_components.p, { children: "Now, let’s say you’re building a counter. Every time the user clicks a button, the counter should increment. Here’s where state comes in:" }), "\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: " 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: " 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: ">You clicked {count} times" })] }), "\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: " 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: ")}>Click Me" })] }), "\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: ["Here, ", _jsx(_components.code, { children: "count" }), " is part of the component’s state because its value changes as the user interacts with the button. This dynamic behavior makes state the right choice."] }), "\n", _jsx(_components.hr, {}), "\n", _jsxs(_components.h4, { children: ["3. ", _jsx(_components.strong, { children: "Combining Props and State" })] }), "\n", _jsxs(_components.p, { children: ["Sometimes, you’ll need to use both props and state. For example, let’s build a ", _jsx(_components.code, { children: "Product" }), " card that displays a product’s name (via props) and whether it’s in the user’s cart (via state):"] }), "\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: " Product" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "props" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") { " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "inCart" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setInCart" }), _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: "); " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "const" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "toggleCartStatus" }), _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: " { " }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "setInCart" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "!" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "inCart); }; " }), _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: ">{props.name}" })] }), "\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: "#9ECBFF" }, children: "\"{toggleCartStatus}\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {inCart " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"Remove from Cart\"" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " :" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"Add to 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", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "); } " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Usage" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Product" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " name" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"React Guidebook\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " })] }) }) }), "\n", _jsx(_components.p, { children: "In this example:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "The product’s name is passed via props because it comes from a parent component and doesn’t change." }), "\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.code, { children: "inCart" }), " status is managed with state because it can toggle between ", _jsx(_components.code, { children: "true" }), " and ", _jsx(_components.code, { children: "false" }), " based on user actions."] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "Key Questions to Ask Yourself" }), "\n", _jsx(_components.p, { children: "When deciding between state and props, ask these questions:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Where does the data come from?" }), _jsx(_components.br, {}), "\n", "If it comes from a parent component, use props. If the component manages it itself, use state."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Does the data need to change?" }), _jsx(_components.br, {}), "\n", "If yes, use state. If not, props are sufficient."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Is the component responsible for updating the data?" }), _jsx(_components.br, {}), "\n", "If yes, state is the way to go."] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h3, { children: "Common Mistakes and How to Avoid Them" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Mutating Props" }), _jsx(_components.br, {}), "\n", "Props are read-only. Don’t try to modify them in your child components. If you need to make changes, pass a function as a prop from the parent."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Overusing State" }), _jsx(_components.br, {}), "\n", "Don’t put everything in state. Use props when possible to keep your components simple and predictable."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Not Lifting State When Needed" }), _jsx(_components.br, {}), "\n", "If multiple components need access to the same state, consider moving the state up to a common parent and passing it down as props."] }), "\n"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "Wrapping Up" }), "\n", _jsx(_components.p, { children: "Understanding when to use state and props is crucial for building React applications effectively. Think of props as fixed data that components receive, and state as dynamic data they manage themselves." }), "\n", _jsx(_components.p, { children: "As you continue building with React, you’ll get more comfortable recognizing which one to use. Start small, experiment, and soon enough, you’ll be handling state and props like a pro!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };