{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/react-context-api/","result":{"data":{"markdownRemark":{"id":"a4c494af-2953-5b71-958b-b1debc482d89","excerpt":"React context API, In this article you will explore what is Context API, what is react context API and how to use it in your React project. The Context API is a…","html":"

React context API, In this article you will explore what is Context API, what is react context API and how to use it in your React project. The Context API is a React structure that enables you to exchange unique details and assists in solving prop-drilling from all levels of your application.

\n

What is Context API?

\n

The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to \"prop drilling\" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.

\n

Talking about the Context APIs, they’re a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease.

\n

React context API: How it works?

\n

React.createContext() is all you need. It returns a consumer and a provider. Provider is a component that as it's names suggests provides the state to its children. It will hold the \"store\" and be the parent of all the components that might need that store. Apart from the react context Provider, Consumer as it so happens is a component that consumes and uses the state. More information can be found on React's documentation page

\n

Context API will replace redux?

\n

No. Well, not entirely.

\n

Redux is great and came perfectly to answer the need for state management. Actually, it answered this need so well that it came to be known that you can't be a \"true\" React developer if you don't know your way around Redux.\nHowever, Redux has its disadvantages, and that's why it's important to know what Context API gives us that Redux doesn't:

\n\n

Important Note

\n

Redux is just a concept. If you are comfortable with using reducers and actions and don't find hindering than you may also create reducers and actions that wrap Context API as the store as Redux's author Dan Abramov explained in his medium article about whether Redux is always required

\n

How to use Context API?

\n

You might think to yourself: \"Well, I'm convinced. How do I implement Context API in react for my app?\" First, make sure you need it. Sometimes people use shared state across nested components instead of just passing it as props. And if you do need it you should follow these very few steps:

\n
    \n
  1. Create a folder under your app root named contexts (not required. just a convention)
    2. \n
  2. Create a file named <your context name>Context.js, e.g. userContext.js
    3. \n
  3. import and create a context like so:
    4. \n
\n
import React, { createContext } from "react";\nconst UserContext = createContext();
\n
    \n
  1. Create a component that will wrap the provider named Provider e.g. UserProvider
    \nExample using React Hooks:
    2. \n
\n
const UserProvider = ({ children }) => {\n  const [name, setName] = useState("John Doe");\n  const [age, setAge] = useState(1);\n  const happyBirthday = () => setAge(age + 1);\n  return (\n    <UserContext.Provider value={{ name, age, happyBirthday }}>\n      {children}\n    </UserContext.Provider>\n  );\n};
\n
    \n
  1. Create a higher order component to consume the context named: with e.g. withUser
    \nExample using React Hooks:
    2. \n
\n
const withUser = (Child) => (props) => (\n  <UserContext.Consumer>\n    {(context) => <Child {...props} {...context} />}\n    {/* Another option is:  {context => <Child {...props} context={context}/>}*/}\n  </UserContext.Consumer>\n);
\n

The difference between the two options above is if you want the context to be a single nested property by this name, to explode it to its properties (which in my opinion is more convenient).

\n
    \n
  1. Finally export them
    2. \n
\n
export { UserProvider, withUser };
\n
    \n
  1. And use them however you like
    \nFor example:
    2. \n
\n
ReactDOM.render(\n  <UserProvider>\n    <App />\n  </UserProvider>,\n  document.getElementById("root")\n);
\n
export default withUser(LoginForm);
\n

You'll also be able to notice I used the new \"Hooks\" feature that is shipped with React since version 16.8 to make it even neater and easier to create contexts.

\n

Final piece of advice

\n

I mentioned how people overuse Redux, and it also applies to Context API. Use it only when you need to share state between lot's of components with a lot of nesting.\nMost of the time, the data you have in one component will only be relevant to its children, so passing it in props is more indicative and nicer.

\n","headings":[{"value":"What is Context API?","depth":2},{"value":"React context API: How it works?","depth":2},{"value":"Context API will replace redux?","depth":2},{"value":"Important Note","depth":3},{"value":"How to use Context API?","depth":2},{"value":"Final piece of advice","depth":3}],"fields":{"slug":"/engineering/react-context-api/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"Context API is a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease. Let's see how to use it.","title":"React Context API: What is it and How it works?","canonical":null,"date":"October 07, 2020","updated_date":null,"tags":["React","Redux","Hooks"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5151515151515151,"src":"/static/6fc42d03576ecaa3bcc58404bdc7afc5/2ad7f/react.webp","srcSet":"/static/6fc42d03576ecaa3bcc58404bdc7afc5/1c9b5/react.webp 200w,\n/static/6fc42d03576ecaa3bcc58404bdc7afc5/f1752/react.webp 400w,\n/static/6fc42d03576ecaa3bcc58404bdc7afc5/2ad7f/react.webp 800w,\n/static/6fc42d03576ecaa3bcc58404bdc7afc5/e7405/react.webp 1200w,\n/static/6fc42d03576ecaa3bcc58404bdc7afc5/d9dbc/react.webp 1499w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Eylon Ronen","github":"eylonronen","bio":null,"avatar":null}}}},"pageContext":{"id":"a4c494af-2953-5b71-958b-b1debc482d89","fields__slug":"/engineering/react-context-api/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}