double network calls in React

[pdurbin]

@g-saracca shared with me the following tip for disabling double network calls in React:

% git diff src/index.tsx
diff --git a/src/index.tsx b/src/index.tsx
index 534a26ff..ff2b7fc1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,7 +4,7 @@ import { KcPage } from './keycloak-theme/kc.gen'
 const AppEntrypoint = lazy(() => import('./index.app'))

 createRoot(document.getElementById('root') as HTMLElement).render(
- <StrictMode>
+ <>
     {window.kcContext ? (
       <KcPage kcContext={window.kcContext} />
     ) : (
@@ -12,5 +12,5 @@ createRoot(document.getElementById('root') as HTMLElement).render(
         <AppEntrypoint />
       </Suspense>
     )}
- </StrictMode>
+ </>
 )

This change should not be committed but it's helpful in development to reduce the noise.

We should explain this in the dev guide or make it a config option, if possible.

[ekraffmiller]

I don't know if we should be encouraging developers to comment out StrictMode during development, it's meant as a safe guard to detect bugs and unexpected side effects in the code. If devs comment it out, that benefit goes away. Sometimes it does help to temporarily remove it, but that's easy enough to do in your code locally, as you mentioned. Just my 2 cents!

[g-saracca]

Yes, I agree with @ekraffmiller, it should only be commented out if you are debugging api calls in some way to reduce noise in the browser network tab.

[pdurbin]

Yes, exactly! Some sort of config option would be great!

[g-saracca]

And just to be clear, this behaviour is only in dev mode, wont happen when building the app to be deployed.