useContext Hook in React | How useContext Hook Works in ReactJs

 useContext Hook in React |  How useContext Hook Works in ReactJs

    The useContext hook is a little different though. it just makes things nicer.

In case you haven't heard of React's Context API, it's a way to pass data deeply throughout your app, without having to manually pass props down through multiple levels.

    In this post we'll look at how useContext makes context a little easier to consume.

Source Code:-

App.js

import React, { createContext } from "react";
import ComA from './componunt/ComA';
const FirstName = createContext();
const LastName = createContext();
const App = ()=>{
  return(
    <>
      <FirstName.Provider value={"Shreyash"}>
        <LastName.Provider value={"Kolhe"}>
            <ComA/>
        </LastName.Provider>
      </FirstName.Provider>
    </>
  )
}
export default App;
export {FirstName, LastName};

ComA.js

import React, {useContext} from "react";
import { FirstName, LastName } from '../App';
const ComA =()=>{
    const fname = useContext(FirstName);
    const lname = useContext(LastName);
    return(
        <>
        <h1>My name is {fname } {lname}</h1>
        </>
    )
}
export default ComA;