Feature/hidden mediaquery optimization

[Sbragul26]

This PR fixes #1352 by refactoring the Hidden component to use media queries more efficiently.

Changes included:

• Compute a single combined media query using the provided only, *Up, and *Down props.
• Moved upProps and downProps inside useMemo to prevent unnecessary work on every render and fix stale closure issues.
• Replaced repetitive if blocks with a loop over BREAKPOINTS for cleaner, more maintainable code.
• Memoized media query computation with useMemo to avoid recomputation unless relevant props or theme.breakpoints change.
• Fallback to @media not all when no props are provided.

Signed commits

• Yes, I signed my commits.

[Copilot]

Pull request overview

This PR addresses issue #1352 by refactoring the Hidden component to compute a single combined media query more efficiently, using useMemo and a loop over breakpoints instead of repetitive if blocks.

Changes:

• Replaced repetitive per-breakpoint if blocks with a single loop over a BREAKPOINTS constant array, computing only needed media query conditions.
• Wrapped media query computation in useMemo to avoid recomputation unless relevant props or theme.breakpoints change.
• Extracted BREAKPOINTS constant and extractCondition helper to module scope for reuse and clarity.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

When only is passed as an array literal (e.g., only={['xs', 'md']}), which is the typical usage pattern, a new array reference is created on every parent render. Since only is used directly as a useMemo dependency, this causes the memo to recompute on every render, defeating the purpose of the memoization.

Consider spreading the array into the dependency list (e.g., using JSON.stringify(only) or only?.toString() as the dependency), or converting only to a stable representation before using it as a dependency.

[Bhumikagarggg]

@Sbragul26 Thank you for your contribution! Let's discuss this during the website call today at 6:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

[leecalcote]

Don't suppress lint checks without an explanation.

The linter is correctly flagging that only is used inside the closure but absent from the dependency array. The substitution of onlyKey for only is actually valid (since onlyKey encodes the same logical value), but without explanation, this looks like a hidden bug to any future maintainer.

[leecalcote]

Better approach — eliminate the suppress entirely by computing onlyValues from onlyKey inside the memo:

const onlyKey = Array.isArray(only) ? [...only].sort().join(',') : only ?? '';

const mediaQuery = useMemo(() => {
  // Derive onlyValues from onlyKey (the stable serialization) so `only` is not
  // a closure dependency. This avoids cache busting from inline array literals.
  const onlyValues = onlyKey ? (onlyKey.split(',') as Breakpoint[]) : [];
  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) {
    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)));
  }

  return conditions.length > 0 ? `@media ${conditions.join(', ')}` : '@media not all';
}, [onlyKey, xsUp, smUp, mdUp, lgUp, xlUp, xsDown, smDown, mdDown, lgDown, xlDown, theme.breakpoints]);
// No eslint-disable needed — `only` is no longer referenced inside the memo

[leecalcote]

onlyKey is order-sensitive, which defeats memoization for reordered arrays.

[leecalcote]

The inner loop iterates BREAKPOINTS in fixed order, so ['xs', 'sm'] and ['sm', 'xs'] produce identical media queries. But their onlyKeys differ, causing unnecessary useMemo cache invalidation.

Fix: Sort before joining:

const onlyKey = Array.isArray(only) ? [...only].sort().join(',') : only ?? '';

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.