State Vs Prop in React [Tabular Difference]
Tags: react, reactjsdevelopment, state, prop
Published: 2024-04-18 14:44:34


![State vs Prop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqzmzxukdw6s2rcjr4ra.png)



| Feature                  | State                                    | Props                                   |
|--------------------------|------------------------------------------|-----------------------------------------|
| Ownership                | Owned and managed internally by component | Defined and passed by parent component  |
| Mutability               | Mutable; can be updated using `setState()` | Immutable; cannot be changed within component |
| Scope                    | Local to component                       | Passed from parent to child components  |
| Initialization           | Typically initialized within constructor for class components or using `useState()` hook for functional components | Passed as attributes from parent component |
| Component-Specific       | Each component instance maintains its own state | Passed down from parent to child components |
| Control                  | Controlled and managed by the component  | Controlled by parent component           |
| Communication            | Primarily for managing component-specific data | Used for communication between parent and child components |
| Updates                  | Can trigger re-renders within the component | Changes in props trigger re-renders in the child component |
| Usage                    | Managing internal component state        | Configuring child components and facilitating communication between them |

Let's illustrate each point with examples:

1. **Ownership**:
   - State:
     ```jsx
     class Counter extends React.Component {
       constructor(props) {
         super(props);
         this.state = { count: 0 };
       }
       // ...
     }
     ```
   - Props:
     ```jsx
     // ParentComponent.js
     import ChildComponent from './ChildComponent';

     function ParentComponent() {
       return <ChildComponent name="John" />;
     }
     ```

2. **Mutability**:
   - State:
     ```jsx
     this.setState({ count: this.state.count + 1 });
     ```
   - Props:
     Props are immutable and cannot be changed within the component.

3. **Scope**:
   - State:
     State is local to the component and not accessible outside of it.
   - Props:
     Props are passed down from parent to child components and can be accessed within the child component.

4. **Initialization**:
   - State:
     ```jsx
     const [count, setCount] = useState(0);
     ```
   - Props:
     ```jsx
     // ParentComponent.js
     <ChildComponent name="John" />
     ```

5. **Component-Specific**:
   - State:
     Each instance of a component maintains its own state.
   - Props:
     Props are passed from parent components and can be different for each instance of the child component.

6. **Control**:
   - State:
     Controlled and managed by the component itself.
   - Props:
     Controlled by the parent component, and changes are propagated down to child components.

7. **Communication**:
   - State:
     Used for managing component-specific data that can change over time.
   - Props:
     Used for passing data and behavior from parent to child components.

8. **Updates**:
   - State:
     Changes to state trigger re-renders within the component.
   - Props:
     Changes in props trigger re-renders in the child component.

9. **Usage**:
   - State:
     Used for managing internal component state, such as form inputs, toggle states, etc.
   - Props:
     Used for configuring child components and facilitating communication between them.