Understanding the useContext Hook for Efficient State Management in React

When it comes to building robust and scalable application, as it grows in size and complexity, managing state becomes more and more challenging and that's when useContext hook might come in handy.

1. What is useContext?
2. Basic example
3. When to use it?
4. React/Typescript template for useContext
5. When to transition to state management libraries?

So what is useContext?

It's one of many built-in React hooks. It uses React's Context API, which allows components to consume context values without the need to pass props down the component tree (prop drilling).

That's exactly what we are trying to avoid while implementing useContext hook. When our component tree grows, we don't want to rely on passing data only via props.

A basic example of using useContext

All components which are wrapped around our provider will have access to our weather object. Context can also store functions and states, which is handy.

Examples of when to use useContext

• Theme switching
• User authentication (JWT token)
• Language Selection
• Navigation (if it gets complex)

A rule of thumb is to use context when we need to access our data globally across all of our components and the data is not changing frequently, then state management libraries might be better.

Template for useContext with Typescript

I remember when I taught myself useContext and started using it, it made my App component huge as with application complexity had been growing, I had been adding more and more states, functions and providers. Later I developed a way of creating a separate file for each context and exporting it as a component.

I will provide you with this code at the end of the article.

First, we import stuff and write types for our context and props to our component with a context provider.

That's what our provider component looks like. It is useful when our context grows in size and complexity and we have multiple states with numerous functions (however, at some point, you might consider switching to a state management library eg. redux). For example, if we create our models from scratch, we can also use here useLocation hook to manipulate our state.

Accessing values from our context.

It's not a bad idea to have AppProviders component wrapping all of our providers from context, redux store etc.

When to not use context (and transition to state management libraries)

Context API, therefore useContext hook is useful when our data and application are not complex and should be used only when we know that data is not changing frequently so it won't affect performance. State management libraries such as redux are designed for large and complex apps providing state management across your entire application, although developers should find a way to balance between those two as redux might not be the best to manage state of some modal or color theme as React's Context API is great for it and does its job.

In summary, useContext is a powerful tool in the React developer's toolkit, but it's important to know your specific needs and choose the right state management solution for your application, as it may not provide the scalability and robustness needed for large and complex applications. With the right approach, you can build high-quality, maintainable React applications that provide a great user experience.

Code template: https://pastecode.io/s/6u9tvhnw

First image source: https://openclassrooms.com/en/courses/7315991-intermediate-react/7572062-share-your-data-with-context-and-usecontext

Useful video (gets way deeper into management libraries):

Also Published Here