Why does React warn about multiple renderers using the same context provider?

[vimcaw]

I am currently developing a web app that uses both react-pixi and react-babylonjs. Both of these libraries use react-reconciler and have a custom renderer. I also use redux in my project, so they share the same Context in the two libraries.

It displays a warning on Console after every redux state updating, but everything works well, both renderers can trigger an update.

I want to know if there is any risk in doing this, or is this just a false warning?

React version: 16.13.1

Steps To Reproduce

1. Using multiple react renderers
2. Using the same context provider between that react renderers

Link to code example: https://codesandbox.io/s/multiple-reconciler-using-same-context-v8kq1?file=/src/App.js

The current behavior

It will throw a warning message after every state updating:

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.

But everything works well, both renderers can trigger an update.

The expected behavior

Don't show any warning.

[bvaughn]

React only supports two concurrent renderers at most– one "primary" and one "secondary", e.g. React DOM (primary) and React ART (secondary) or React Native (primary) and Fabric (secondary). This is partially a practical constraint (in that it covers 99% of use cases) and partially an intentional trade off in that certain APIs (like Context or useMutableSource) are able to be more efficiently implemented because of it.

For example, rather than using a (slower) Map structure to maintain a (per-renderer) stack of context values, the Context API is able to store this stack on the context object using a designated field:

react/packages/react-reconciler/src/ReactFiberNewContext.new.js

Lines 78 to 111 in 93a0c28

	if (isPrimaryRenderer) {
	push(valueCursor, context._currentValue, providerFiber);
	context._currentValue = nextValue;
	if (__DEV__) {
	if (
	context._currentRenderer !== undefined &&
	context._currentRenderer !== null &&
	context._currentRenderer !== rendererSigil
	) {
	console.error(
	'Detected multiple renderers concurrently rendering the ' +
	'same context provider. This is currently unsupported.',
	);
	}
	context._currentRenderer = rendererSigil;
	}
	} else {
	push(valueCursor, context._currentValue2, providerFiber);
	context._currentValue2 = nextValue;
	if (__DEV__) {
	if (
	context._currentRenderer2 !== undefined &&
	context._currentRenderer2 !== null &&
	context._currentRenderer2 !== rendererSigil
	) {
	console.error(
	'Detected multiple renderers concurrently rendering the ' +
	'same context provider. This is currently unsupported.',
	);
	}
	context._currentRenderer2 = rendererSigil;
	}

Same for the useMutableSource API:

react/packages/react-reconciler/src/ReactMutableSource.new.js

Lines 30 to 62 in 93a0c28

	export function resetWorkInProgressVersions(): void {
	for (let i = 0; i < workInProgressSources.length; i++) {
	const mutableSource = workInProgressSources[i];
	if (isPrimaryRenderer) {
	mutableSource._workInProgressVersionPrimary = null;
	} else {
	mutableSource._workInProgressVersionSecondary = null;
	}
	}
	workInProgressSources.length = 0;
	}
	export function getWorkInProgressVersion(
	mutableSource: MutableSource<any>,
	): null | MutableSourceVersion {
	if (isPrimaryRenderer) {
	return mutableSource._workInProgressVersionPrimary;
	} else {
	return mutableSource._workInProgressVersionSecondary;
	}
	}
	export function setWorkInProgressVersion(
	mutableSource: MutableSource<any>,
	version: MutableSourceVersion,
	): void {
	if (isPrimaryRenderer) {
	mutableSource._workInProgressVersionPrimary = version;
	} else {
	mutableSource._workInProgressVersionSecondary = version;
	}
	workInProgressSources.push(mutableSource);
	}

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.

This warning suggests that two renderers of the same type (presumably two primary renderers) are both using a context at the same time (concurrently). This might happen to work okay in some cases (e.g. if only the global/default context value is being used) but it may also break depending on how each renderer is using the context.

Hope this helps answer your question! tl;dr is that the warning is valid and important.

[vimcaw]

Thank you for such a detailed answer! now I understand.

Both of react-pixi and react-babylonjs have a custom renderer, plus the original react-dom, there are 3 renderers, seems I must give up one of them.