What is the difference between state and props in React?

Think of a cricket scoreboard operator. The match details printed on the board, such as team names and venue, are given to them by the organisers. They cannot change those. That is like props. The current score, which the operator updates after every ball, is their own to manage. That is like state.

Props flow down from parent to child, like arguments to a function. State lives inside a component and is that component's memory between renders. When state changes, React re-renders the component and its children with the new value.

function ApplyButton({ company }) {
  // company is a prop: given by the parent, read-only here
  const [applied, setApplied] = useState(false); // state: owned here

  return (
    <button onClick={() => setApplied(true)} disabled={applied}>
      {applied ? `Applied to ${company}` : `Apply to ${company}`}
    </button>
  );
}

function JobList() {
  return (
    <>
      <ApplyButton company="Infosys" />
      <ApplyButton company="TCS" />
    </>
  );
}

Each ApplyButton gets a different company prop from JobList. Each also has its own separate applied state. Clicking one does not affect the other.

• Props are an object React passes to your component function. You should never modify them. If a child needs to change something, the parent passes down a function as a prop, such as onApply, and the child calls it.
• State is created with useState (or useReducer). Calling the setter schedules a re-render. React keeps the value between renders, tied to that component's position in the tree.
• One component's state is often another component's props. The parent holds the state and passes the value down.

Lifting state up. When two siblings need the same data, move the state to their closest common parent and pass it down as props, along with functions to change it. For example, if a Filters panel and a ResultsList both need the selected branch, the SearchPage parent should hold it.

• A ProductCard receives the product as a prop, while its "show details" toggle is local state.
• A form holds the input values in state and passes them to child inputs as props.
• A modal's open/closed state lives in the page, and the modal receives isOpen and onClose as props.

• Changing a prop directly, like props.count++. Props are read-only; ask the parent to change it.
• Copying a prop into state and expecting it to update when the parent changes it. The state keeps its first value. Usually you should use the prop directly.
• Mutating state, such as items.push(x) followed by setItems(items). React sees the same array and may skip the update. Create a new array: setItems([...items, x]).
• Storing values in state that can be calculated from other state or props, like a filtered list. Compute them during render instead.

• What does "lifting state up" mean, and when do you do it?
• Why should you not mutate state directly?
• Why is copying props into state usually a bad idea?