Infinite loop caused by unstable context value

Reproduction

https://codesandbox.io/s/preact-batch-state-context-z71k8

// **** works
import { render } from "react-dom";
import * as React from "react";

// **** doesn't work:
// import { render } from "preact/compat";
// import * as React from "preact/compat";

// ----------------------------------------------------------

const Context = React.createContext(null);

function ModalProvider(props) {
	let [modalCount, setModalCount] = React.useState(0);
	let context = {
		modalCount,
		addModal() {
			setModalCount((count) => count + 1);
		},
		removeModal() {
			setModalCount((count) => count - 1);
		}
	};

	return <Context.Provider value={context}>{props.children}</Context.Provider>;
}

export function useModal() {
	let context = React.useContext(Context);
	React.useEffect(() => {
		console.log("useModal mount");

		context.addModal();
		return () => {
			console.log("useModal unmount");
			context.removeModal();
		};
	}, [context]);
}

// ----------------------------------------------------------

function Popover() {
	useModal();
	return <div>Popover</div>;
}

function App() {
	return (
		<ModalProvider>
			<Popover />
		</ModalProvider>
	);
}

render(<App />, document.getElementById("root"));

Steps to reproduce

• Open the codesandbox
• Currently, it’s using React which works as expected
• Change the imports to use Preact instead
• An infinite loop caused by useEffect and setState via the context occurs

Expected Behavior

No infinite loop (as React)

Actual Behavior

I think Preact batches updates differently, so the useEffect and useEffect cleanup callback don’t cancel out.

[mischnic]

(This was the fix that solved it for me: https://github.com/adobe/react-spectrum/commit/78ac497400786ba2572d3ee076a158038e4a409e)

 export function ModalProvider(props: ModalProviderProps) {
   let {children} = props;
   let parent = useContext(Context);
   let [modalCount, setModalCount] = useState(parent ? parent.modalCount : 0);
-  let context = {
+  let context = useMemo(() => ({
     parent,
     modalCount,
     modalCount,
     addModal() {
          setModalCount((count) => count + 1);
     },
     removeModal() {
          setModalCount((count) => count - 1);
     }
     }
-  };
+  }), [parent, modalCount]);
 
   return (
     <Context.Provider value={context}>

[marvinhagemeister]

Just had a quick look at this and wrapping the context value with a useMemo resolves the infinite loop. This leads me to assume that React either has some infinite loop detection and bails out somewhere, or that they have special handling for objects passed into a context provider.