feat: add passive flage to every addEventListener (#318)

Author: VitaliiDC8

src/blocks/Slider/Slider.tsx

@@ -156,7 +156,7 @@ export const SliderBlock = (props: WithChildren<SliderProps>) => {
     useEffect(() => {
         onResize();
 
-        window.addEventListener('resize', onResize);
+        window.addEventListener('resize', onResize, {passive: true});
 
         return () => window.removeEventListener('resize', onResize);
     }, [onResize]);

src/components/BalancedMasonry/BalancedMasonry.tsx

@@ -93,7 +93,7 @@ const BalancedMasonry = (props: WithChildren<BalancedMasonryProps>) => {
     useEffect(() => {
         const updateColumnCounter = () => setColumnCount(getCurrentColumnsCount());
 
-        window.addEventListener('resize', updateColumnCounter);
+        window.addEventListener('resize', updateColumnCounter, {passive: true});
         return () => window.removeEventListener('resize', updateColumnCounter);
     }, [setColumnCount, columns, getCurrentColumnsCount]);
 

src/components/FullWidthBackground/FullWidthBackground.tsx

@@ -40,7 +40,7 @@ export default class FullWidthBackground extends Component<
         if (this?.ref?.current?.parentElement) {
             this.ref.current.parentElement.style.position = 'relative';
             this.setBg();
-            window.addEventListener('resize', this.setBg);
+            window.addEventListener('resize', this.setBg, {passive: true});
         }
     }
 

src/components/HeightCalculator/HeightCalculator.tsx

@@ -47,7 +47,7 @@ const HeightCalculator = ({onCalculate, children}: WithChildren<HeightCalculator
         }, 1000);
 
         calculateContainerHeight();
-        window.addEventListener('resize', handleResize);
+        window.addEventListener('resize', handleResize, {passive: true});
 
         return () => window.removeEventListener('resize', handleResize);
     }, [calculateContainerHeight]);

src/components/Map/GoogleMap.tsx

@@ -49,7 +49,7 @@ const GoogleMap: React.FC<GMapProps> = (props) => {
         }, 100);
 
         updateSize();
-        window.addEventListener('resize', updateSize);
+        window.addEventListener('resize', updateSize, {passive: true});
 
         return () => {
             window.removeEventListener('resize', updateSize);

src/components/Map/YMap/YandexMap.tsx

@@ -76,7 +76,7 @@ const YandexMap: React.FC<YMapProps> = (props) => {
         }, 100);
 
         updateSize();
-        window.addEventListener('resize', updateSize);
+        window.addEventListener('resize', updateSize, {passive: true});
 
         return () => {
             window.removeEventListener('resize', updateSize);

src/components/Media/Image/Image.tsx

@@ -40,7 +40,7 @@ const Image = (props: ImageAllProps) => {
     useEffect(() => {
         if (parallax) {
             const handleScroll = () => setScrollY(window.scrollY);
-            window.addEventListener('scroll', _.debounce(handleScroll, 5));
+            window.addEventListener('scroll', _.debounce(handleScroll, 5), {passive: true});
             return () => window.removeEventListener('scroll', _.debounce(handleScroll, 5));
         }
 

src/components/Media/Video/Video.tsx

@@ -47,15 +47,19 @@ const Video = (props: VideoAllProps) => {
             if (loop && typeof loop !== 'boolean') {
                 const {start = 0, end} = loop;
 
-                ref.current.addEventListener('timeupdate', () => {
-                    const videoRef = ref.current;
-                    const endTime = end || (videoRef && videoRef.duration);
-
-                    if (videoRef && videoRef.currentTime === endTime) {
-                        videoRef.currentTime = start;
-                        videoRef.play().catch(() => setHasVideoFallback(true));
-                    }
-                });
+                ref.current.addEventListener(
+                    'timeupdate',
+                    () => {
+                        const videoRef = ref.current;
+                        const endTime = end || (videoRef && videoRef.duration);
+
+                        if (videoRef && videoRef.currentTime === endTime) {
+                            videoRef.currentTime = start;
+                            videoRef.play().catch(() => setHasVideoFallback(true));
+                        }
+                    },
+                    {passive: true},
+                );
             }
 
             if (playVideo) {

src/components/OutsideClick/OutsideClick.tsx

@@ -11,7 +11,7 @@ export default class OutsideClick extends React.Component<PropsWithChildren<Outs
     ref = createRef<HTMLDivElement>();
 
     componentDidMount() {
-        document.addEventListener('click', this.handleOutsideClick);
+        document.addEventListener('click', this.handleOutsideClick, {passive: true});
     }
 
     componentWillUnmount() {

src/components/OverflowScroller/OverflowScroller.tsx

@@ -37,7 +37,7 @@ export default class OverflowScroller extends React.Component<
 
     componentDidMount() {
         this.checkOverflow();
-        window.addEventListener('resize', this.checkOverflow);
+        window.addEventListener('resize', this.checkOverflow, {passive: true});
     }
 
     componentDidUpdate(