valtio

Valtio is a small JavaScript library for managing shared data (called state) in React applications. Its main idea is that you can define your app's data as a plain object, and the library will automatically track changes to it so that React components re-render when the parts of the data they care about change.

The way it works is straightforward: you wrap your data object with a function called proxy, and from that point on you can update the data by just writing to it like a normal object. There is no special update function to call or action to dispatch. If you increment a counter or change a text value directly, Valtio notices and tells React to update the affected parts of the page. Components opt in by calling useSnapshot, which gives them a read-only view of the current data. Only the properties a component actually reads are tracked, so a change to one property will not re-render a component that never looks at it.

You can also subscribe to changes from outside React components, which makes Valtio useful for coordinating state between different parts of an application. There is a subscribe function that calls a callback whenever the state changes, and you can subscribe to the whole state or just a specific nested part of it.

Valtio works with plain JavaScript too, not just React. The core proxy, subscribe, and snapshot functions are available without any React dependency. For debugging, it integrates with the Redux DevTools browser extension, which lets you inspect state changes over time.

The library is installable via npm in one line and is designed to stay small and simple.