What’s the right solution for React state management?

State management is the backbone of every React application, impacting its performance, scalability, and maintainability. It helps you efficiently maintain and share data across components. However, as applications grow, managing state can become challenging, leading to issues like prop drilling, redundant state updates, and performance bottlenecks. Choosing the right solution can make the difference between a smooth user experience and a buggy, unresponsive app.

But fear not! In this blog, we'll have a look at the React context API and some of the most used external stores, exploring their strengths, weaknesses, and best use cases. By the end, you'll know exactly when to use each one — or even both together.

At the end of this blog, you'll find a detailed example provided by our awesome colleague Jovan, to help you better understand these concepts! ??

State management options in React

React provides several ways to manage state:

Local state

The simplest form of state management in React is using component state, often referred to as local state. This is managed within a single component using the useState hook. It’s perfect for handling data that doesn’t need to be shared across components, like form inputs or simple counters.

React context API

React context is a built-in React tool that allows you to create a context object and a provider component that can pass state down through the component tree without needing to pass props manually at every level. This approach is great for themes, user authentication, and other global settings.

React context consists of 3 main parts:

1. Context – you create a context using React.createContext(). This returns a Context object that can be used to provide and consume the context value.
2. Provider component – it’s used to wrap the parts of your app that need access to the context. It accepts a value prop, which is the data that will be available to all descendant components.
3. Consumer or useContext hook – components that need access to the context value can use the Consumer component or the useContext hook.

While React context provides a convenient way to share data, it comes with some performance considerations – every time the value provided by the Provider changes, all components consuming that context will re-render. This can lead to performance issues, especially if the context is large or globally wraps the app with updating data frequently.

Pros:

• Context provides a way to encapsulate data within a specific part of the application, ensuring that only components within the Provider can access the context value.
• It’s straightforward to implement and use, so it’s a great choice for simpler state management needs.
• Being part of React, it doesn’t require additional libraries, reducing the need for external dependencies.

Cons:

• Any component subscribed to the context will re-render whenever the provided value changes, potentially leading to performance bottlenecks.?
• It’s not ideal for very large applications with highly complex state interactions, where more structured state management solutions might be needed.

External stores

External stores are third-party libraries designed to manage state outside of the React component tree. These libraries provide a more structured and scalable approach to state management and they’re highly beneficial in managing state for large and complex React applications.?

They’re particularly useful in scenarios where you need to share state across different parts of your application without causing unnecessary re-renders. You can subscribe to specific parts of the state, improving performance by updating only the components that need to be re-rendered.?

Here are some popular React external stores:

• Redux – a popular state management library that provides a more structured approach to managing global state. It uses a single store to hold the state of the entire application and actions to describe state changes. Redux is highly predictable and makes state management very explicit, but it requires a lot of boilerplate.

• MobX – another state management library that uses observables to track state changes. It allows for reactive programming, where changes in state automatically propagate through the system. MobX is less opinionated than Redux, making it more intuitive for those familiar with object-oriented programming.

• Zustand – a small, fast, and scalable state management library. Zustand is a German word for “state”. It’s less boilerplate than Redux and uses hooks to manage state.

• Recoil – a new state management library for React that provides a way to manage shared state using atoms and selectors. Developed by Facebook, it integrates well with concurrent mode and React’s new features. Recoil makes it easy to manage complex states with minimal boilerplate and improved performance.

Pros:

• You can subscribe to specific parts of the state, preventing unnecessary re-renders of components that depend on other state parts.
• The state and its functions, once defined, are accessible anywhere in the application, making it a true global state.
• They offer strong debugging tools like Redux DevTools and a more structured approach.

Cons:

• Since the state is globally accessible, it can be challenging to encapsulate data, leading to potential misuse.
• For small to medium-sized apps, the overhead of setting up and maintaining an external store may be overwhelming.
• The learning process can be more challenging compared to local state and context, since there are a lot of new concepts to understand.

Can we make our own external store without third-party packages? ??

Yes, we can! Starting from version 18, React provides the useSyncExternalStore API which allows us to subscribe to a state defined outside of React and write our own implementation of an external store. This means we don't necessarily need third-party packages to manage external state!

So, what’s the best choice to make?

One of the main disadvantages of external stores is the inability to encapsulate data.? However, there's a solution that combines the performance benefits of external stores with the encapsulation provided by React context. By using regular context, you can subscribe to specific parts of the state and avoid unnecessary re-renders of other components.

To achieve this, initialize the external store within the Provider component, ideally using the useState hook for the default state value, and pass that state to the Provider. This approach ensures the state of the external store is set once during the rendering of the Provider component. By maintaining a consistent state value without changing it through setState, you prevent re-renders of all components subscribed to that context.

This way, the encapsulation of data stored in the external store is enabled while retaining the advantages of preventing re-renders of components where the part of the state has not changed. So, by combining external stores with React context, you can achieve the best of both worlds ?

Practical example

Want to see these concepts in action? Check out the example application prepared by our colleague Jovan on StackBlitz ??

In the example, an external store is defined in the index file and instantiated using the createStore function, which internally uses the useSyncExternalStore hook.?

While we don't need to detail the implementation here, it's important to note that creating a custom external store without packages is indeed possible.

Open the console and track component re-renders as the state changes in all three modes to fully understand their behaviour!

With the right state management strategy, you'll be well-prepared to overcome the challenges of building dynamic and responsive React applications.?

What state management solution do you prefer for your React projects? Leave a comment below to share your experiences. For more insights and detailed articles, explore our blog section at Ncoded Solutions.

Happy coding and may your apps always run smoothly! ??