Debouncing resize events

This commit is contained in:
Eric van der Vlist 2022-09-06 11:44:36 +02:00
parent 4e26d94843
commit af226285be
1 changed files with 12 additions and 8 deletions

View File

@ -1,5 +1,5 @@
import _, { round } from 'lodash'; import _, { round } from 'lodash';
import react, { useState, useEffect } from 'react'; import react, { useState, useEffect, useMemo } from 'react';
import Tile from './tile'; import Tile from './tile';
@ -38,14 +38,18 @@ const Map: react.FC = () => {
width: window.innerWidth, width: window.innerWidth,
}); });
const handleResize = () => {
setDimensions({
height: window.innerHeight,
width: window.innerWidth,
});
};
const debouncedEventHandler = useMemo(
() => _.debounce(handleResize, 300)
, [dimensions, zoom, center]);
useEffect(() => { useEffect(() => {
const handleResize = () => { window.addEventListener('resize', debouncedEventHandler);
setDimensions({
height: window.innerHeight,
width: window.innerWidth,
});
};
window.addEventListener('resize', handleResize);
}); });
const nbTilesY = _.ceil(dimensions.height / tileSize) + 2; const nbTilesY = _.ceil(dimensions.height / tileSize) + 2;