Bug: Breaking change of use-subscription from 1.6.0 to 1.7.0

[Jack-Works]

React version: 18.1.0

It looks like use-subscription has changed the internal implementation to useSyncExternalStore.

It is causing the following error in our application:

Warning: The result of getSnapshot should be cached to avoid an infinite loop

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

React should bump the major version for use-subscription instead of the minor version!

[gaearon]

Oops, that's our bad. We haven't considered this change in behavior.

Since it's already been out for a few weeks, it seems like changing the behavior again risks being more disruptive. So for now we're going to leave this as is and see if we get more complaints.

Sorry!

[reggaebass]

I am encountering this same error. Is there a resolution?

[RemLawrence]

Any update on this?

[grctest]

Would appreciate a fix for using nanostore queries in react, much appreciated :)

[lucasbasquerotto]

For now I'm verifying if the properties values remain unchanged. For example, to get the window dimensions:

export interface WindowSizes {
	width: number;
	height: number;
}

const getSnapshot = ((value: WindowSizes | undefined) => () => {
	if (
		!value ||
		value.width !== window.innerWidth ||
		value.height !== window.innerHeight
	) {
		value = { width: window.innerWidth, height: window.innerHeight };
	}

	return value;
})(undefined);

const initialSizes: WindowSizes = {
	width: 0,
	height: 0,
};

const getServerSnapshot = () => initialSizes;

const subscribe = (
	callback: (this: Window, ev: WindowEventMap['resize']) => unknown,
) => {
	window.addEventListener('resize', callback);
	return () => window.removeEventListener('resize', callback);
};

export const useWindowDimensions = () => {
	// the 3rd parameter is optional and only needed for server side rendering
	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
};

The getSnapshot function verifies if the value changed instead of returning a new object each time.

For more complex objects, a deepEqual comparison may be better (instead of comparing each property individually).

Not the ideal scenario, but for now this is what solved this issue for me.