When the resize event won't cut it | #blog

resize-event-is-flawed.md

title: "When the resize event won't cut it"
slug: "when-resize-event-wont-cut"
category: "frontend"
published: true
date: 1659648396385

DISCLAIMER: The resize event works in almost all conditions. But in this case, it didn't, for some mysterious reason. This post is about an alternative method that actually worked.

When the resize event won't cut

For one of our clients, I had to create a full size canvas background. However, it wasn't a simple background. It had multiple classes, randomly generated different sized particles, and so on.

The canvas as the whole entity resizes itself fine as the browser window changes sizes as you expect from any other regular html element.

However, the issue was with what the canvas included inside, what it drew. It just wouldn't resize well, as the particles would needed to be re-rendered dynamically according to the screen size.

So, I created:

window.addEventListener("resize", fireInTheHole);

The fireInTheHole function changes a resized state, and that state-change re-renders the insides of my canvas, so that the inside of my canvas also respons to the changes in window size.

BUT

In 2 edge cases, it didn't work:

• If a user double clicks the browser window to resize, the insides of the canvas can't keep up.
• If a user changes the window size via choosing a device from the developer panel, the insides of the canvas can't keep up.

So there's a pattern here. Unless a user resizes the window by dragging the browser window borders, it won't work. Odd isn't it? In the end, all are resize events...

WELL TURNS OUT

THE RESIZE EVENT DOESN'T COVER THOSE SITUATIONS [SOMETIMES, I MEAN RARELY, I MEAN ONCE IN A BLUE MOON] (BTW, this was the only discussion I could find about this specific issue in the wild.)

I was feeling hopeless. No worries tho, I got used to the feeling since I'm a self-taught.

I spent a couple of hours trying to come up with a local solution. By local, I mean without changing much logic and relying on my existing hooks and components. Tried everything, it wasn't working.

I wrote a message explaining the issue and ending with "How likely for a user to actually do that?". Our users are mostly traditional real estate clients.

But AS ALWAYS, after I sent that message. My mind started working and suddenly I remembered MutationObserver I remembered this because I thought of another method of getting the data I need.

If I can't detect the size changes of the browser window, maybe I can follow the changes of the elements.

MEET ResizeObserver

While doing a quick search about MutationObserver, I found an even better way called ResizeObserver. This one only tracks the size changes of the selected element. So It should be way more performant than MutationObserver.

I decided to test ResizeObserver out. Insted of attaching a ref to an existing and already crowded components, I just created an empty div with no styling, attached it a ref fresh from the factory.

// more code
const [resized, setResized] = useState(false);

const $resizeDiv = useRef();

useEffect(() => {
	const resizeObserver = new ResizeObserver(() => {
		setResized(Date.now());
	});

	resizeObserver.observe($resizeDiv.current);
}, []);
// more code
<Canvas resized={resized} />

IT WORKED! Now the includes of the canvas resize everytime the browser is actually resized. So if you ever encounter this behaviour, you now know what to do.