This content originally appeared on DEV Community and was authored by Kazi Md. Mehedi Hasan
The notion of Context API was first introduced in React with the release of version 16.3 .
By this React applications have become easier in terms of the global state concept.
What is Context API?
Context API is an idea to produce global variables. These variables then can be passed around within the application. Any component that requires to access the variables AKA “state” can easily be done with the help of Context API. One can say that Context API is a lightweight version of Redux.
How does it work?
There’s a built-in function in react called createContext(). This function is required to incorporate Context API in any React application.
createContext() returns a Provider and a Consumer. Provider serves the children components with state. If you have any idea about redux store provider kind of acts like that. If you’re not familiar with redux that’s absolutely fine. Think Context API as a Jug of Juice and to all the components it supplies juice via the Provider. Take the components as mugs to which you’re going to pour juice. Juice here represents the passable state, Provider as a funnel through which juice doesn’t go outside the mugs.
Consumers are the component which takes in the states and uses them. In terms of our analogy The “Mugs” are the Consumers.
Why use Context API?
We often need to pass our state across components. Sometimes what happens is that we need to pass state in multiple components in the application. And those happen to be in multiple level. In those scenarios, we need to do some improvisations. Either we do lift up state or we have to drill the props. Which is repetitive. We may have to pass a prop to a component where we are never going to use that prop. It just acts as a corridor for that prop to pass. It makes the application unorganized. To get rid of this inconvenience, Context API was introduced in React V16.3. Which eliminates code repetition and makes the process satisfactory.
How to use Context API?
No hanky panky! We’ll go straight down to the example to understand the Context API better.
- Create a folder called contexts(convention) in your root app directory.
- Create a file with a name you like , i.e customContext.js
- Create context with the help of “createContext()” function and import it in your custom context file.
import React, { createContext } from "react";
const CustomContext = createContext();
- Create a component that will wrap the child components with provider.
const CustomProvider = ({ children }) => {
const [name, setName] = useState("Kamaluddin Jaffory");
const [age, setAge] = useState(1);
const happyBirthday = () => setAge(age++);
return (
<CustomContext.Provider value={{ name, age, happyBirthday }}>
{children}
</CustomContext.Provider>
);
};
5.Create a higher order component to receive the context. The standard naming convention starts with “with”.
const withUser = (Child) => (props) => (
<CustomContext.Consumer>
{(context) => <Child {...props} {...context} />}
{/* Another option is: {context => <Child {...props} context={context}/>}*/}
</CustomContext.Consumer>
);
Then export them
export { CustomProvider, withUser };
And finally use them however you like the most.
return(
<CustomProvider>
<App/>
</CustomProvider>
)
This content originally appeared on DEV Community and was authored by Kazi Md. Mehedi Hasan
Kazi Md. Mehedi Hasan | Sciencx (2021-12-23T16:22:36+00:00) Context API. Retrieved from https://www.scien.cx/2021/12/23/context-api/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.