Because of its dynamic behaviour.

Example : 1 - If you write input should change. 2 - If you click on something, then something should happen. Note: Interactivity is managed through the state; this is why we need a state.

Types of state:

• Local state
• prop drilling.
• state management libraries.

Local state: within the component. Parent component state variables are accessible within the child components, but we need to pass them down to the child components(props). Data flow -> unidirectional.

       Parent
          |
       Child
          |
    Sub child

Note: you can't pass data from child to parent components(no bidirectional).

Prop drilling: the same data is passed down to child components. Cons :

• unnecessarily passing data between different components, maybe some intermediate components don't need any data.
• If the parent state changes, then every child component will be rerendered. Suppose if you deeply nest it, then it will affect the app's performance.

Lifting state : If two sibling components want to share the same data, that data can't be one child; that state should be lifted up to the parent, and then the parent will distribute the data to the child as props. In simpler words, one component has data and that data is also needed in another child.

State management libraries:

• Don't use the state management library for very small projects.
• If your app is huge, then you use state management libraries; else don't use it because it also comes with cost and it is bulky, affecting the app's performance.

Props :