React useContext: A hook to make the use of react context more reader-friendly

Hey Guys, Welcome Back!
Continuing from where we left in the previous post, where I introduced a way to introduce lifecycle methods in functional components using react useEffect hook, the next question that comes to my mind is, Through the useState and useEffect weapon we got all the supplies(state) stored in the arsenal and got a guide to tell how and when to use the supplies, but now we since some guides can be global how to take them till the component without telling each component to pass that guide. For passing some global guides directly to the players that need its help, today we will be discussing the weapon known as the useContext hook.

useContext-

useContext accepts a context object (the variable returned from React.createContext) and returns the current context value for that context. The current context value is determined by the value prop of the nearest <MyContext.Provider> above the calling component in the tree.

const value = useContext(MyContext);

What is react context?
Context provides a way to pass data through the component tree without having to pass props down manually at every level.

The official react documentation covers when to use context, stating the same here,

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.

For more information and some examples, you can refer the official documentation.

How was context in react getting used before useContext Hook?

As you might have seen, we did not pass any props to the child apps instead we wrapped our content in a Consumer and used the render props pattern (i.e passing a function as a child ) to retrieve the value and display it.

How can context in react be used with the useContext Hook?

The useContext Hook provides the same functionality you’d expect from the Context API, just in a simple and reader-friendly way packaged up into a hook.

Details:

1. A Context provides both a consumer and a provider. When using the useContext Hook in React, one important thing to remember is to pass the whole context object, not just the consumer or provider.
2. As mentioned in the official documentation, component calling useContext will always re-render when the context value changes. If re-rendering the component is expensive, you can optimize it by using memoization. We will cover about memoization later in the series while discussing useMemo().

That’s all from my side, thank you so much for reading the blog. I will be continuing this series and will keep on discussing different hooks.

This story is a part of the ongoing series about react hooks -

React Hooks: A transition of functions from stateless to stateful components

React useEffect : A hook to introduce lifecycle methods in functional components

React useContext: A hook to make the use of react context more reader-friendly