Using context

The context API is designed to contain data that is common for a number of components in the application. Data in top-level context can be considered global.

Creating context

The context object will be required to both write and read data in the context. It's best to have it in a separate file.

import React from "react";

export const MessageContext = React.createContext("Hello!")

The createContext method takes an optional default value and returns the context object that contains both the provider (write data) and consumer (read data) bits:

interface Context<T> {
    Provider: Provider<T>;
    Consumer: Consumer<T>;
    displayName?: string;
}

Using the context

The easiest way to use context is the useContext hook:

import React, { useContext } from "react";
import MessageContext from "./message-context";

const Message: React.FC = () => {
  const message = useContext(MessageContext);

  return <h1>{message}</h1>;
};

export default Message;

Given the Context object created earlier, the useContext hook returns the current context's value.

Providing values

The above code will work without any modifications - it will just show the default value provided when creating the context.

Using the Context.Provider component its possible to provide a different value:

import MessageContext from "./message-context";
import Message from "./Message";

function App() {
  return (
    <MessageContext.Provider value="Hello, Devmeetings">
      <Message />
    </MessageContext.Provider>
  );
}

Resources

PreviousProp drillingNextTasks

Last updated