What is Prop Drilling, Context API and useContext hook in React

 React's useContext hook used to easy to pass data throughout your app without manually passing props down the tree.

Props Drilling

UseContex.js

import React from 'react'
import CompA from './CompA';
export const Context = (name) => {
    return (
        <div>
            <CompA name={"Shreyash KOlhe"} />
        </div>
    )
}
export default Context;

CompA.js

import React from 'react'
import CompB from './CompB';
export const CompA = ({name}) => {
    return (
        <div>
            <CompB name = {name}/>
        </div>
    )
}
export default CompA;

CompB.js

import React from 'react'
// import CompA from './CompA';
export const CompB = ({name}) => {
    return (
        <div>
            <h1>Hello {name}</h1>
        </div>
    )
}
export default CompB;

Using useContext Hook

Context.js

import React, { createContext } from 'react'
import CompA from './CompA';
const BioData = createContext();
export const Context = () => {
    return (
        <div>
            <BioData.Provider value={"Shreyash KOlhe" }>
                <CompA />
            </BioData.Provider>
        </div>
    )
}
export default Context;
export {BioData}

CompB.js

import React, { useContext } from 'react'
import { BioData } from './Context';
// import CompA from './CompA';
export const CompB = ({name}) => {
    const myName = useContext(BioData)
    return (
        <div>
              <h1>Hello {myName}</h1>
        </div>
    )
}
export default CompB;