From c543d5199faf62204e4349b5fd919f777e08d2b5 Mon Sep 17 00:00:00 2001 From: Sbragul26 Date: Fri, 6 Mar 2026 23:01:10 +0530 Subject: [PATCH 1/3] Optimize Hidden component: compute only required media queries Signed-off-by: Sbragul26 --- src/base/Hidden/Hidden.tsx | 80 ++++++++++++-------------------------- 1 file changed, 24 insertions(+), 56 deletions(-) diff --git a/src/base/Hidden/Hidden.tsx b/src/base/Hidden/Hidden.tsx index 3d3e5a73..286addc1 100644 --- a/src/base/Hidden/Hidden.tsx +++ b/src/base/Hidden/Hidden.tsx @@ -1,5 +1,5 @@ import { useMediaQuery, useTheme } from '@mui/material'; -import React from 'react'; +import React, { useMemo } from 'react'; type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; @@ -16,9 +16,13 @@ export interface HiddenProps { mdDown?: boolean; lgDown?: boolean; xlDown?: boolean; - } +const BREAKPOINTS: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl']; + +const extractCondition = (mediaQuery: string) => + mediaQuery.replace(/^@media\s*/i, ''); + export const Hidden = ({ children, only, @@ -34,63 +38,27 @@ export const Hidden = ({ xlDown = false }: HiddenProps) => { const theme = useTheme(); - const onlyValues = Array.isArray(only) ? only : only ? [only] : []; - const conditions: string[] = []; + const mediaQuery = useMemo(() => { + const onlyValues = Array.isArray(only) ? only : only ? [only] : []; + const upProps: Record = { xs: xsUp, sm: smUp, md: mdUp, lg: lgUp, xl: xlUp }; + const downProps: Record = { xs: xsDown, sm: smDown, md: mdDown, lg: lgDown, xl: xlDown }; + const conditions: string[] = []; - const extractCondition = (mediaQuery: string) => - mediaQuery.replace(/^@media\s*/i, ''); - - if (onlyValues.includes('xs')) { - conditions.push(extractCondition(theme.breakpoints.only('xs'))); - } - if (onlyValues.includes('sm')) { - conditions.push(extractCondition(theme.breakpoints.only('sm'))); - } - if (onlyValues.includes('md')) { - conditions.push(extractCondition(theme.breakpoints.only('md'))); - } - if (onlyValues.includes('lg')) { - conditions.push(extractCondition(theme.breakpoints.only('lg'))); - } - if (onlyValues.includes('xl')) { - conditions.push(extractCondition(theme.breakpoints.only('xl'))); - } - - if (xsUp) { - conditions.push(extractCondition(theme.breakpoints.up('xs'))); - } - if (smUp) { - conditions.push(extractCondition(theme.breakpoints.up('sm'))); - } - if (mdUp) { - conditions.push(extractCondition(theme.breakpoints.up('md'))); - } - if (lgUp) { - conditions.push(extractCondition(theme.breakpoints.up('lg'))); - } - if (xlUp) { - conditions.push(extractCondition(theme.breakpoints.up('xl'))); - } - - if (xsDown) { - conditions.push(extractCondition(theme.breakpoints.down('xs'))); - } - if (smDown) { - conditions.push(extractCondition(theme.breakpoints.down('sm'))); - } - if (mdDown) { - conditions.push(extractCondition(theme.breakpoints.down('md'))); - } - if (lgDown) { - conditions.push(extractCondition(theme.breakpoints.down('lg'))); - } - if (xlDown) { - conditions.push(extractCondition(theme.breakpoints.down('xl'))); - } + for (const bp of BREAKPOINTS) { + if (onlyValues.includes(bp)) { + conditions.push(extractCondition(theme.breakpoints.only(bp))); + } + if (upProps[bp]) { + conditions.push(extractCondition(theme.breakpoints.up(bp))); + } + if (downProps[bp]) { + conditions.push(extractCondition(theme.breakpoints.down(bp))); + } + } - const mediaQuery = - conditions.length > 0 ? `@media ${conditions.join(', ')}` : '@media not all'; + 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); From 9f7eeaf11a671581f2aa10fd6136d7239fe3c784 Mon Sep 17 00:00:00 2001 From: Sbragul26 Date: Mon, 9 Mar 2026 20:55:51 +0530 Subject: [PATCH 2/3] fix(hidden): stabilize useMemo dependency for only prop Signed-off-by: Sbragul26 --- src/base/Hidden/Hidden.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/base/Hidden/Hidden.tsx b/src/base/Hidden/Hidden.tsx index 286addc1..d4f10870 100644 --- a/src/base/Hidden/Hidden.tsx +++ b/src/base/Hidden/Hidden.tsx @@ -39,6 +39,10 @@ export const Hidden = ({ }: HiddenProps) => { const theme = useTheme(); + // Serialize `only` to a stable string so that array literals passed as props + // (e.g. only={['xs', 'md']}) don't defeat memoization due to new references. + const onlyKey = Array.isArray(only) ? only.join(',') : only ?? ''; + const mediaQuery = useMemo(() => { const onlyValues = Array.isArray(only) ? only : only ? [only] : []; const upProps: Record = { xs: xsUp, sm: smUp, md: mdUp, lg: lgUp, xl: xlUp }; @@ -58,7 +62,8 @@ 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]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [onlyKey, xsUp, smUp, mdUp, lgUp, xlUp, xsDown, smDown, mdDown, lgDown, xlDown, theme.breakpoints]); const matches = useMediaQuery(mediaQuery); From 630f5c2cddb08c405081f7b7f20531ca9e0515a7 Mon Sep 17 00:00:00 2001 From: Sbragul26 Date: Tue, 10 Mar 2026 20:29:19 +0530 Subject: [PATCH 3/3] fix(hidden): stabilize onlyKey and remove eslint suppression Signed-off-by: Sbragul26 --- src/base/Hidden/Hidden.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/base/Hidden/Hidden.tsx b/src/base/Hidden/Hidden.tsx index d4f10870..ffb757fb 100644 --- a/src/base/Hidden/Hidden.tsx +++ b/src/base/Hidden/Hidden.tsx @@ -39,12 +39,10 @@ export const Hidden = ({ }: HiddenProps) => { const theme = useTheme(); - // Serialize `only` to a stable string so that array literals passed as props - // (e.g. only={['xs', 'md']}) don't defeat memoization due to new references. - const onlyKey = Array.isArray(only) ? only.join(',') : only ?? ''; + const onlyKey = Array.isArray(only) ? [...only].sort().join(',') : only ?? ''; const mediaQuery = useMemo(() => { - const onlyValues = Array.isArray(only) ? only : only ? [only] : []; + const onlyValues = onlyKey ? (onlyKey.split(',') as Breakpoint[]) : []; const upProps: Record = { xs: xsUp, sm: smUp, md: mdUp, lg: lgUp, xl: xlUp }; const downProps: Record = { xs: xsDown, sm: smDown, md: mdDown, lg: lgDown, xl: xlDown }; const conditions: string[] = []; @@ -62,7 +60,6 @@ export const Hidden = ({ } return conditions.length > 0 ? `@media ${conditions.join(', ')}` : '@media not all'; - // eslint-disable-next-line react-hooks/exhaustive-deps }, [onlyKey, xsUp, smUp, mdUp, lgUp, xlUp, xsDown, smDown, mdDown, lgDown, xlDown, theme.breakpoints]); const matches = useMediaQuery(mediaQuery);