In this article am going to discuss about the useContext hook but before that if you had not read my previous article then please read the useEffect hook. So, The useContext hook in React is a hook that allows functional components to subscribe to a React context without introducing nesting. Context provides a way to pass data through the component tree without having to pass props down manually at every level. Simply, we can say that useContext helps in to call the state of one component to any component in the react application which is either parent or children.

How useContext hook works?

Now after knowing about the useContext verbally the question arises how we can achieve that thing in our application.

useContext hook

In the above picture App Component is the App.tsx file where all the components are kept and A, B,C, D,E,F,G are the name of the components. Lets suppose you are using one state and you want to pass that state as prop to the other component. Now I want to use the name state of component A in Component C. So, I made one component A which takes one state name and then called Component B with passing the name prop and inside B Component , the C Component is called. So you can see how much nesting is there even I did not need the Component B but still I have to pass the prop to component B so I can use that prop in component C.

function A() {
  const [name, setName] = useState("WebTutorialStack");

  return (
    <div>
      <h1>{`Hello ${name}!`}</h1>
      <B name={name}/> //here name is passing as prop to the Component B.
    </div>
  );
}

function B({name}) {
  return (
    <div>
      <h1>{`Hello ${name}!`}</h1>
      <C name={name}/> //here again name is passing as prop to the Component C.
    </div>
  );
}

function C({name}){
return (
<div>
  <h1>{`Hello ${name}!`}</h1> //So finally we called name here
</div>
)
}

When to use the useContext hook?

Here only few components are there but suppose if you are building web applications which contains hundreds of components and you want to pass a prop from component first to component hundred then can you going to pass prop from first to second , second to third , third to fourth and so on? The answer is No, because this type of thing can waste your time and efforts also effect you website. So here we are using the useContext hook. That makes our work easy. First let see how it works:

import { createContext} from 'react';  //import createContext from react
const NameContext =createContext();

  //App.tsx file ( I am using typescript therefore it is .tsx but maybe in your case it is .js or .jsx file that is no need of worry)
function App{  
const [name,setName]=useState("WebTutorialStack");
<NameContext.Provider value={name}>
  <A/>
  <B/>
  <C/>
  <D/>
  <E/>
  <F/>
  <G/>    //These all are components that wrapped inside the NameContext Provider.
</NameContext.Provider>
}

Now after declaring all the components in the wrapper components you can directly use the name state in any of the component now no need to pass the nested props. we can use that state like below

import { useContext } from 'react';  //import useContext hook
function C() {
  const {name}=useContext(NameContext);  //value name
  return (
    <div>
      <h1>{`Hello ${name}!`}</h1>
      <B name={name}/> //here name is passing as prop to the Component B.
    </div>
  );
}

Simply you have to import the useContext from react then you can use that value inside your component. you can also pass any type of state and any functions so you can use it anywhere in the application. you can also make the separate component for the context file then you can use it in the app file. But most of the times you guys will seeing to use this useContext hook like this.

Conclusion

In this react hooks article I have discussed about useContext in detail with example. Hope you found this article helpful. In my next article I am going to discuss about useMemo hook in detail but if you want to know more about useContext hook or want to study more about useContext hook then you can go through the official documentation of react.