Pass ssr: false to useMediaQuery

Otherwise we needlessly render assuming false which causes rerenders with visual change at start-up and on language change. Not Vite related, we need to rescue this if we abandon the PR.
microbit-foundation · Mar 14, 2024 · d4313dd · d4313dd
1 parent f1cc2e4
commit d4313dd
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 8 deletions.
diff --git a/src/documentation/common/DocumentationTopLevelItem.tsx b/src/documentation/common/DocumentationTopLevelItem.tsx
@@ -41,8 +41,8 @@ const DocumentationTopLevelItem = ({
   type,
 }: DocumentationTopLevelItemProps) => {
   const intl = useIntl();
-  const [isShortWindow] = useMediaQuery(heightMd);
-  const [isWideScreen] = useMediaQuery(widthXl);
+  const [isShortWindow] = useMediaQuery(heightMd, { ssr: false });
+  const [isWideScreen] = useMediaQuery(widthXl, { ssr: false });
   return (
     <DocumentationListItem
       onClick={onForward}
@@ -92,8 +92,8 @@ const DocumentationListItem = ({
   type,
   ...props
 }: DocumentationListItemProps) => {
-  const [isShortWindow] = useMediaQuery(heightMd);
-  const [isWideScreen] = useMediaQuery(widthXl);
+  const [isShortWindow] = useMediaQuery(heightMd, { ssr: false });
+  const [isWideScreen] = useMediaQuery(widthXl, { ssr: false });
   const my =
     type === "reference"
       ? isShortWindow || !isWideScreen

diff --git a/src/editor/EditorArea.tsx b/src/editor/EditorArea.tsx
@@ -39,7 +39,7 @@ const EditorArea = React.forwardRef(
     simulatorButtonRef: ForwardedRef<HTMLButtonElement>
   ) => {
     const intl = useIntl();
-    const [isWideScreen] = useMediaQuery(widthXl);
+    const [isWideScreen] = useMediaQuery(widthXl, { ssr: false });
     return (
       <Flex
         height="100%"

diff --git a/src/project/ProjectActionBar.tsx b/src/project/ProjectActionBar.tsx
@@ -19,7 +19,7 @@ const ProjectActionBar = React.forwardRef(
     { sendButtonRef, ...props }: ProjectActionBarProps,
     ref: ForwardedRef<HTMLButtonElement>
   ) => {
-    const [isWideScreen] = useMediaQuery(widthXl);
+    const [isWideScreen] = useMediaQuery(widthXl, { ssr: false });
     const size = "lg";
     return (
       <HStack

diff --git a/src/workbench/Workbench.tsx b/src/workbench/Workbench.tsx
@@ -96,7 +96,9 @@ const Workbench = () => {
       handleSidebarCollapse();
     }
   }, [handleSidebarCollapse]);
-  const [hideSideBarMediaQueryValue] = useMediaQuery(hideSidebarMediaQuery);
+  const [hideSideBarMediaQueryValue] = useMediaQuery(hideSidebarMediaQuery, {
+    ssr: false,
+  });
   useEffect(() => {
     if (hideSideBarMediaQueryValue) {
       handleSidebarCollapse();

diff --git a/src/workbench/connect-dialogs/ConnectHelpDialog.tsx b/src/workbench/connect-dialogs/ConnectHelpDialog.tsx
@@ -19,7 +19,7 @@ import selectMicrobit from "./select-microbit.png";
 
 const ConnectHelpDialogBody = () => {
   const intl = useIntl();
-  const [isDesktop] = useMediaQuery("(min-width: 768px)");
+  const [isDesktop] = useMediaQuery("(min-width: 768px)", { ssr: false });
   return (
     <VStack
       width="auto"