WARNING - Detected multiple renderers concurrently rendering the same context provider (React 18.0.0?)

[VegtMedia-Alex]

🐛 Bug description

I get the following warning on the server side in react when i use:

import { findResultsState } from 'react-instantsearch-dom/server';

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
at Index (node_modules/react-instantsearch-core/dist/cjs/widgets/Index.js:86:34)
at IndexWrapper (node_modules/react-instantsearch-core/dist/cjs/widgets/Index.js:157:31)

Modules in package.json:

"react": "^18.0.0",
"react-dom": "^18.0.0",
"algoliasearch": "^4.13.0",
"react-instantsearch-dom": "^6.23.3",

[francoischalifour]

Can you please reproduce the behavior in this React InstantSearch Server sandbox?

[VegtMedia-Alex]

That would be very much work...

[VegtMedia-Alex]

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
    at InstantSearch (/node_modules/react-instantsearch-core/dist/cjs/widgets/InstantSearch.js:101:34)
    at MainIndex (webpack-internal:///(api)/./src/components/organisms/MainIndex/MainIndex.js:18:22)
    at ServerSearchResults (webpack-internal:///(api)/./src/components/molecules/ServerSearchResults/ServerSearchResults.js:21:32)
Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
    at Index (/node_modules/react-instantsearch-core/dist/cjs/widgets/Index.js:86:34)
    at IndexWrapper (/node_modules/react-instantsearch-core/dist/cjs/widgets/Index.js:157:31)
    at Index (webpack-internal:///(api)/./src/components/organisms/Index/index.js:21:18)
    at InstantSearch (/node_modules/react-instantsearch-core/dist/cjs/widgets/InstantSearch.js:101:34)
    at MainIndex (webpack-internal:///(api)/./src/components/organisms/MainIndex/MainIndex.js:18:22)
    at ServerSearchResults (webpack-internal:///(api)/./src/components/molecules/ServerSearchResults/ServerSearchResults.js:21:32)

[francoischalifour]

We can't help you further without any snippets or reproduction. The sandbox I sent you uses React 18 and doesn't have this problem, so this likely comes from your application code.

[Haroenv]

Do you have the structure of your InstantSearch application and the part which calls findResultsState at least? I'm wondering if this is because of a reused context provider that would not happen if only the InstantSearch app is passed to findResultsState

[VegtMedia-Alex]

Sure, here is the algolia utility:

import algoliasearch from 'algoliasearch/lite';
import { asyncForEach } from 'helpers/core';
import { getIndexName } from 'helpers/search';
import { findResultsState as instantSearchFindResultsState } from 'react-instantsearch-dom/server';
import { logger } from 'utils/logging';

export const searchClient = algoliasearch(
	process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,
	process.env.NEXT_PUBLIC_ALGOLIA_API_KEY,
);

export const findResultsState = async(Component, {
	indexName,
	indexes,
	...props
}) => {
	let resultsState = {};

	try {
		let indexesExist = true;

		await asyncForEach([
			indexName,
			...new Set(indexes),
		], async(searchIndex) => {
			searchIndex = getIndexName({
				indexName: searchIndex,
			});

			if (
				!await searchClient.initIndex(searchIndex).exists()
			) {
				indexesExist = searchIndex;
			}
		});

		if (indexesExist === true) {
			indexName = getIndexName({
				indexName,
			});

			resultsState = await instantSearchFindResultsState(Component, {
				searchClient,
				indexName,
				indexes,
				...props,
			});
		} else {
			logger.warning(`utils/algolia - findResultsState() - Index: ${indexesExist} does not exist`);
		}
	} catch (error) {
		logger.error('utils/algolia - findResultsState() - Error', {
			error,
			indexName,
			props,
		});
	}

	return JSON.parse(JSON.stringify(resultsState));
};

The "Component" getting passed is ServerSearchResults.js

import Index from 'components/organisms/Index';
import MainIndex from 'components/organisms/MainIndex';
import React from 'react';
import { Hits } from 'react-instantsearch-dom';

const ServerSearchResults = ({
	mainIndex,
	indexName,
	indexes,
	preset,
	hitsPerPage = 24,
	...props
}) => {
	if (indexName) {
		if (!mainIndex) {
			mainIndex = indexName;
		}

		if (!indexes) {
			indexes = [indexName];
		}
	}

	if (!indexes || indexes.length === 0) {
		return null;
	}

	return (
		<MainIndex mainIndex={mainIndex} {...props}>
			{indexes.map((indexName, index) => (
				<Index
					key={`${indexName}-${index}`}
					indexName={indexName}
					preset={preset}
					hitsPerPage={hitsPerPage}
				>
					<Hits
						hitComponent={({ hit }) => (
							<React.Fragment>
								{hit.brand} - {hit.name}
							</React.Fragment>
						)}
					/>
				</Index>
			))}
		</MainIndex>
	);
};

export default ServerSearchResults;

[Haroenv]

what is in the MainIndex component @DB-Alex ?

[VegtMedia-Alex]

MainIndex component:

import { getIndexName } from 'helpers/search';
import { useInstantSearch } from 'providers/InstantSearchProvider';
import React from 'react';
import { InstantSearch } from 'react-instantsearch-dom';

const MainIndex = ({
	mainIndex,
	children,
	...props
}) => {
	let {
		searchClient,
		resultsState,
		handleSearchStateChange,
		searchState,
	} = useInstantSearch();

	return (
		<InstantSearch
			indexName={getIndexName({
				indexName: mainIndex,
			})}
			searchClient={searchClient}
			resultsState={resultsState}
			onSearchStateChange={handleSearchStateChange}
			searchState={searchState}
			{...props}
		>
			{children}
		</InstantSearch>
	);
};

export default MainIndex;

[Haroenv]

I've managed to reproduce this now with just InstantSearch, but as far as I can tell it has no adverse effects. I wonder how eg. Apollo with a very similar design avoids this warning

[MrSnufalafogus]

Any update on this? We are seeing the same issue in our React/Next app after upgrading to React 18.0.0

Some additional info that we found while researching this error:
reactwg/react-18#19
reactwg/react-18#17
reactwg/react-18#18

It may not be causing issues now but from the React blog: https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors it looks like it may cause breaking changes in the future.

[Haroenv]

Not yet, sorry! I'm not fully sure whet the underlying cause is, which components are shared since as far as I can tell it's a completely separate "app" tree being created, so I'm not sure which part is the same provider (InstantSearch itself?).

I did find since that Apollo for example avoids this by returning the result of renderToString and asking the user to render that in a simple html wrapper after.

If you have any ideas on what could be the underlying reasons or solution, I'm all ears!

Relevant issues:

• ReactDOM.render()+ Context API = Warning: Detected multiple renderers concurrently rendering the same context provider facebook/react#13177
• Why does React warn about multiple renderers using the same context provider? facebook/react#19519
• React 18 Bug: react-dom/server "Detected multiple renderers..." if preceeded by react-test-renderer facebook/react#22796

[wenche]

We also have the same issue after the upgrade. The culprit for us seems to be the getServerState from react-instantsearch-hooks-server

[Haroenv]

As far as I can tell, this is an incorrect warning from React (facebook/react#22796) and it has no effect apart from giving that warning. Conceptually I haven't found a way to avoid the error except by manually ignoring it