36
Context API: Why and How
One of the key features of React is one-way data binding which enables us to send props data from only parents to children. This is very useful as it’s easy to understand from where the data is passed into that component. But imagine a situation, where we are required to send data to more than 5 layers down!
The code starts to get messy from now on. Besides, it requires a lot of code repetition, unnecessary data passing to children which don’t need the data for themselves but to pass to their children, and difficult to maintain. This scenario is termed ‘prop drilling’.
<div user={user}> —(1)
<div user={user}> —(2)
<div user={user}> —(3)
<div user={user}> —(4)
<div user={user}> —(5)
<div user={user}> —(6)
<div user={user}> —(7)
<h2> {user.name} </h2>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
From the above abstraction, we see the prop is drilled to 7 layers down to get the user props data which is very difficult to keep track of. There is a better approach to avoid this situation which is using
context API
. Context API is used to create centralized data, much like global variables which can be accessed from anywhere. One may think of Redux
(acts like a store that stores data and the store can be accessed from anywhere), but that is used in large and complex applications that require a lot of states to maintain. But that’s another story, we will stick to context API for now. import React from 'react';
const AuthProvider = () => {
return (
<div>
</div>
);
};
export default AuthProvider;
import AuthProvider from './Context/AuthProvider';
import User from './Component/User';
function App() {
return (
<div>
<AuthProvider>
<h2>Context API intro</h2>
<User></User>
</AuthProvider>
</div>
);
}
export default App;
React provides createContext API, which Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.
Notice, the created AuthContext is used is AuthProvider and provided a user as value. Also, children is taken as props and AuthContext is exported as the context will be consumed later.
Notice, the created AuthContext is used is AuthProvider and provided a user as value. Also, children is taken as props and AuthContext is exported as the context will be consumed later.
import { useContext } from "react";
import { AuthContext } from "../Context/AuthProvider";
const useAuth = () => useContext(AuthContext)
export default useAuth;
useContext hook is used to consume the context we created earlier.
import AuthProvider from './Context/AuthProvider';
import User from './Component/User';
function App() {
return (
<div>
<AuthProvider>
<h2>Context API intro</h2>
<User></User>
</AuthProvider>
</div>
);
}
export default App;
import React from 'react';
import useAuth from './../hooks/useAuth';
const User = () => {
const user = useAuth()
console.log(user);
return (
<div>
user name: {user.name}
</div>
);
};
export default User;
Finally, we have access to the value that was provided in the AuthProvider.
All the corresponding codes will be available here.
36