# What is useContext?

# Prerequisites
This blog assumes you're already familiar with React and React Hooks.

# Why should you use useContext?

To avoid the pain of prop drilling, we use the useContext hook. as you may know.
Prop drilling is the process of transferring props from to each child component of a component tree. 


![prop.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1652488414413/V3k-bRh7-.png align="left")

It adds complexity to the code and lengthens it. 
If we wish to transfer data to ```ChildC```, we must first pass it to ```ChildA```, then to ```ChildB```, and finally to ```ChildC```. Even ```ChildA``` and ```childB``` do not require that information.
To **overcome **this problem we use **useContext** hook.

let's get started.

# What is useContext.
Context allows you to send data or state to each component in a component tree without having to pass props to each child component.

Don't worry we will understand this with an example.

## Create context
To construct a context that react provides, we'll use createContext.
To create context, we must first import it from react.

```
import { createContext } from 'react'
const ThemeContext = createContext(null)
```

### Provide Context

We'll wrap our parent node in a context provider so that value is passed along to all child components.
```
<ThemeContext.Provider  value={{ theme: "light" }}>
      <App />
</ThemeContext.Provider>
```
### Consume Context

React provides useContext to use the context. We will use it to consume data.
````
import { useContext } from "react";
const {theme} =  useContext(ThemeContext)

````

# State in context
What will we do if we wish to pass the state on to our children?
we will pass state in value prop as we did before.
look at this example.

```
import { createContext, useContext, useState } from "react";

const ThemeContext = createContext({ theme: "light" });

const useTheme = () => useContext(ThemeContext);

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  const changeTheme = () => {
    setTheme((theme) => (theme === "light" ? "dark" : "light"));
  };

  return (
    <ThemeContext.Provider value={{ theme, setTheme, changeTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeProvider, useTheme };
```
We've extracted contextProvider to a separate file and passed the prop ```children```.
You can read about children prop [here](https://reactjs.org/docs/glossary.html#propschildren).
In addition, if you are not aware, I am constructing a custom hook. Click [here](https://reactjs.org/docs/hooks-custom.html) to read it.

Now we can utilise it whenever and wherever we choose.
```
const { changeTheme } = useTheme();
```

# Closure
Thank you for reading till the end. Let me know in the comments if you like the blog or if you have any suggestions!