Understanding Props in React (Beyond “Read-Only”)

When learning React, one of the first things you hear is:

“Props are read-only.”

That sounds simple — but it can be misleading.

Because at some point, you’ll probably write something like this:

function Child({ value }) {
  value = value + 1
  return <h1>{value}</h1>
}

And then you’ll wonder:

“Wait… didn’t React say props are read-only? Why does this still work?”

This is exactly where confusion starts.

What Props Actually Are

At a high level:

• Props are data passed from parent → child
• They are treated as immutable inputs

But here’s the important part:

Props are not special objects — they are just function arguments.

What This Syntax Really Means

This line:

function Child({ value }) {

Looks like something special.

But it’s actually just JavaScript destructuring.

Equivalent to:

function Child(props) {
  const value = props.value
}

So What Happens When You “Modify” It?

Let’s look again:

function Child({ value }) {
  value = value + 1
  return <h1>{value}</h1>
}

What you’re really doing is:

let value = props.value
value = value + 1

So:

• You are NOT modifying the original prop
• You are only modifying a local variable

What Gets Rendered

function App() {
  return <Child value={10} />
}

Inside Child:

value = 10
value = value + 1 → 11

So the result is:

<h1>11</h1>

Why This Is Still Considered Wrong

Even though it “works,” it creates the wrong mental model.

It makes it look like:

“I can change props inside a component”

But that’s not what’s happening.

You are not mutating props — you are shadowing them with a local variable.

This distinction is subtle, but important.

Mutation vs Derivation

The correct way to think about props is:

Don’t mutate — derive

Instead of:

value = value + 1

Do this:

const newValue = value + 1

Now it’s clear:

• value stays untouched
• newValue is computed

Why React Calls Props “Read-Only”

React doesn’t enforce immutability at the JavaScript level.

But conceptually:

Props should never be treated as something you can change.

Because:

• They belong to the parent
• The child should only use, not control them

The Real Mental Model

A better way to think about props:

Props = inputs to a function

And like any good function:

• You don’t modify inputs
• You compute outputs from them

Where Confusion Usually Comes From

If you’ve used Vue before, this might feel strange.

In Vue:

• Props are strictly enforced as immutable
• You use emit to communicate upward

In React:

• Props are just arguments
• You pass callbacks instead of emitting events

At first, React can feel more “manual.”

But it’s also more explicit.

Why This Design Exists

React prefers:

Explicit data flow over hidden behavior

So instead of:

• Hidden event systems
• Implicit communication

You get:

• Clear data passing (props)
• Clear actions (callbacks)

Final Takeaway

The most important realization is this:

Props are not something you change — they are something you derive from.

And more importantly:

“Read-only” in React is about mindset, not enforcement.