Change tracking with mutable state

[bisubus]

I'm currently trying to find suitable use patterns for valtio with my lib, https://github.com/bisubus/react-setup . As opposed to vanilla react, here the use of immutable state from useSnapshot isn't practical. The goal is to keep a reference to proxy object through the component lifespan and make use of change auto tracking that's available through a snapshot.

A blunt approach that uses useSnapshot solely for tracking:

const getProp = (obj, path) => path.reduce((acc, key) => acc?.[key], obj);

const objSymbol = Symbol('obj');

const useTrackingProxy = (proxyObj) => {
  const wrapperCache = useMemo(() => new WeakMap(), []);
  const unwrappedObj = proxyObj?.[objSymbol] ?? proxyObj;

  const snapshotRef = useRef();
  snapshotRef.current = useSnapshot(unwrappedObj);

  const createWrapper = (obj, path = []) => {
    if (wrapperCache.has(obj))
      return wrapperCache.get(obj)

    const wrapper = new Proxy(obj, {
      get(target, key) {
        if (key === objSymbol)
          return obj;

        const valuePath = [...path, key];
        getProp(snapshotRef.current, valuePath);

        const value = Reflect.get(target, key);
        const isValtioProxy = unstable_getInternalStates().proxyStateMap.has(value);

        if (isValtioProxy) {
          return createWrapper(value, valuePath);
        }

        return value;
      }
    });

     wrapperCache.set(obj, wrapper);

     return wrapper;
  };

  return {
    objProxy: useMemo(() => createWrapper(unwrappedObj), []),
    objSnapshot: snapshotRef.current
  }
};

const obj = proxy({ foo: { bar: 1 }, baz: 1 });

function Comp() {
  const { objProxy: trackedObj } = useTrackingProxy(obj);

  return (
    <>
      <button onClick={() => trackedObj.foo.bar++}>
        {trackedObj.foo.bar}
      </button>
      <button onClick={() => obj.baz++}>
        {obj.baz}
      </button>
    </>
  )

A snapshot from useSnapshot may still be of use with react apis that rely on immutability, but otherwise it looks like overhead. I checked how proxy-compare works but still not sure if a snapshot is required for the internals of change tracking and whether it's important for garbage collection that it's discarded after rendering.

Does it make sense to discard useSnapshot/snapshot() for this use and reimplement change tracking inside proxy() itself? What would be possible implications of this? I'd appreciate any insights

[dai-shi]

snapshotRef.current = useSnapshot(unwrappedObj);

This doesn't look very good.

Does it make sense to discard useSnapshot/snapshot()

It makes sense to discard useSnapshot for some cases, but you might still want snapshot and subscribe to be React compliant. Otherwise, just using subscribe might work.

[bisubus]

I'm still trying to figure out how proxy-compare works, it looks like isChanged was tailored to fit the snapshot workflow.

Since useSyncExternalStore is tied to snapshots, I suppose it needs to be desugared https://github.com/facebook/react/blob/99fd4f2ac1fc9bd6b7aeb57afb2bcb1599ad1165/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js#L109-L135 . We could track the keys that are accessed during render with a wrapper proxy, then subscribe to them inside an effect with Valtio's subscribe() and force update on key changes. Is my understanding correct?

[dai-shi]

proxy-compare totally depends on immutability.
If you do something like the shim, you don't need uSES. Just use useEffect.
tracking during render is very tricky. I'm not surprised if you hit any subtlety.