useAtomsDevtools inside React.StrictMode shows twice in Redux Dev Tools

[sazzer]

Hi there,

Firstly, it's entirely possible that I've done something wrong here, so apologies if so!

I've noticed that if I'm calling useAtomsDevtools() from inside of React.StrictMode then I get two different stores showing up in the Redix Dev Tools, where the one that is selected by default is not useful:

  const AtomsDevtools: React.FC<AtomsDevtoolsProps> = ({ children }) => {
    useAtomsDevtools('linaria');
    return children;
  };

  ReactDOM.createRoot(root).render(
    <JotaiProvider>
      <React.StrictMode>
        <AtomsDevtools>
          <AuthProvider>
            <Suspense fallback={'Loading'}>
              <UI />
            </Suspense>
          </AuthProvider>
        </AtomsDevtools>
      </React.StrictMode>
    </JotaiProvider>
  );

If I move it around so that useAtomsDevtools is instead outside of the React.StrictMode then everything works as expected:

  const AtomsDevtools: React.FC<AtomsDevtoolsProps> = ({ children }) => {
    useAtomsDevtools('linaria');
    return children;
  };

  ReactDOM.createRoot(root).render(
    <JotaiProvider>
      <AtomsDevtools>
        <React.StrictMode>
          <AuthProvider>
            <Suspense fallback={'Loading'}>
              <UI />
            </Suspense>
          </AuthProvider>
        </React.StrictMode>
      </AtomsDevtools>
    </JotaiProvider>
  );

I assume this is because React.StrictMode does the double-render trick to catch certain issues, but it seems to have a negative effect in this case.

Cheers

[dai-shi]

@Aslemammad Can you investigate this please?

[dai-shi]

@sazzer

1456 should fix. Can you try it?

https://ci.codesandbox.io/status/pmndrs/jotai/pr/1456 Find "Local Install Instructions" ☝️