Using the context API in React (hooks and classes)

Tram Ho

The React context API is a basic way to create global variables that can be passed in the React application. This is an alternative method for “prop drilling”, or passing props from grandfather to father and child, etc. Context is often considered to be simpler, softer to use Redux for state management. . This article will cover some concise, concise steps to get started with Context.

You should read Getting Started with React or Build a React App with Hooks if you are new to React or React hook.

Create context

Imagine having some information you want to be able to use anywhere in the React application. A topic can be done using a Context – for example, on this page, there is a Context serving three topics: dark mode, light, and MS-DOS (on a 404 page). In this simple example, we will use a logged in user.

Create a Context, and call it UserContext. This will provide UserContext.Provider and UserContext.Consumer. What these two components do is simple:

  • Provider: component that provides value
  • Consumer: value component So let’s create it with React.createContext () in a new file called UserContext.js

Pass an empty object in the string to indicate that this data can be filled later by calling the API. You can pre-populate this data with any data you want, in case you don’t retrieve the data via the API.

Providing Context

The provider always needs to exist as a wrapper around the parent element, regardless of the value you choose to consume. We will include the App component in the Provider. Only create a few user values ​​and pass it down as the Prop Provider value.

Now any children, grandchildren, great-grandchildren, etc. will be able to access the user as a prop. Unfortunately, getting this value is a bit more involved than simply getting it as you can with this.props or this.state

Consumer context

The way you provide context is the same for classes and functional components, but its use is a bit different.

Class component

The traditional way to retrieve Context values ​​is by wrapping the child components in Consumer. From there, you will be able to access prop values ​​as props.

But what about the life cycle method? What if you need values ​​from the external context of the render? Mode of restriction is limited. Instead, we can do this in a class with contextType, which is a static variable in the class.

Functional component and Hooks

With Functional component, you will use useContext as the example below. This is equivalent to static contextType .


  • Use const xContext = React.createContext() to create the context.
  • Drag xContext.Provider and xContext.Consume r out of xContext
  • Provider surrounds parent component
  • A class can be used with static contextType = xContext
  • A functional component can be used with const x = useContext(xContext)


Share the news now

Source : Viblo