What is the difference between props and state in React? When would you use each?

Question

Accepted Answer

## Props (Properties) Props are **read-only data passed from parent to child** components. They flow down the component tree (unidirectional data flow). ```javascript // Parent passes data via props function Parent() { return ; } // Child receives and uses props function Child({ name, age }) { return

{name} is {age} years old

; } ``` **Key characteristics:** - Immutable (cannot be changed by the child) - Passed from parent to child - Used to configure a component ## State State is **mutable data managed within a component**. When state changes, the component re-renders. ```javascript function Counter() { const [count, setCount] = useState(0); return ( ); } ``` **Key characteristics:** - Mutable (can be updated) - Owned and managed by the component - Triggers re-render when changed ## When to Use Each | Use Props When | Use State When | |---------------|----------------| | Data comes from parent | Data originates in this component | | Data shouldn't change here | Data needs to change over time | | Configuring child behavior | Tracking user interactions | | Passing callbacks down | Form inputs, toggles, counters | ## Simple Rule **Props = External configuration** **State = Internal memory**