From c82b05a044bc72875e96c2157bded09fa7988b62 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sat, 8 Apr 2023 10:17:31 -0400 Subject: [PATCH] fix: React devmode warnings (#5169 * fix: React warning: Cannot change state from within render * Remove usage of react-side-effect --- app/components/Layout.tsx | 2 +- app/components/PageTitle.tsx | 2 +- app/editor/components/SelectionToolbar.tsx | 16 ++++--- app/index.tsx | 53 ++++++++++++---------- app/scenes/Document/Shared.tsx | 2 +- app/scenes/Settings/Zapier.tsx | 2 +- package.json | 2 +- yarn.lock | 28 +++++------- 8 files changed, 54 insertions(+), 53 deletions(-) diff --git a/app/components/Layout.tsx b/app/components/Layout.tsx index b70be6cd9..822afb5e1 100644 --- a/app/components/Layout.tsx +++ b/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"; diff --git a/app/components/PageTitle.tsx b/app/components/PageTitle.tsx index 03973c831..47e94ec42 100644 --- a/app/components/PageTitle.tsx +++ b/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"; diff --git a/app/editor/components/SelectionToolbar.tsx b/app/editor/components/SelectionToolbar.tsx index c4f9eefea..2f1b92b4e 100644 --- a/app/editor/components/SelectionToolbar.tsx +++ b/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 => { diff --git a/app/index.tsx b/app/index.tsx index 8b85ea1cb..69b41618b 100644 --- a/app/index.tsx +++ b/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 = () => ( - - - - - - - - - <> - - - - - - - - - - - - - - - - + + + + + + + + + + <> + + + + + + + + + + + + + + + + + ); diff --git a/app/scenes/Document/Shared.tsx b/app/scenes/Document/Shared.tsx index 25b978c3f..f607c4317 100644 --- a/app/scenes/Document/Shared.tsx +++ b/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"; diff --git a/app/scenes/Settings/Zapier.tsx b/app/scenes/Settings/Zapier.tsx index e633cf977..572098ca0 100644 --- a/app/scenes/Settings/Zapier.tsx +++ b/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"; diff --git a/package.json b/package.json index 68d7a845d..d36ac120f 100644 --- a/package.json +++ b/package.json @@ -175,7 +175,7 @@ "react-dnd-html5-backend": "^16.0.1", "react-dom": "^17.0.2", "react-dropzone": "^11.3.2", - "react-helmet": "^6.1.0", + "react-helmet-async": "^1.3.0", "react-hook-form": "^7.41.5", "react-i18next": "^12.1.5", "react-merge-refs": "^2.0.1", diff --git a/yarn.lock b/yarn.lock index bffb40a1f..8041df3bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11091,20 +11091,21 @@ react-dropzone@^11.3.2: file-selector "^0.2.2" prop-types "^15.7.2" -react-fast-compare@^3.1.1: - version "3.2.0" - resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" - integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== +react-fast-compare@^3.2.0: + version "3.2.1" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.1.tgz#53933d9e14f364281d6cba24bfed7a4afb808b5f" + integrity sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg== -react-helmet@^6.1.0: - version "6.1.0" - resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726" - integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw== +react-helmet-async@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.3.0.tgz#7bd5bf8c5c69ea9f02f6083f14ce33ef545c222e" + integrity sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg== dependencies: - object-assign "^4.1.1" + "@babel/runtime" "^7.12.5" + invariant "^2.2.4" prop-types "^15.7.2" - react-fast-compare "^3.1.1" - react-side-effect "^2.1.0" + react-fast-compare "^3.2.0" + shallowequal "^1.1.0" react-hook-form@^7.41.5: version "7.41.5" @@ -11199,11 +11200,6 @@ react-router@5.2.0: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-side-effect@^2.1.0: - version "2.1.1" - resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3" - integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ== - react-style-singleton@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"