From 2bf86c7d4b300978aa572d389d902b1208019708 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 10 Feb 2026 20:08:33 +0530 Subject: [PATCH 1/3] fix: useResponsive hook resize issue fix --- packages/hooks/src/use-responsive.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/hooks/src/use-responsive.ts b/packages/hooks/src/use-responsive.ts index 002a40979..67c30c5ba 100644 --- a/packages/hooks/src/use-responsive.ts +++ b/packages/hooks/src/use-responsive.ts @@ -64,6 +64,9 @@ const useResponsive = (config: ConfigType = {}) => { useEffect(() => { const handleResize = () => setDevice(getDevice(defaultBreakpoints)) + // Add window resize listener as fallback + window.addEventListener("resize", handleResize) + // initialize matchMedia for each device and listen for changes const mediaQueries = Object.values(defaultBreakpoints).map((value) => { const mediaList = window.matchMedia(getMediaQuery(value)) @@ -73,6 +76,7 @@ const useResponsive = (config: ConfigType = {}) => { // cleanup event listeners on unmount return () => { + window.removeEventListener("resize", handleResize) mediaQueries.forEach((mediaList) => mediaList.removeEventListener("change", handleResize), ) From cb2b63e8ae6939c6ea438124dcf1e839514f4736 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 10 Feb 2026 20:14:30 +0530 Subject: [PATCH 2/3] docs: add changeset --- .changeset/public-frogs-hunt.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/public-frogs-hunt.md diff --git a/.changeset/public-frogs-hunt.md b/.changeset/public-frogs-hunt.md new file mode 100644 index 000000000..cf634d2f6 --- /dev/null +++ b/.changeset/public-frogs-hunt.md @@ -0,0 +1,6 @@ +--- +"@wpmudev/sui-css": patch +"@wpmudev/sui-hooks": patch +--- + +useResponsive hook resize issue From d599a2dfd4c98aabb06dc6fd1a33f98869137a4a Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 11 Feb 2026 09:37:39 +0530 Subject: [PATCH 3/3] fix: useResponsive hook resize issue fix --- packages/hooks/src/use-responsive.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/hooks/src/use-responsive.ts b/packages/hooks/src/use-responsive.ts index 67c30c5ba..cea189de4 100644 --- a/packages/hooks/src/use-responsive.ts +++ b/packages/hooks/src/use-responsive.ts @@ -62,7 +62,17 @@ const useResponsive = (config: ConfigType = {}) => { const [device, setDevice] = useState(() => getDevice(defaultBreakpoints)) useEffect(() => { - const handleResize = () => setDevice(getDevice(defaultBreakpoints)) + let timeoutId: ReturnType | null = null + + const handleResize = () => { + if (timeoutId) { + clearTimeout(timeoutId) + } + timeoutId = setTimeout(() => { + const newDevice = getDevice(defaultBreakpoints) + setDevice(newDevice) + }, 100) + } // Add window resize listener as fallback window.addEventListener("resize", handleResize) @@ -76,6 +86,9 @@ const useResponsive = (config: ConfigType = {}) => { // cleanup event listeners on unmount return () => { + if (timeoutId) { + clearTimeout(timeoutId) + } window.removeEventListener("resize", handleResize) mediaQueries.forEach((mediaList) => mediaList.removeEventListener("change", handleResize),