Working With React Context Hooks
Damilare Abogunrin is a skilled Content Writer with expertise in the niches of Blockchain, Casinos/iGaming and Artificial Intelligence. With a passion for technology and a sharp eye for detail, Damilare consistently delivers high-quality content that engages and informs readers.
He has a strong ability to translate complex technical concepts into easily digestible information, making him an asset to any organization in need of clear and concise writing on cutting-edge technologies. His in-depth knowledge of Blockchain, Casinos/iGaming and Artificial Intelligence allows him to produce content that is both accurate and engaging.
Damilare is a creative thinker who approaches each project with a unique perspective, bringing a fresh voice to the content he creates. Whether writing blog posts, articles or whitepapers, Damilare always strives to provide value to his clients and their audiences.
“Context provides a way to pass data through the component tree without having to pass props down manually at every level.” — React
Without React Context …
When you need to tell a child component about a change in the state notified by the principal and root components, we pass state from one component to another until we reach the child component. We need to inform it about the change.
The problem with this: At some point, when we end up passing from one to another component and so on. We have a phenomenon knows as Prop Drilling. The components we used in between the component that changed the state and the one that needs to know about that doesn't use the props for themself. They are just passing it until it reaches the child component we want to inform.
Those pôor components end up like a bridge that passes data through React props.
With React Context hooks …
Context's job in React is to share data or the app state across all the app components. This means that the props can be accessed from any component. Therefore, no need to pâss props through other components to send it at the end to our destination component. Less code, less debugging hassle, and more code visibility.
##When to use React Context Context is designed to share data that can be considered as "global" to the whole app. An example would be the authenticated user, a theme, or user preferences.
I've already used Context in the practical guide of building dark mode toggle. If you are interested in how I implemented this with React Context, here it is:
