Today i learnt about Props,the key charactersitcs of Props,Props Drilling and useContext Hook in React.

I understood how data is passed between components and React helps us to avoid unnecessary prop passing using Context.

1.What are Props in React?

Props mean properties.
props are used to pass data from parent component to child component.

Example:
`function Student(props){

return

Hello,{props.name}<?h2>

}

function App(){
return

;

}

export default App;`

Output:

  • App is the parent component.
  • Student is the child component.
  • name="sam" is the passed to the child.

2.Key Characteristics of Props

I learned the following characteristics of Props:
1.Read-only:Props should not modified by child component.
2.Parent to Child:Props are used to pass data from parent component to child component.
3.Reusable:we can reuse the same component with diffrent prop values.
4.Diffrent Data Types:Props can pass strings,numbers,arrays,objects,functions.

3.What is Props Drilling?
Props Drilling happen when we pass data through multiple components just to reach a deeply nested child component.

App
|
Parent
|
Child
|
Grandchild

If the Appcomponent has data and the grandchild component needs it,we have to pass props through Parent and Child.

The unnecessary passing of props through intermediate components is called Props Drilling.

4.What is useContext in React?

To avoid unnecessary Props Drilling, React provides useContext Hook.

useContext allows components to access the shared data without passing props through every intermediate component.

Example:
`import {createContext,useContext} from "react";

const UserContext = createContext();

function App(){
return(

);

}

function Child(){
return ;

}

function Grandchild(){
const name = useContext(UserContext);

return

Hello{name}

}

export default App;
`
Output:
Hello Sam

Important:
createContext() creates a Context.
Provider makes a value available to components inside it.
useContext() allows a component to read that value.

What i learned today

I understood how props work in react,their important characteristics and how props drilling happens when data passes through every intermediate compoent.

I am improving React step by step.