Treat props as read-only

Props are read-only snapshots. A child must not assign to them or mutate an object received through them.

This breaks one-way data flow:

function Task({ task }) {
  task.done = true
  return <p>{task.title}</p>
}

The object belongs to the parent. Mutating it changes data from an earlier render without asking the owner to update. React may not re-render. Other components still holding the old snapshot will disagree with what you changed in place.

When the child needs a change, pass an event callback:

function Task({ task, onToggle }) {
  return (
    <label>
      <input
        type="checkbox"
        checked={task.done}
        onChange={() => onToggle(task.id)}
      />
      {task.title}
    </label>
  )
}

The child reports the event. The parent updates its state and passes a new task prop on the next render. Everyone sees the same data.

My advice: treat every prop like a function argument. You read it, you use it, you never write to it. If the UI needs to change, tell the parent through a callback.

Avoid copying a prop into state by default:

const [name, setName] = useState(user.name)

Later prop changes will not automatically replace that state. This is correct only when name is an intentional editable draft. Otherwise calculate from the prop directly.

If you need local edits that sync when the prop changes, pass a key on the child or reset state in an Effect when the prop id changes. Those patterns come up in later lessons on state ownership.

The parent might pass a fresh object on every render. That is fine. The child still must not mutate it. Spread or map in the parent when the data needs to change, then pass the new snapshot down.

Freeze a prop object during development and try the mutation example. The failure makes the ownership mistake easier to see.