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:

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.

It has three parts like
-firstly, import React.creatContext
-secondly, create Context.provider
-thirdly, create Context.Consumer