paint-brush
Understanding the useContext Hook for Efficient State Management in Reactby@pawelboguta
555 reads
555 reads

Understanding the useContext Hook for Efficient State Management in React

by Pawel Boguta
Pawel Boguta HackerNoon profile picture

Pawel Boguta

@pawelboguta

React dev :)

March 28th, 2023
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

UseContext is 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. It is useful when our context grows in size and complexity and we have multiple states with numerous functions. When to transition to state management libraries?
featured image - Understanding the useContext Hook for Efficient State Management in React
1x
Read by Dr. One voice-avatar

Listen to this story

Pawel Boguta HackerNoon profile picture
Pawel Boguta

Pawel Boguta

@pawelboguta

React dev :)

Learn More
LEARN MORE ABOUT @PAWELBOGUTA'S
EXPERTISE AND PLACE ON THE INTERNET.


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).

image


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

image


image


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.


image


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


image


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.


image

Accessing values from our context.


image


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

L O A D I N G
. . . comments & more!

About Author

Pawel Boguta HackerNoon profile picture
Pawel Boguta@pawelboguta
React dev :)

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Coffee-web
Unni
Hashnode
Learnrepo
X REMOVE AD