Accessing Context with useContext()
Learn how touse Hooks to pass data throughout our app without manually passing props down the tree.
We'll cover the following
What is useContext
?
The third and final basic Hook is useContext()
. It allows us to consume data from a Context Provider
without having to define a Provider
component with a function as a child.
The useContext()
Hook is passed a Context
object, which you can create by using
React.createContext()
. It will then return the value of the next higher-up provider in the component hierarchy. If the value in the Context
is changed within the provider, the
useContext()
Hook will trigger a re-render with the updated data from the provider. That just about sums up the functionality of the useContext()
Hook.
Example
In practice, what we’ve discussed translates to something like the following example:
Get hands-on with 1200+ tech skills courses.