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 hook might come in handy. useContext What is useContext? Basic example When to use it? React/Typescript template for useContext When to transition to state management libraries? So what is useContext? It's one of many built-in . 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). React hooks That's exactly what we are trying to while implementing useContext hook. When our component tree grows, we don't want to rely on passing data only via props. avoid 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 ). For example, if we create our models from scratch, we can also use here hook to manipulate our state. eg. redux useLocation 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 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. such as redux In summary, 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. useContext 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): https://youtu.be/MpdFj8MEuJA?embedable=true Also Published Here

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Understanding the useContext Hook for Efficient State Management in React

Too Long; Didn't Read

Pawel Boguta

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Understanding the useContext Hook for Efficient State Management in React

Too Long; Didn't Read

Pawel Boguta

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES