# Props and State in React

**Props (properties) are data passed *<mark>from parent to child</mark>* components, acting as read-only configuration, while state is *<mark>internal data managed within a component</mark>* that can change over time, triggering re-renders**.

Think of props as arguments to a function (<mark>immutable</mark>, passed down) and state as variables inside the function (<mark>mutable</mark>, local to the component). Both have different use cases and equally useful.

### **Props (Properties)**

* **Source:** Passed down from parent components to child components.
    
* **Mutability:** Immutable (read-only for the child component).
    
* **Purpose:** To configure child components and pass data between them.
    
* **Example:** `<Profile name={‘Suzy’} age={‘25’} />`
    

### **State**

* **Source:** Managed internally within the component.
    
* **Mutability:** <mark>Mutable</mark> (can be changed by the component itself).
    
* **Purpose:** To manage data that changes over time, affecting the component's rendering (e.g., counter, form input).
    
* **Example:** `const [count, setCount] = useState(0);` in a functional component. Here `count` is name of variable and `setCount` is used for changing value of count variable.
    

### **Summary**

* **Data Flow:** Props = Parent-to-child; State = Internal.
    
* **Control:** Parent controls props; Component controls state.
    
* **Re-render:** <mark>Changing state causes re-render; Changing props causes </mark> **<mark>child re-render</mark>**<mark>.</mark>
    
* **Best Practice:** Use props for data flowing down and state for data that changes internally. 
    

Note -

Use state variable when it is actually needed to avoid unnecessary re-renders. Variables which do not change that can be defined using Vanila JavaScript. React this official documentation for more info about avoiding unnecessary re-renders - [https://react.dev/learn/escape-hatches](https://react.dev/learn/escape-hatches)