Suggest an edit

Improve this article

Refine the answer for “Can props be changed inside a component?”. 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)

**Short answer:**
**No, props cannot be changed inside a component.**

---

## Why `props` cannot be changed

`props` (from "properties") are **input data**
that are **passed to a component by its parent**.
They work **like function arguments** -
and by React's rules must be **read-only (immutable)**.

In other words:

> A component **receives** `props`, but **does not own them**.
> Changing them means breaking the one-way data flow principle.

---

## Example (what happens if you try to change `props`)

```javascript
function Greeting(props) {
  props.name = "Maria"; // You must not do this!
  return <h1>Hello, {props.name}</h1>;
}
```

React will not throw an error, but this is **bad practice**,
because such changes:

- do not affect the parent component (the data will not update);
- make the behavior unpredictable;
- may be overwritten on the next render.

---

## The correct way - use `state` when you need to change data

If you need data to **change inside a component**,
create your **own state** based on `props`.

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

const changeName = () => setUsername("Maria");

return (
    <>
      <h1>Hello, {username}!</h1>
      <button onClick={changeName}>Change name</button>
    </>
  );
}
```

Now `username` is the component's **internal state**,
and React will correctly update the UI when it changes.

---

## Why this matters (React's logic)

React follows the **"one-way data flow"** principle -
data flows **only from top to bottom**:

```javascript
Parent → Child component → JSX
```

If a child component starts changing `props`,
the chain becomes unpredictable, and React cannot guarantee UI consistency.

---

## What you can safely do with `props`

You can:
- read them
- use them for computations
- copy them into `state` on initialization
- pass them further to other components

You cannot:

- change `props` directly (`props.x = ...`)
- mutate nested objects inside `props` (`props.user.name = ...`)

---

## Example of the correct approach

```javascript
function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

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

Parent:

```javascript
<Counter initialCount={5} />
```

Here `initialCount` is a **prop**,
and `count` is **state**, which can be changed.

---

## Summary

| What | Allowed? | Why |
|---|---|---|
| Read `props` | Yes | It is input data |
| Change `props` directly | No | Breaks the one-way data flow |
| Create a copy in `state` and change it | Yes | The component controls its own state |
| Mutate nested objects in `props` | No | React does not track such changes |

---

**Main takeaway:**

> `props` are a component's **parameters**, like function arguments.
> They cannot be changed. If you need to change data - use `state`.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.