Optimize Hidden component: compute only required media queries

Signed-off-by: Sbragul26 <sbragul26@gmail.com>

Author: Sbragul26

src/base/Hidden/Hidden.tsx

@@ -39,11 +39,10 @@ export const Hidden = ({
 }: HiddenProps) => {
   const theme = useTheme();
 
-  const upProps: Record<Breakpoint, boolean> = { xs: xsUp, sm: smUp, md: mdUp, lg: lgUp, xl: xlUp };
-  const downProps: Record<Breakpoint, boolean> = { xs: xsDown, sm: smDown, md: mdDown, lg: lgDown, xl: xlDown };
-
   const mediaQuery = useMemo(() => {
     const onlyValues = Array.isArray(only) ? only : only ? [only] : [];
+    const upProps: Record<Breakpoint, boolean> = { xs: xsUp, sm: smUp, md: mdUp, lg: lgUp, xl: xlUp };
+    const downProps: Record<Breakpoint, boolean> = { xs: xsDown, sm: smDown, md: mdDown, lg: lgDown, xl: xlDown };
     const conditions: string[] = [];
 
     for (const bp of BREAKPOINTS) {
@@ -59,7 +58,6 @@ export const Hidden = ({
     }
 
     return conditions.length > 0 ? `@media ${conditions.join(', ')}` : '@media not all';
-    
   }, [only, xsUp, smUp, mdUp, lgUp, xlUp, xsDown, smDown, mdDown, lgDown, xlDown, theme.breakpoints]);
 
   const matches = useMediaQuery(mediaQuery);