How to Use Valtio: A Simple and Powerful State Management Library for React (Part 1)

6 min readMar 31, 2024

If you’re looking for a state management library for your React project, you might be overwhelmed by the number of options available. Redux, MobX, Recoil, Zustand, and many more claim to offer the best solution for managing your application state.

But what if you want something simpler, lighter, and more flexible? Something that doesn't require a lot of boilerplate, configuration, or learning curve? Something that just works?

Meet Valtio, a library that makes proxy-state simple for React and Vanilla JavaScript. Valtio is based on the concept of proxies, which are objects that can wrap and intercept operations on other objects. With Valtio, you can create a global state object that can be mutated, subscribed, and suspended with ease. Valtio also supports React-suspense, Redux DevTools, and various features such as ref, useProxy, and computed properties.

In this article, I will guide you on how to use Valtio in a React application. We will start by creating a simple counter app to help you understand the basics. Moving forward, we will build a to-do list app to explore more of what Valtio can do. By the end of these two articles, you will have a solid understanding of how to use Valtio and why you might want to give it a try.

Creating a Simple Counter with Valtio

First, let’s create a counter component using Valtio. To use Valtio, you’ll need to install it using npm or yarn.

To use Valtio, you will need to import two functions: proxy and useSnapshot.

proxy creates a proxy object that represents your state,
while useSnapshot returns a snapshot of the proxy object that can be used in your React component.

💡 Whenever the proxy object changes, the snapshot will trigger a re-render.

Here's how you can create a counter state with Valtio:

Counter state using valtio proxy — Counter state

The proxy function takes an object as an argument and returns a proxy object. This proxy object can be accessed and modified like a normal object. For instance, you can increase the counter value by using the code counter.value++.

Let’s move forward by creating a React component that can display and update the counter value. For this purpose, we will use the useSnapshot hook, which takes the proxy object as an argument and returns a snapshot object.

💡 The snapshot object has the same properties as the proxy object, but
it is immutable and reactive.

You can use the snapshot object in your JSX, just like any other object.

Here's how you can create a counter component with Valtio:

When we use the useSnapshot hook, it returns a snapshot object that we can utilise to display the counter value. If we want to update the counter value, we can directly mutate the proxy object. Whenever the proxy object changes, the useSnapshot hook will automatically re-render the component.

So, we have successfully created a basic counter component with Valtio 🎉. Unlike other state management libraries, we do not need reducers, actions, selectors, or context providers. All we need is a proxy object and a snapshot hook. It’s pretty simple, isn’t it?

Benefits and Drawbacks of Using Valtio

In this section, we will discuss the benefits and drawbacks of using Valtio in a React application.

Benefits of Using Valtio

Valtio has several benefits that make it a great library for state management in React applications. Some of the key benefits are:

Simple and intuitive API: Valtio has a straightforward and easy-to-use API that consists of only two functions: proxy and useSnapshot. You don’t need to learn any complex concepts or patterns to use Valtio. You just create a proxy object and use a snapshot hook to access and update it in your React component.
Minimal boilerplate and configuration: Unlike other state management libraries, Valtio doesn’t require any boilerplate or configuration to set up. You don’t need to create any reducers, actions, selectors, or context providers. You don’t need to install any middleware or enhancers. You don’t need to wrap your components with any higher-order components or custom hooks. You just import Valtio and start using it.
Flexible and unopinionated: Valtio is very flexible and unopinionated about how you structure and organise your state. You can use any JavaScript data type or structure to represent your state, such as arrays, objects, maps, sets, classes, etc. You can also use any logic or pattern to manipulate your state, such as mutations, immutability, functional programming, etc. Valtio doesn’t impose any restrictions or conventions on how you use your state.
Reactive and performant: Valtio is very reactive and performant, as it uses proxies to track and trigger changes in your state. Proxies are native JavaScript features that allow you to intercept and modify operations on any object. Valtio uses proxies to create a reactive state object that can be mutated directly, without any overhead or performance penalty. Valtio also uses a snapshot hook to subscribe to the state changes and re-render your component only when necessary, without any unnecessary re-renders or stale data.
Supports various features and integrations: Valtio supports various features and integrations that make it more powerful and useful. For example, Valtio supports React-suspense, which allows you to suspend and resume your component rendering based on the state of your data. Valtio also supports Redux DevTools, which allows you to inspect and debug your state changes in a graphical interface. Valtio also supports various features such as ref, useProxy, and computed properties, which allow you to create and use references, proxies, and derived values in your state. Valtio also integrates well with other libraries and frameworks, such as Bit, NX, Lerna, Yarn Workspaces, etc.

Drawbacks of Using Valtio

Although Valtio has many benefits, there are also a few drawbacks that you should be aware of before deciding to use it in your React application. Some of the key drawbacks are:

Lack of best practices and patterns: Valtio is a very flexible and unopinionated library that doesn’t enforce any best practices or patterns for state management. This can be a benefit or a drawback, depending on your preference and experience. On one hand, you have the freedom and creativity to use Valtio in any way you want. On the other hand, you might face some difficulties or confusion when designing and maintaining your state architecture. You might need to follow some guidelines or conventions to ensure the quality and consistency of your state management.
Potential bugs and compatibility issues: Valtio is based on the concept of proxies, which are not fully supported by all browsers and environments. Proxies are a relatively new and advanced JavaScript feature that are not implemented or standardized by all browsers and platforms. You might encounter some bugs or compatibility issues when using Valtio in some browsers or environments that don’t support proxies or have different implementations of proxies. You might need to use some polyfills or transpilers to make Valtio work in older browsers or environments.
Lack of documentation and community: Valtio is a relatively new and experimental library that lacks comprehensive documentation and community support. The community is also small and inactive, and doesn’t provide much help or feedback for Valtio users. You might encounter some issues or challenges when using Valtio that are not well documented or solved by the community.

Conclusion

In this article, we covered Valtio, a simple and powerful state management library for React applications. Valtio simplifies and improves state management by using proxies and snapshots. It’s a great choice for developers who want a minimalistic and flexible solution, with a simple API, minimal boilerplate, and flexible state model. However, it has some drawbacks, such as a lack of documentation and community, potential bugs, and compatibility issues. If you have any questions or comments, please leave them below. Thanks for reading!