react-tracked VS valtio

Automatic render optimization is to do this automatically. Is this possible? It's possible with utilizing proxies. Proxies allow us to detect state property access. I have been working on this for years, and react-tracked is one of the resulting projects that use this technique. We have an internal library called proxy-compare.

While in a smaller application, excessive re-rendering may be unnoticeable or have no negative impact, as your application grows, each re-render may cause delays or lags in your UI. In this tutorial, we’ll use React Tracked, a library for state usage tracking, to optimize our application’s performance by preventing unnecessary re-renders.

The best, and perhaps only approach I have found so far is react-tracked. It does some internal tracking with proxies that I don't quite understand, but it actually works as advertised with a very minimal API.

We took inspiration from the many frameworks we worked with throughout our careers. And maybe surprisingly, Django’s ORM layer impacted our design choices and the API quite a bit. The resulting framework relies on Zod for schemas and validation and Valtio for React integration.

Valtio is like simplified MobX

Even simpler than Zustand are state-atom libraries like jotai or recoil, or proxy based ones like valtio. Here's some discussion about the differences.

There is a package developed around this proxy concept called Valtio which is available for JavaScript, React, and so on... feel free to check and star it on Github.

I'm switching from redux-saga to valtio (https://github.com/pmndrs/valtio) for now. It's simple and easy to use, everything's great so far.

I like valtio, works w/ React or just js. Has subscribe, derive, and more.

https://github.com/pmndrs/valtio

Jotai and Valtio are both also really good. Recently looked at Nanostore as well and has some similarity to Jotai and Recoil.

Since we want the React component to react to an external change, using a state manager makes this easy. We will use Valtio here by example. For this library, change the esbuild config to --target=es2020 instead to remove some warnings (for example, the Zustand library is ok).