pros and cons of Props, State, Props drilling & Context API.

Props: Props is where assigning properties. Props are used for reuse of components with custom value. Props are external, immutable and controlled by whatever renders the component.

State: State is where you store property value. State is internal, mutable and controlled by the component itself.

Props vs State:

props:

props pass through the component
props use as parameter
props are external and immutable

state:

state stay within the component
state declared inside the function
state are internal and mutable

What is prop drilling?
When you pass data from one part to another part by the help of some additional part, that additional part is called props drilling.

Problem of prop drilling:

Updating data format
Renaming props

Updating data format: If you pass an object and where you want to add another property like department, then you have to update all the nested components.
<App user={"name": "Harsh", "department": "cse"} />

Renaming props: If you want to rename your props name, then you have to rename all the nested components.
For example: user to myUser
<App myUser={"name": "Harsh", "department": "cse"} />

Context Api: React context is a way to manage state globally.
-It solves props drilling issues
-It can be used together with the useState hook to share state between deep nested components more easily.