React State vs Props

What is State vs Props in React?

Props come from the parent and are read-only inside the component. State is created and owned by the component and can be changed by it. Both trigger a re-render when they change.

Why State vs Props matters

Choosing wrongly is the root of most React data bugs — duplicated sources of truth, values that stop updating, and children that cannot change what they display.

State vs Props example

function Search() {
  const [query, setQuery] = useState('');       // owner of the state
  return (
    <>
      <SearchInput value={query} onChange={setQuery} />  {/* props down */}
      <Results query={query} />                          {/* props down */}
    </>
  );
}

How this works

Neither child owns the query. The nearest common parent holds it and passes both the value and the updater down — the pattern React calls "lifting state up".

Key points to remember

• If two components need the same value, move it to their closest common parent.
• Do not copy a prop into state unless you deliberately want an independent editable copy.
• Anything derivable from existing state or props should be computed during render, not stored.

Props vs state at a glance

Common mistakes with State vs Props

• useState(props.value) and then wondering why it stops updating when the prop changes.
• Storing a filtered list in state instead of computing it from the source list plus the filter.