Convex React client requires "react-dom" to be installed even on react-native only projects

[saviocmc]

In the docs here, convex instructs to use the default Convex React client library for React Native projects.

When trying to do so, this code here

convex-backend/npm-packages/convex/src/react/client.ts

Lines 30 to 32 in 70c7737

	if (typeof ReactDOM === "undefined") {
	throw new Error("Required dependency 'react-dom' not found");
	}

throw an error when react-dom is not installed in the project. This should not be the case, because it is a valid use case to use convex in a React Native only project (with no react-dom or react-native-web).

The only use I could spot for the react-dom package in the code was to call unstable_batchedUpdates in the transition method:

convex-backend/npm-packages/convex/src/react/client.ts

Lines 523 to 535 in 70c7737

	private transition(updatedQueries: QueryToken[]) {
	ReactDOM.unstable_batchedUpdates(() => {
	for (const queryToken of updatedQueries) {
	const callbacks = this.listeners.get(queryToken);
	if (callbacks) {
	for (const callback of callbacks) {
	callback();
	}
	}
	}
	});
	}
	}

Looking it up I saw that it represented a performance gain in react 17 and prior versions, but since react 18 (2022) this is no more the case as it introduced Automatic Batching, as explained by Dan Abramov in this discussion: reactwg/react-18#21.

Also the unstable_batchedUpdates is an undocumented API that could probably be removed in future releases.

I see that convex aims to support react 17 (as it lists it as a valid peer dependence in the package.json). If dropping support for react 17 is not in the plans, the convex client should use the react-native implementation of unstable_batchedUpdates when running on a native platform.

So, I propose that convex could check if the react version is 17 and then try to import unstable_batchedUpdates from react-dom if running on the browser or import it from react-native when running on a native platform.

I also think this API should not be used in case react version is 18 or greater than 18, as it make no diference with the Automatic Batching implementation. In the future, if the support for react 17 is dropped, it makes it easier to remove only the code that tests if running on react 17.

Currently I use convex in my "React Native only" app (with react 18 and no react-dom). I just patched the client removing the line that throws the error when react-dom is not found and it works as expected.

What do you think? Should I submit a PR with this proposed changes?

[saviocmc]

Also, this kink of issue should be handle here in this repo or the convex-js repo?

[nipunn1313]

@thomasballinger - can you take a look?

[bj97301]

Same issue with me on expo 51

[bj97301]

Just verified that commenting out the throw fixed it. I am very interested in getting this fixed. Let me know who I can donate to 😉

[erquhart]

@saviocmc yep this is actually an issue for the convex-js repo.

@thomasballinger most straightforward approach is to drop React 17 from peer dependencies in an upcoming release, then we can just drop this.

Fwiw, I can't find others in the ecosystem supporting anything below 18 in their latest releases. TanStack, Next (even in v14), React Router, Clerk's React package, all have peer deps of 18+.

[thomasballinger]

Let's do it! Next minor version of the convex client can drop support for React 17.

[bj97301]

sweet! when is that?

[saviocmc]

@thomasballinger @erquhart Thanks for the attention on this.

Let's do it! Next minor version of the convex client can drop support for React 17.

I just submitted a PR on convex-js dropping the React 17 support and removing the need to either react-dom or react-native implementations altogether.

[saviocmc]

Fixed by 9250720