Why is copying a prop into state usually a bug?
The initial value is read once, on the first render. Later prop changes are ignored, so the component shows stale data. Use the prop directly, derive the value during render, or reset state with a key.
Explain it simply
It is like copying a train's timing into your notebook at 9 AM. If IRCTC later changes the timing, your notebook is wrong. useState(props.x) is the notebook copy: React uses it only on the first render.
If the value can be computed from props, compute it during render. No state needed.
There is one legitimate case: you want an editable draft that starts from the prop, such as a form pre-filled from saved data. Then the copy is intentional, the name should say so (initialName), and a key resets it when the record changes. Without that intent, copying only adds bugs.
Example
function Profile({ user }) {
const [name, setName] = useState(user.name); // stale after user changes
return <h2>{name}</h2>;
}
function ProfileFixed({ user }) {
return <h2>{user.name}</h2>; // always current
}
// When a draft must restart per user:
<ProfileEditor key={user.id} user={user} />The key makes React throw away the old state and start fresh for each user.
What to say in the interview
"useState only uses its initial value once, so mirroring a prop into state gives stale UI and two sources of truth. I derive values during render when possible. When I truly need local editing state, I name the prop initialName and reset with a key when the identity changes."
Common mistakes
- Syncing props into state with useEffect, which adds an extra render and flicker.