fix: React devmode warnings (#5169

* fix: React warning: Cannot change state from within render

* Remove usage of react-side-effect

app/components/Layout.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Helmet } from "react-helmet";
+import { Helmet } from "react-helmet-async";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";

app/components/PageTitle.tsx

@@ -1,6 +1,6 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Helmet } from "react-helmet";
+import { Helmet } from "react-helmet-async";
 import { cdnPath } from "@shared/utils/urls";
 import env from "~/env";
 import useStores from "~/hooks/useStores";

app/editor/components/SelectionToolbar.tsx

@@ -81,13 +81,15 @@ export default function SelectionToolbar(props: Props) {
   const isActive = useIsActive(view.state);
   const previousIsActuve = usePrevious(isActive);
 
-  // Trigger callbacks when the toolbar is opened or closed
-  if (previousIsActuve && !isActive) {
-    onClose();
-  }
-  if (!previousIsActuve && isActive) {
-    onOpen();
-  }
+  React.useEffect(() => {
+    // Trigger callbacks when the toolbar is opened or closed
+    if (previousIsActuve && !isActive) {
+      onClose();
+    }
+    if (!previousIsActuve && isActive) {
+      onOpen();
+    }
+  }, [isActive, onClose, onOpen, previousIsActuve]);
 
   React.useEffect(() => {
     const handleClickOutside = (ev: MouseEvent): void => {

app/index.tsx

@@ -6,6 +6,7 @@ import { KBarProvider } from "kbar";
 import { Provider } from "mobx-react";
 import * as React from "react";
 import { render } from "react-dom";
+import { HelmetProvider } from "react-helmet-async";
 import { Router } from "react-router-dom";
 import stores from "~/stores";
 import Analytics from "~/components/Analytics";
@@ -50,31 +51,33 @@ const commandBarOptions = {
 if (element) {
   const App = () => (
     <React.StrictMode>
-      <Provider {...stores}>
-        <Analytics>
-          <Theme>
-            <ErrorBoundary showTitle>
-              <KBarProvider actions={[]} options={commandBarOptions}>
-                <LazyPolyfill>
-                  <LazyMotion features={loadFeatures}>
-                    <Router history={history}>
-                      <>
-                        <PageTheme />
-                        <ScrollToTop>
-                          <Routes />
-                        </ScrollToTop>
-                        <Toasts />
-                        <Dialogs />
-                        <Desktop />
-                      </>
-                    </Router>
-                  </LazyMotion>
-                </LazyPolyfill>
-              </KBarProvider>
-            </ErrorBoundary>
-          </Theme>
-        </Analytics>
-      </Provider>
+      <HelmetProvider>
+        <Provider {...stores}>
+          <Analytics>
+            <Theme>
+              <ErrorBoundary showTitle>
+                <KBarProvider actions={[]} options={commandBarOptions}>
+                  <LazyPolyfill>
+                    <LazyMotion features={loadFeatures}>
+                      <Router history={history}>
+                        <>
+                          <PageTheme />
+                          <ScrollToTop>
+                            <Routes />
+                          </ScrollToTop>
+                          <Toasts />
+                          <Dialogs />
+                          <Desktop />
+                        </>
+                      </Router>
+                    </LazyMotion>
+                  </LazyPolyfill>
+                </KBarProvider>
+              </ErrorBoundary>
+            </Theme>
+          </Analytics>
+        </Provider>
+      </HelmetProvider>
     </React.StrictMode>
   );
 

app/scenes/Document/Shared.tsx

@@ -1,7 +1,7 @@
 import { Location } from "history";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Helmet } from "react-helmet";
+import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { RouteComponentProps, useLocation, Redirect } from "react-router-dom";
 import styled, { ThemeProvider } from "styled-components";

app/scenes/Settings/Zapier.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Helmet } from "react-helmet";
+import { Helmet } from "react-helmet-async";
 import { Trans } from "react-i18next";
 import Heading from "~/components/Heading";
 import ZapierIcon from "~/components/Icons/ZapierIcon";