chore(site): enable React's StrictMode (#13399)

aslilac · web-flow · commit 79fd736387bd · 2024-06-03T10:03:46.000-06:00
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -6,6 +6,7 @@ import {
 import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
 import { DecoratorHelpers } from "@storybook/addon-themes";
 import { withRouter } from "storybook-addon-remix-react-router";
+import { StrictMode } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { HelmetProvider } from "react-helmet-async";
 import themes from "theme";
@@ -29,14 +30,16 @@ export const decorators = [
     const selected = themeOverride || selectedTheme || "dark";
 
     return (
-      <StyledEngineProvider injectFirst>
-        <MuiThemeProvider theme={themes[selected]}>
-          <EmotionThemeProvider theme={themes[selected]}>
-            <CssBaseline />
-            <Story />
-          </EmotionThemeProvider>
-        </MuiThemeProvider>
-      </StyledEngineProvider>
+      <StrictMode>
+        <StyledEngineProvider injectFirst>
+          <MuiThemeProvider theme={themes[selected]}>
+            <EmotionThemeProvider theme={themes[selected]}>
+              <CssBaseline />
+              <Story />
+            </EmotionThemeProvider>
+          </MuiThemeProvider>
+        </StyledEngineProvider>
+      </StrictMode>
     );
   },
 ];
diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -1,6 +1,12 @@
 import "./theme/globalFonts";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { type FC, type ReactNode, useEffect, useState } from "react";
+import {
+  type FC,
+  type ReactNode,
+  StrictMode,
+  useEffect,
+  useState,
+} from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { RouterProvider } from "react-router-dom";
@@ -74,10 +80,12 @@ export const AppProviders: FC<AppProvidersProps> = ({
 
 export const App: FC = () => {
   return (
-    <ErrorBoundary>
-      <AppProviders>
-        <RouterProvider router={router} />
-      </AppProviders>
-    </ErrorBoundary>
+    <StrictMode>
+      <ErrorBoundary>
+        <AppProviders>
+          <RouterProvider router={router} />
+        </AppProviders>
+      </ErrorBoundary>
+    </StrictMode>
   );
 };
diff --git a/site/src/index.tsx b/site/src/index.tsx
@@ -1,22 +1,16 @@
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
 
-// This is the entry point for the app - where everything start.
-// In the future, we'll likely bring in more bootstrapping logic -
-// like: https://github.com/coder/m/blob/50898bd4803df7639bd181e484c74ac5d84da474/product/coder/site/pages/_app.tsx#L32
-const main = () => {
-  console.info(`    ▄█▀    ▀█▄
+console.info(`    ▄█▀    ▀█▄
      ▄▄ ▀▀▀  █▌   ██▀▀█▄          ▐█
  ▄▄██▀▀█▄▄▄  ██  ██      █▀▀█ ▐█▀▀██ ▄█▀▀█ █▀▀
 █▌   ▄▌   ▐█ █▌  ▀█▄▄▄█▌ █  █ ▐█  ██ ██▀▀  █
      ██████▀▄█    ▀▀▀▀   ▀▀▀▀  ▀▀▀▀▀  ▀▀▀▀ ▀
 `);
-  const element = document.getElementById("root");
-  if (element === null) {
-    throw new Error("root element is null");
-  }
-  const root = createRoot(element);
-  root.render(<App />);
-};
 
-main();
+const element = document.getElementById("root");
+if (element === null) {
+  throw new Error("root element is null");
+}
+const root = createRoot(element);
+root.render(<App />);
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
@@ -206,9 +206,8 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
       <Divider css={{ marginBottom: "0 !important" }} />
 
       <Stack css={styles.info} spacing={0}>
-        <Tooltip title="Coder Version">
+        <Tooltip title="Browse the source code">
           <a
-            title="Browse Source Code"
             css={[styles.footerText, styles.buildInfo]}
             href={buildInfo?.external_url}
             target="_blank"
