30
loading...
Context API
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.
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.
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.
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.
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.
No hanky panky! We’ll go straight down to the example to understand the Context API better.
import React, { createContext } from "react";
const CustomContext = createContext();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>
)30