Issue
I want to observer when window stop resizing, cause currently if i listen to the resize
event on window
, i could only listen to resizing change
but not knowing when resizing stops. I checked the event
parameter in resizing callback, but did not find and helpful information.
Below is the code i'm trying to complete:
import React, { useState, useEffect } from "react";
export default function App() {
const [windowResizing, setWindowResizing] = useState(false);
const handleWindowResize = e => {
setWindowResizing(true);
};
useEffect(() => {
window.addEventListener("resize", handleWindowResize);
return () => window.removeEventListener("resize", handleWindowResize);
}, []);
return <div>{JSON.stringify({ windowResizing })}</div>;
}
But this does not work, since windowResizing
will keep being true
after resizing begins, even i already stops resizing.
So is there any way to observe when window stop resizing and i can then call setState
based on that?
Solution
There is no real "resizing state" in the browser; the resize
event occurs and then it's over.
You could emulate a resizing state of your own by setting a state variable to true
on every resize
event, and start a new timeout that will reset it back to false
after a small amount of time.
Example
import React, { useState, useEffect } from "react";
export default function App() {
const [windowResizing, setWindowResizing] = useState(false);
useEffect(() => {
let timeout;
const handleResize = () => {
clearTimeout(timeout);
setWindowResizing(true);
timeout = setTimeout(() => {
setWindowResizing(false);
}, 200);
}
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return <div>{JSON.stringify({ windowResizing })}</div>;
}
Answered By - Tholle
Answer Checked By - - Clifford M. (ReactFix Volunteer)