Understanding ReactJs Context
What is Context in ReactJS?
React context helps programmers pass down and use data without the use of props. You should use context in React hooks when you need to pass data that can be used in any component in your React application.
This type of data can be:
-
Themes (like dark or light)
-
User data
-
Location-specific data
One thing you should remember here is that data placed in context in ReactJS should be such that it doesn't need frequent updates. This is because context is not a state management system. It’s just a means to make data consumption easier and convenient.
Example:
import React from 'react';
export const UserContext = React.createContext();
export default function App() {
return (
)
}
function User() {
return (
{value =>
<h1>{value}</h1>
}
{/* prints: Reed */}
)
}
In this example, we are passing down our own name using Context and reading it in a nested component.
It’s Quiz Time!
