What is the difference between props and state in React?

Props are data passed from a parent to a child (read-only in the child); state is data owned and managed by the component itself.

React

Overview

Props and state are the two sources of data in a React component. Understanding when to use each is fundamental to React architecture: props flow down, events flow up.

Key Points

•Props: passed from parent, read-only in the receiving component, used to configure it.
•State: owned by the component, can be updated with `setState`/`useState`, triggers re-render.
•When state changes in a parent, the new value flows down to children as updated props.
•"Lift state up": if two siblings need the same data, move it to their common parent.
•Props can be any JavaScript value: strings, numbers, objects, arrays, functions, JSX.

Examples

Props flow down, events flow up

tsx

// Parent owns the state
function App() {
  const [count, setCount] = useState(0);
  return <Counter value={count} onIncrement={() => setCount(c => c + 1)} />;
}

// Child receives props (read-only)
function Counter({ value, onIncrement }: { value: number; onIncrement: () => void }) {
  return <button onClick={onIncrement}>Count: {value}</button>;
}

Lifting state up for sibling communication

tsx

function SearchPage() {
  const [query, setQuery] = useState(''); // shared state in common parent

  return (
    <>
      <SearchInput value={query} onChange={setQuery} />
      <ResultsList query={query} />
    </>
  );
}

Pro Tip

A good rule of thumb: if data needs to change over time within the component, it's state. If data is provided by the parent and the component doesn't modify it, it's a prop. When in doubt, start with local state and lift it up only when needed.