{"id":2408,"date":"2019-12-23T09:46:25","date_gmt":"2019-12-23T08:46:25","guid":{"rendered":"https:\/\/pagepro.co\/blog\/?p=2408"},"modified":"2024-11-25T09:10:28","modified_gmt":"2024-11-25T08:10:28","slug":"what-is-react-context-and-how-to-use-it","status":"publish","type":"post","link":"https:\/\/pagepro.co\/blog\/what-is-react-context-and-how-to-use-it\/","title":{"rendered":"What is React Context And How To Use It?"},"content":{"rendered":"\n

If you’re having a problem with passing property to a component just to pass it further down to child, React Context<\/a> is exactly what you need.<\/p>\n\n\n\n

By the definition, React Context provides us with a possibility to pass data through the component tree, so you don\u2019t need to pass props down manually at every level. <\/p>\n\n\n\n

In other words, we can compare context to a global object of our React App<\/a>.<\/p>\n\n\n\n

Prop drilling problem<\/h2>\n\n\n\n
\"Tree<\/figure>\n\n\n\n

React components structure is like a tree. Each child has only one parent and everyone is connected to the main root component. Thanks to this structure we have only one direction flow \u2014 we can pass props from top to bottom. <\/p>\n\n\n\n

When we need to pass prop through a lot of components (f.ex from root to A3) it becomes a little bit annoying, and we called it a prop drilling problem. React Context comes to the rescue.<\/p>\n\n\n\n

\"Tree<\/figure>\n\n\n\n

When we need to make some of the data global in our app, or we would like to use them in a few components on a different deeply nested level in the app structure, we definitely should use React Context. <\/p>\n\n\n\n

It gives us access to the data on each level of our React App tree structure.<\/p>\n\n\n\n

How to create Context?<\/h2>\n\n\n\n

The way of creating context is to import createContext<\/code> the method from React library and invoke it with defaultValue<\/code> – it is not required but can be helpful when a component has not matched Provider in the tree. <\/p>\n\n\n\n

Moreover, using defaultValue<\/code> during creating React Context is important in testing components as separated from others.<\/p>\n\n\n\n

import { createContext } from 'react'\ncreateContext('defaultValue')<\/code><\/pre>\n\n\n\n
Example of creating Context<\/h2>\n\n\n\n
export const CountryContext = createContext({})\nexport const LanguageContext = createContext('en')\n<\/code><\/pre>\n\n\n\n
TIP:<\/strong> Good practice is to have a separate files for creating contexts.<\/p>\n\n\n\n
How can we pass down Context?<\/h2>\n\n\n\n
Create Context method returns an object with Provider and Consumer. <\/p>\n\n\n\n
Thanks to Provider we can pass props down in our app structure. Provider component has a prop – value<\/code> – which allows us to pass data assigned to this prop to all descendants (in value<\/code> we can pass an object, number, function etc…)<\/em>. One Provider can be connected to many consumers. <\/p>\n\n\n\n
Furthermore, Provider can be nested, thanks to that we can override passed data in value<\/code> prop deeper within the app. <\/p>\n\n\n\n
If value<\/code> prop changes all consumers of a Provider will re-rendered.<\/p>\n\n\n\n
const { Provider } = createContext('defaultValue')<\/code><\/pre>\n\n\n\n
Example of using Provider<\/h2>\n\n\n\n
<CountryContext.Provider\n  value={{\n     setSelectedCountry,\n     selectedCountry\n   }}\n>\n  <LanguageContext.Provider\n    value={{\n       lang: selectedLanguage,\n       setSelectedLanguage\n     }}\n  >\n    <header> ...\n    <main> ...\n    <footer>... \n  <LanguageContext.Provider>\n<\/CountryContext.Provider><\/code><\/pre>\n\n\n\n
WANT TO USE REACT IN YOUR PROJECT? <\/p>
SCHEDULE A FREE CALL WITH OUR EXPERT. <\/a><\/div><\/div><\/div>\n\n\n\n
How can we get Context?<\/h2>\n\n\n\n
We can have access to data which we passed to value<\/code> prop in Provider thanks to subscriber called Consumer. <\/p>\n\n\n\n
The Consumer component requires a function as a child that has the context current value in an argument and returns a React Node element. <\/p>\n\n\n\n
const { Consumer } = createContext('defaultValue')<\/code><\/pre>\n\n\n\n
Example of using context by Consumer<\/h2>\n\n\n\n
<CountryContext.Consumer>\n  {({ selectedCountry }) => (\n    <h1>\n      {selectedCountry.name}\n    <\/h1>\n  )}\n<\/CountryContext.Consumer><\/code><\/pre>\n\n\n\n
In this example we use CountryContext<\/code> to have access to selected country. We create function returning country name which we received in an argument of it (the newest applied context)<\/em>.<\/p>\n\n\n\n
Example of using Context Consumer as a hook<\/h2>\n\n\n\n
import React, { useState, useContext } from 'react'\nimport axios from 'axios'\nimport { CountryContext } from '.\/contexts'\nimport { pushErrorNotification } from '.\/utils'\n\nconst SearchBox = () => {\n  const [searchValue, setSearchValue] = useState('')\n  const {\n    setSelectedCountry\n  } = useContext(CountryContext)\n\n  const searchCountry = () => {\n    axios.get(`${endpoint}${searchValue}`)\n      .then(({ data }) => {\n        setSelectedCountry(data)\n      })\n      .catch(() => pushErrorNotification('Sth went wrong.'))\n  }\n\n  return (\n    <div className=\"search-wrapper\">\n      <input\n        type=\"text\"\n        id=\"search\"\n        name=\"search\"\n        value={searchValue}\n        placeholder=\"Search for...\"\n        onChange={({ target }) => setSearchValue(target.value)}\n      \/>\n      <button onClick={() => searchCountry()}>\n        Search\n      <\/button>\n    <\/div>  \n  )\n}\n\nexport default SearchBox<\/code><\/pre>\n\n\n\n
Here we have a SearchBox<\/code> component where we can type desirable country name and find some info about it. Thanks to useContext<\/code> hook, we can quickly set found country on current displaying details by setSelectedCountry<\/code> method.<\/p>\n\n\n\n