{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/react-context-api-guide-with-example/","result":{"data":{"markdownRemark":{"id":"1c0d26a0-dd8e-570f-8386-035f50a682cd","excerpt":"React's Context API Guide with Example In this blog, You will learn What React's Context API is and how to use React's Context API. It is very much used as a…","html":"

React's Context API Guide with Example

\n

In this blog, You will learn What React's Context API is and how to use React's Context API. It is very much used as a state management tool, oftentimes replacing Redux.
\nAccording to the React doc:

\n
\n

Context provides a way to pass data through the component tree\nwithout having to pass props down manually at every level.

\n
\n

To be more clear, this provides a way for you to make values available to all components of your application, no matter how complicated your application is.

\n

When to use context

\n
const App = () => {\n  return(\n    <ParentClass color= "blue"/>\n  );\n}\n\nconst ParentClass = (props) => (\n  <ChildClass color= {props.color} />\n)\n\nconst ChildClass = (props) => (\n  <GrandChildClass color= {props.color} />\n)\n\nconst GrandChildClass = (props) => (\n  <p>Color: {props.color}</p>\n)
\n

In the above code, we designed the application in which used color props in the ParentClass and passed that props to all component (top to down) without checking that it is required by the child class or not and another issue also here that in case if GrandChildClass component was more deeply nested than it was very difficult to manage. This is the problem that Context solves. Context is designed the share values that can be considered \"global\" such as preferred language, current user, or theme.

\n

Using context, we can avoid passing props. Let's create the above example code using context:

\n

We will create a separate component for context that we can use throughout the components.\nOnce you have initialized your project, create a file called ColorContext.js in your /src folder.

\n

Create Context

\n

Using React.createContext, we can create context and pass anything as an argument to React.createContext. In our case, we are passing \"white\" color to provide a light theme.

\n

This will also give me ColorContext.Provider and ColorContext.Consumer. What these two components do is straightforward:

\n\n

To use this context all over the components, we have to use the provider. According to React document, every context object comes with a Provider React component that allows consuming components to subscribe to context changes.

\n

Providing Context

\n

After successfully creating context, we can import context and use it to create our provider.\nAs we want to access context in the entire application, we need to wrap our app in ColorContext.Provider.

\n
import ColorContext from './ColorContext';\n    function App() {\n      const color= "white";\n      return (\n        <ColorContext.Provider value = {color}>\n            <div className="App">\n            <header className="App-header">\n              <img src={logo} className="App-logo" alt="logo" />\n              <h1 className="App-title">Welcome to my web page</h1>\n              </header>\n                </div>\n          </ColorContext.Provider>\n      );\n    }
\n

Consuming the context

\n

The approach to providing context is the same for class and functional components but consuming is a little different for both.

\n

class component

\n

Mainly used way to accessing context in class component using static contextType. After that, you can access the context value using this.context. You can refer to it in any lifecycle method and even in the render method.

\n
import ColorContext from './ColorContext'\n\nclass Page extends Component {\n  static contextType = ColorContext;\n\n  componentDidMount() {\n    const colorValue= this.context\n\n    console.log(colorValue) //  "white" \n  }\n\n  render() {\n    return <div>Color Value is {colorValue} </div>\n  }\n}
\n

The traditional way to accessing context values is by wrapping the child component in Consumer. From there, You can access values as props.

\n
import { ColorContext} from './ColorContext'\n\nclass Page extends Component {\n  render() {\n    return (\n      <ColorContext.Consumer>\n        {(props) => {\n          return <div>{props}</div>\n        }}\n      </ColorContext.Consumer>\n    )\n  }\n}
\n

Functional component and Hooks

\n

You can use useContextin functional components and its equivalent of static contextType. \t

\n
import React, { useContext } from 'react'\nimport ColorContextfrom './ColorContext'\n\nexport const HomePage = () => {\n  const colorValue= useContext(ColorContext)\n\n  return <div>{ColorContext}</div>\n}
\n

Updating Context

\n

We can update the context by updating the normal state. We just need to create a wrapper class that contains the state of context and the method to update it.\nExample code with file ColorContext.js

\n
import React, { Component } from 'react'\n\nconst ColorContext = React.createContext()\n\nclass ColorContextProvider extends Component {\n  // Context state\n  state = {\n    color:""\n  }\n\n  // Method to update state\n  setColor = (color) => {\n    this.setState((prevState) => ({ color}))\n  }\n\n  render() {\n    const { children } = this.props\n    const { color } = this.state\n\n\n    return (\n      <ColorContext.Provider\n        value={{\n          color,\n          this.setColor,\n        }}\n      >\n        {children}\n      </ColorContext.Provider>\n    )\n  }\n}\n\nexport default ColorContext\n\nexport { ColorContextProvider }
\n

Now you can update and view the user from the Context method.

\n
import ColorContext from './ColorContext'\n\nclass Page extends Component {\n  static contextType = ColorContext;\n\n  render() {\n    const { color, setColor } = this.context\n\n    return (\n      <div>\n        <button\n          onClick={() => {\n            const newColorValue= "black";\n\n            setColor (newColorValue)\n          }}\n        >\n          Update Color\n        </button>\n        <p>{`Current Color Value: ${color}`}</p>\n      </div>\n    )\n  }\n}
\n

In my opinion, It is much easier to use than Redux and requires very little code, so why wouldn't you use it?

\n

The problem with the context is simple: ** Everything that consumes the context re-renders each time the state of that reference changes. **

\n

This means that if you're consuming your context everywhere in your app, or worse, using one context for the state of your entire app, you'll end up re-rendering a ton everywhere.

\n","headings":[{"value":"React's Context API Guide with Example","depth":1},{"value":"When to use context","depth":2},{"value":"Create Context","depth":3},{"value":"Providing Context","depth":3},{"value":"Consuming the context","depth":3},{"value":"class component","depth":4},{"value":"Functional component and Hooks","depth":4},{"value":"Updating Context","depth":3}],"fields":{"slug":"/engineering/react-context-api-guide-with-example/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"Deep Dive into React's Context API with example","title":"React's Context API Guide with Example","canonical":"https://www.loginradius.com/blog/engineering/react-context-api/","date":"June 09, 2021","updated_date":null,"tags":["React","Redux","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/6a87bd8ebde082f5a6d9c7c0bb658776/2ad7f/title-image.webp","srcSet":"/static/6a87bd8ebde082f5a6d9c7c0bb658776/1c9b5/title-image.webp 200w,\n/static/6a87bd8ebde082f5a6d9c7c0bb658776/f1752/title-image.webp 400w,\n/static/6a87bd8ebde082f5a6d9c7c0bb658776/2ad7f/title-image.webp 800w,\n/static/6a87bd8ebde082f5a6d9c7c0bb658776/e7405/title-image.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Versha Gupta","github":"vershagupta","bio":"She is a software enthusiast, an avid contributor, and a regular blog writer. She usually works with React, UI/UX, Javascript, Node.js, and DevOps.","avatar":null}}}},"pageContext":{"id":"1c0d26a0-dd8e-570f-8386-035f50a682cd","fields__slug":"/engineering/react-context-api-guide-with-example/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}