Context API in React with Hooks.

| Prerequisite

  • Both Component A and B are rendered in the main APP component.
  • Component B requires some state value from Component A
  • This is not possible, right? Because all the state values reside in Component B

| This is where the Context API comes into the picture

  • Context API is the way to create global variables that can be passed around the component tree.
  • Context API is an alternative to passing props manually in a component tree. Something that is also called Prop drilling.
  • And as per the React documentation: Context is primarily used when some data needs to be accessible by many components at different nesting levels.

| Let’s create our Context API

<APP>   <Component A />   <Component B /></APP>
import React, { createContext, useState } from 'react';export const AppContext = createContext();
const { Provider } = AppContext;export const AppProvider = (props) => {  const [message, setMessage] = useState("My name is context");return(   <Provider value={[message, setMessage]}>      {props.children}   </Provider> );}
import {AppProvider} from "./Context.js"      <AppProvider> <Component A /> <Component B />     </AppProvider>
Import {AppContext} from "./Context.js"Import {useContext} from "./Context.js"const ComponentB = () => {  // This is how we consume the context with hooks.  const [message, setMessage] = useContext(AppContext);  // Use the state as you want.}

| Things to Remember while using Context

  • Context should not be used as a replacement for the state, to avoid prop drilling. Always use the local state over the global state when you can.
  • If you want to change something in the context (say if we change the message in the above code by using the SetMessage method), every time you update that state value it will re-render all the components that use the Context.
  • Don’t wrap your whole App inside the Context Provider, this can be an overkill. Try to narrow down the component tree to the lowest possible Parent component that can be wrapped within the Provider.

| Conclusion

  • Use createContext() to create the Context
  • Pull the Provider out of Context created from createContext()
  • Wrap your Parent component with the Provider
  • Consume the context with useContext() hooks




A midget with a large mouth. Coder by mistake.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Clone of

Build your first Serverless App

Relevant Code Sharing

Optimizing WordPress Sites With Page Speed Test

JavaScript Method

Web performance — A PoC by example

Angular — Unit Testing Pipes

A better way to do code documentation

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Danish Khurshid

Danish Khurshid

A midget with a large mouth. Coder by mistake.

More from Medium

[React] Unit Testing with React Router

How to create nested dynamic routes using React Router v6

React Redux

Redux Toolkit — The cheat sheet for Redux development