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.
It has three parts like
-firstly, import React.creatContext
-secondly, create Context.provider
-thirdly, create Context.Consumer
In this figure, we see that, import React.creatContext and create Context.provider and Context.Consumer
Top comments (0)