DEV Community

Cover image for How To Use Context Hooks In React
sivavadlamudi
sivavadlamudi

Posted on

2 1

How To Use Context Hooks In React

The React has released the Context API as if we need to pass data to multiple nested components. But the Context API was a bit bulky and difficult to use in class components. With the release of React hooks, the React team decided to release use context hook which is more simplified and easy to use.

What Is The Context API?
As we already know React uses State to store the data and props to pass the data between the components. This is well and good for the local state and if you want to pass the data between Parent to Child. This normal state and props will be difficult when you start to have a global state or props that need to be passed to deeply nested components.
when you pass down props through a bunch of different components so they can get to one single component far down the hierarchy actual problem starts.

This is where context API comes into the picture, With this context API you can specify certain data that will be available to all components, So there is no need to pass this data through each component to nested component. It is a semi-global state that is available anywhere inside the context.

Here there will be three things to remember
i) createContext() which is used to create the context
ii) Provider which provides the data
iii) Consumer which consumes the data which is given by the Provider

Example :

const ThemeContext = React.createContext()

function App() {
const [theme, setTheme] = useState('dark')

return (



)
}

function ChildComponent() {
return
}

class GrandChildComponent {
render() {
return (

{({ theme, setTheme }) => {
return (
<>
The theme is {theme}
setTheme('light')}>
Change To Light Theme

</>
)
}}

)
}
}

In the above code example, we are creating a new context using React.createContext. The React.createContext gives us a variable that has two things.
The first part is a provider which provides data to all components nested inside of it. In our case the data is a single object with the theme and setTheme properties.
The second thing is the consumer. This is what you must wrap your code in to access the value of the context. This component expects a function as the child of it and that function gives you the value of the context as the only argument for the function. Then in that function you can just return the JSX that component utilizes the context.

The Above Code is a little bit difficult because it is hard to work with the context
Luckily, with the function components, we can avoid all that mess code by using the useContext hook.
In order to use context data in a functional component you no need to wrap up the data in JSX in consumer. Instead, all you need to do is pass your context to the useContext hook and it will do all the magic for you

function GrandChildComponent() {
const { theme, setTheme } = useContext(ThemeContext)
return (
<>

The theme is {theme}

  <button onClick={() => setTheme('light')}>
    Change To Light Theme
  </button>
</>
Enter fullscreen mode Exit fullscreen mode

)
}
}

Conclusion
In the end the useContext hook is very simple to use. All it does is provide a nice interface for consuming context data, but that interface is so much better than the original context consumer interface. Next time if you are working with context in your application make sure to give useContext a try.

If you want to learn React Js we strongly recommend AchieversIT
React Js Training In Bangalore

Image of Stellar post

Check out Episode 1: How a Hackathon Project Became a Web3 Startup ๐Ÿš€

Ever wondered what it takes to build a web3 startup from scratch? In the Stellar Dev Diaries series, we follow the journey of a team of developers building on the Stellar Network as they go from hackathon win to getting funded and launching on mainnet.

Read more

Top comments (0)

Image of PulumiUP 2025

Let's talk about the current state of cloud and IaC, platform engineering, and security.

Dive into the stories and experiences of innovators and experts, from Startup Founders to Industry Leaders at PulumiUP 2025.

Register Now

๐Ÿ‘‹ Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someoneโ€™s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay