Props vs State in React: Are You Using Them Right? 🤔

Ever felt like React is playing mind games with you? Props and State can seem like twins, but they serve very different purposes — and mixing them up can cause chaos in your components. 🚀

Let’s break it down so you never get confused again! 👇

🧠 Props: The Data You Pass Down

Think of props like care packages you send to components. They are:

1. Read-only (immutable)
2. Passed from parent to child
3. Great for static or external data

🔹 Example:

function Greeting(props) { 
  return <h1>Hello, {props.name}!</h1>; 
} 

Here, name is a prop — and the component can’t change it.

🔑 Tip: Use props for anything that shouldn’t change within a component (like config values or content).

🟢 State: The Data You Control

State is like the inner mood of a component — it lives inside and can change over time. It’s perfect for:

1. Dynamic data (like form inputs)

2. User interactions

3. Component lifecycle changes

🔹 Example:

function Counter() { 
  const [count, setCount] = useState(0); 

  return ( 
    <div> 
      <p>Count: {count}</p> 
      <button onClick={() => setCount(count + 1)}>Increment</button> 
    </div> 
  ); 
} 

Here, count is state — and the component can change it with setCount.

⚡ Key Differences (In Simple Terms)

Props = Data IN (from parent) 📨

State = Data OUT (component’s private data) 📤

Props are fixed unless the parent component changes them.

State is flexible and can change within the component itself.

🚨 Common Mistake: Don’t try to modify props inside a component. If you need to change data, lift the state up and pass it back down as a prop!

📌 Quick Analogy:

Imagine a vending machine 🥤

Props = The snacks inside the machine (supplied by the owner)

State = The current stock count of each snack (tracked by the machine itself)

If you buy a snack, state updates, but the props stay the same until the owner refills the machine.

💬 Are you handling props and state like a pro, or have you had any "aha!" moments while learning React?

Let me know in the comments! 🚀

📌 Follow DCT Technology for more hands-on web development tips and tricks!

ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #CodingTips #ReactHooks #Programming #TechInsights #DCTTechnology

Comments

[Peter Vivo]

Props is give a pure component solution because we can avoide the inner state.
Props working as state, to modify we need to use that state set method.

const FooComp = ({id, title, post, linkInfo, linkAddress, setLink}) => (
  <main>
    <h1>{title}</h1>
    <p>{post}</p>
    <button onClick={() => setLink(linkAddress)}>{linkInfo}</button>
  </main>
);

That why I write a npm module: react type safe useReducer to easy make a typesafe useReducer solution which is work:

const ParentComponentWIthComplexState = () => {
  const [state, actions] = useDuck(reducer, initialState, actionsLabels);

  return (
    <section>
       <Panel state={state} actions={actions} />
       <OtherPanel state={state} actions={actions} />
    </section>
  )
}

Panel and OtherPanel can use any state, and actions to handle our ParentComponent
Technically we can pass whole actions to safe because that is don't change on run. A lower component level we can select which state pass it to it.

But I am moving fare away from React, but this simple solution can save my days a lot. The problem is writing a good reducer is takes a times.