How to re-render only if a nested object existence change?

[pilaoda]

const state = proxy({ s: { a: 1 } });

function App() {
	const snap = useSnapshot(state);
	if (snap.s === undefined) {
		return null;
	}
	return <div> Hi </div>;
}

I read this doc saying without properties access, snap.s is assumed entire accessed.
but I only need to re-render when delete state.s,
and I want no re-render when state.s.a = 3.

[pilaoda]

Maybe return false here is just what I want? Can we provide a option for this?
https://github.com/dai-shi/proxy-compare/blob/4b5472b32186d709ce2ead2068caafbf1cf8190f/src/index.ts#L300

[dai-shi]

That's out of the scope of useSnapshot.
You want to use subscribe and snapshot directly to have more control.
Related https://github.com/pmndrs/valtio/blob/main/docs/how-tos/how-to-avoid-rerenders-manually.mdx#subscribe-and-set-local-state-conditionally, but if you need more help, let me know.

[pilaoda]

type ClassName = string;
type UID = string;
const state: Record<ClassName, Record<UID, any>> = {};

export function useReplicationObject(className: string, id: string) {
	const fullSnapshot = useSnapshot(state);
	return fullSnapshot[className]?.[id];
}

function BackpackName() {
	const player = useReplicationObject('Player', '123');
	if (!player?.backpack) return null;

	return <div>{player.backpack.name}</div>;
}

function BackpackItems() {
	const player = useReplicationObject('Player', '123');
	if (!player?.backpack) return null;

	return (
		<div>
			{player.backpack.items.map(item => (
				<ItemPanel key={item.id} item={item} />
			))}
		</div>
	);
}

function ItemPanel({item}: { item: { id: string; name: string } }) {
	return (
		<div>
			<h3>{item.name}</h3>
			<p>ID: {item.id}</p>
		</div>
	);
}

This is a simplify version of my project, I need to implement useReplicationObject to support auto subscribe any depth property access instead of subscribe for each feature one by one.

[dai-shi]

export function useReplicationObject(className: string, id: string) {
  return useSyncExternalStore(
    useCallback((callback) => subscribe(state, callback), [state]),
    () => snapshot(state)[className]?.[id]
  );
}

[pilaoda]

function ItemPanel({item}: { item: ItemData }) {
	const player = useReplicationObject('Player', GetLocalPlayerID());
	const operable = player?.id === item.ownerID;
	return (
		<div>
			<h3>{item.name}</h3>
			<p>ID: {item.id}</p>
			<p>Operable: {operable ? 'Yes' : 'No'}</p>
			<p>x: {item.x} y: {item.y}</p>
		</div>
	);
}

A more detail implement.
With the useReplicationObject you provide, any item change its x or y, will cause all ItemPanel re-render because player changed, even ItemPanel wrapped by memo.

[dai-shi]

I don't care your requirement very much. I just provided an example. Hope you can play with it.

export function useReplicationObject(className: string, id: string, key: string) {
  return useSyncExternalStore(
    useCallback((callback) => subscribe(state, callback), [state]),
    () => snapshot(state)[className]?.[id]?.[key]
  );
}

[pilaoda]

OK. I guess I can copy most code of useSnapshot and write a custom isChanged, then my problem should solve. Thanks!

[pilaoda]

Maybe return false here is just what I want? Can we provide a option for this? https://github.com/dai-shi/proxy-compare/blob/4b5472b32186d709ce2ead2068caafbf1cf8190f/src/index.ts#L300

I found out this is just what I need, return false here make everything has the same performance just like before I migrate to valtio (I also implement a custom proxy and subscribe system before),
but there is no easy way to config this behavior in valtio.

For a custom isChanged, I need to copy the whole proxy-compare package, createSnapshotDefault createHandlerDefault in valtio, because those functions depend on some not exported Symbol and WeakMap, all of them are need to work.

Can we just add a option for this? Otherwise I will need to maintain a fork or patch for just this one line.

export const isChanged = (
  prevObj: unknown,
  nextObj: unknown,
  affected: WeakMap<object, unknown>,
  cache?: WeakMap<object, unknown>, // for object with cycles
  isEqual: (a: unknown, b: unknown) => boolean = Object.is,
  changedIfNotUsed = true // new option here
): boolean => {
  if (isEqual(prevObj, nextObj)) {
    return false;
  }
  if (!isObject(prevObj) || !isObject(nextObj)) return true;
  const used = (affected as Affected).get(getOriginalObject(prevObj));
  if (!used) return changedIfNotUsed ; // new option here
  ...
}

[dai-shi]

That is really intended design, and in general we avoid using "options" in Valtio API.
As I said, your use case is the out of the scope of useSnapshot design.
So, forking / patching sounds reasonable.
(If I were to do it, I'd not fork / patch and I'd avoid using proxy-compare at all.)

[pilaoda]

ok

[overthemike]

@pilaoda Have you taken a look at valtio-plugin yet? Not sure if it will support everything you're trying to do, but it might be a place to start.

[pilaoda]

Thanks. I will have a look.