attempt to prevent excess renders in dev

apps/app/src/pages/_app.tsx

@@ -87,9 +87,9 @@ const MyApp = (appProps: AppPropsWithGridSwitch) => {
 				<Notifications transitionDuration={500} />
 				<ConditionalReactQueryDevtool />
 				<Analytics />
-				<SpeedInsights />
 				<DonateModal />
 			</Providers>
+			<SpeedInsights />
 		</>
 	)
 }

apps/app/src/providers/index.tsx

@@ -97,9 +97,9 @@ export const Providers = ({ children, session }: ProviderProps) => {
 	// )
 
 	const mantineTheme = useMemo(() => ({ ...appTheme, fontFamily: fontWorkSans.style.fontFamily }), [])
-
+	const mantineCache = useMemo(() => appCache, [])
 	return (
-		<MantineProvider withGlobalStyles withNormalizeCSS theme={mantineTheme} emotionCache={appCache}>
+		<MantineProvider withGlobalStyles withNormalizeCSS theme={mantineTheme} emotionCache={mantineCache}>
 			{/* <ConsentProvider options={consentOptions}> */}
 			<SessionProvider session={session}>
 				<EditModeProvider>

packages/ui/hooks/useScreenSize.ts

@@ -1,17 +1,22 @@
 import { em, useMantineTheme } from '@mantine/core'
 import { useMediaQuery } from '@mantine/hooks'
+import { useMemo } from 'react'
 
 export const useScreenSize = () => {
 	const theme = useMantineTheme()
 	const isLandscape = useMediaQuery(`(orientation: landscape) and (max-height: ${em(430)})`)
-	return {
-		isMobile: useMediaQuery(`(max-width: ${theme.breakpoints.xs})`) || isLandscape,
-		isTablet:
-			useMediaQuery(`(max-width: ${theme.breakpoints.sm}) and (min-width: ${theme.breakpoints.xs})`) &&
-			!isLandscape,
-		isLandscape,
-		isSmallLandscape: useMediaQuery(
-			`(orientation: landscape) and (max-height: ${em(376)}) and (max-width: ${theme.breakpoints.xs})`
-		),
-	}
+
+	const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.xs})`) || isLandscape
+	const isTablet =
+		useMediaQuery(`(max-width: ${theme.breakpoints.sm}) and (min-width: ${theme.breakpoints.xs})`) &&
+		!isLandscape
+	const isSmallLandscape = useMediaQuery(
+		`(orientation: landscape) and (max-height: ${em(376)}) and (max-width: ${theme.breakpoints.xs})`
+	)
+
+	const screenSizes = useMemo(
+		() => ({ isMobile, isTablet, isLandscape, isSmallLandscape }),
+		[isMobile, isTablet, isLandscape, isSmallLandscape]
+	)
+	return screenSizes
 }