feat(useMediaQuery): enhance hook with debounce, fallback and onChange

[aprendendofelipe]

useMediaQuery

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
react-form	Ready	Preview, Comment	Jan 13, 2026 5:15pm
react-markdown	Ready	Preview, Comment	Jan 13, 2026 5:15pm

[pkg-pr-new]

Open in StackBlitz

@barso/forms

npm i https://pkg.pr.new/@barso/forms@95

@barso/helpers

npm i https://pkg.pr.new/@barso/helpers@95

@barso/hooks

npm i https://pkg.pr.new/@barso/hooks@95

@barso/infra

npm i https://pkg.pr.new/@barso/infra@95

@barso/ui

npm i https://pkg.pr.new/@barso/ui@95

commit: 371d71c

[Copilot]

Pull request overview

This PR enhances the useMediaQuery hook with debouncing capabilities, SSR fallback support, and an onChange callback. The implementation leverages React 18's useSyncExternalStore for improved consistency and SSR safety.

Changes:

• Refactored hook to use useSyncExternalStore for better React 18 compatibility
• Added debounce support to prevent excessive re-renders during rapid media query changes
• Added fallback option for SSR and hydration scenarios (supports both boolean values and functions)
• Added onChange callback for side effects when media query state changes

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 7 comments.

File	Description
packages/hooks/src/useMediaQuery/useMediaQuery.js	Complete rewrite implementing new features using useSyncExternalStore, debounce logic, fallback handling, and onChange callback
packages/hooks/src/useMediaQuery/useMediaQuery.test.js	Added tests for debounce functionality, onChange callback, and SSR fallback scenarios
packages/hooks/src/useMediaQuery/README.md	New comprehensive documentation with usage examples, API reference, and Next.js integration guide

---

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