useSnapshot(store) does not rerender as expected, how to debug?

[ekeijl]

I have a fairly complex app with with multiple Valtio stores (each for their own concern).

The Valtio store is created inside a component inside a useConstant() (because I need to read some data from localStorage based on a local id prop and then populate the store with it). The store is then passed down the component tree using React.Context (as described on the wiki) and can be read using a helper:

const useFilterStore = () => {
	return useContext(FilterContext);
};

Suddenly, reading from a store through useSnapshot stopped working:

export const useFilterData = () => {
	const store = useFilterStore();
	const { filterData } = useSnapshot(store);
	return filterData;
};

As a workaround, I tried the following, which does seem to work:

export const useFilterData = () => {
	const store = useFilterStore();
	const [data, set] = useState({});
	useEffect(() => {
		const unsub = subscribeKey(store, 'filterData', () => {
			set(store.filterData);
		});

		return () => unsub();
	}, [set, store]);

	return data;
};

So the data is changed correctly in the store, but reading the value using useSnapshot() does not trigger a rerender as I would expect. I do not use React.memo().
The issue only seems to occur if a second Valtio store (which works in a similar way) gets updated before the change in the FilterStore.

I tried reproducing it on Codesandbox, but I didn't succeed yet since the app is complex and I cannot share all code freely.
In the meanwhile, do you have any suggestions how I could debug useSnapshot() or can you think of other things I can try?

[dai-shi]

If you use React DevTools, you can see the tracking information.

valtio/src/react.ts

Line 162 in cad437c

useAffectedDebugValue(currSnapshot, currAffected)

You will find something wrong there, like it's unexpectedly deep props.
Often the problem can happen with memoization or incorrect use of deps array.

[ekeijl]

I will try that, thanks for the fast reply!