Suggest an edit

Improve this article

Refine the answer for “What happens if you change props directly?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What is `props` in React

`props` is a **data object** that is **passed to a component from its parent**.
It is used only for **reading**, not for modifying.

React treats `props` as **immutable** data.
If a component tries to change it, this **breaks the idea of one-way data flow**.

---

## Example of incorrect code

```javascript
function Greeting(props) {
  props.name = "Alice"; // trying to mutate props
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Greeting name="Tim" />;
}
```

What happens:

1. React passes the component the object `props = { name: "Tim" }`;
2. You change `props.name = "Alice"`;
3. React **does not track** this object - it has its own copy of the data;
4. On the next render (for example, if the parent updates), React passes `props = { name: "Tim" }` again;
5. The change disappears, the UI "jumps", and the logic breaks.

---

## Why React does not react to a change in `props`

React **does not "watch" object mutations**.
It reacts **only to a state update** or to new `props` from the parent.

When you do:

```javascript
props.name = "Alice";
```

React **does not see** that a change happened,
and **will not trigger a re-render**.

---

## Possible consequences

| Problem | What happens |
|---|---|
| Loss of synchronization | The child component shows one thing, the parent stores another |
| Values reset on the next render | React simply overwrites `props` |
| Inexplicable bugs | The UI does not update even though it "should" |
| Debugging difficulty | The component's logic becomes unpredictable |
| Broken one-way data flow | React stops being deterministic |

---

## The right way (through state)

If you need to change something based on `props`,
create a **copy in internal state**:

```javascript
function Greeting({ name }) {
  const [userName, setUserName] = useState(name);

return (
    <>
      <h1>Hello, {userName}!</h1>
      <button onClick={() => setUserName("Alice")}>Change name</button>
    </>
  );
}
```

Here everything is correct:

- `props.name` is used only as the **initial value**;
- changes happen through **state**, which React tracks;
- when `setUserName()` updates, React automatically **re-renders the UI**.

---

## Example of a visible bug (if you mutate props)

```javascript
function Counter(props) {
  props.count++; // mutating props
  return <p>Count: {props.count}</p>;
}

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>+</button>
    </>
  );
}
```

What happens:

- The `Counter` component will increment `props.count` locally every time;
- But on the next render, React passes a **new object** `{ count }` from `App` again;
- And all the changes in `Counter` **are lost**.

The result is **unpredictable behavior**.

---

## Summary

| Question | Answer |
|---|---|
| Can you change `props`? | No |
| Why? | Because it is external, immutable data |
| What happens if you change it? | React will not notice, the render will not update, the data "gets lost" |
| How do you change data properly? | Through `state` and `setState` |
| What breaks when you mutate props? | One-way data flow |

---

**Main takeaway:**

> In React, `props` are like **function arguments**.
> Changing them inside a component is the same as rewriting a function's input parameters:
> technically possible, but **pointless and harmful**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts552 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.