Optimize useKWindowDimensions performance

[MisRob]

Summary

In useKWindowDimensions, we read window.innerWidth/Height on each resize event

kolibri-design-system/lib/useKWindowDimensions.js

Line 45 in 9ea4bae

window.addEventListener('resize', eventHandler, true);

kolibri-design-system/lib/useKWindowDimensions.js

Lines 25 to 26 in 9ea4bae

	width: window.innerWidth,
	height: window.innerHeight,

This is not good performance-wise since reading innerWidth/Height causes layout/reflow.

It'd be good to debounce the event handler calls so that innerWidth/Height is not read so often.

lodash/debounce is available in this repository for that purpose.

References

• If the resize event is triggered too many times for your application, see Optimizing window.onresize to control the time after which the event fires. (https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event)

• https://medium.com/@vaibhavar/ui-performance-window-resize-handler-debouncing-2ec5f7432165

[Jaspreet-singh-1032]

Hi @MisRob, Please assign this issue to me.

[MisRob]

Thanks @Jaspreet-singh-1032, assigning you