What happens if you change props directly?

ReactJunior~2 min read

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:

React passes the component the object props = { name: "Tim" };
You change props.name = "Alice";
React does not track this object - it has its own copy of the data;
On the next render (for example, if the parent updates), React passes props = { name: "Tim" } again;
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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What happens if you change props directly?

#What is props in React

#Example of incorrect code

#Why React does not react to a change in props

#Possible consequences

#The right way (through state)

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

#Summary

Short Answer

What is `props` in React

Example of incorrect code

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

Possible consequences

The right way (through state)

Example of a visible bug (if you mutate props)

Summary