My website keeps crashing because the "wheel" event is being constantly triggered

Question

My website keeps crashing because the "wheel" event is being constantly triggered

import React, { useEffect, useState } from "react";
import "./Skill.css";
import { Fade } from "react-reveal";
function Skill({ name, color }) {
  const [style, setStyle] = useState({ borderBottom: `4px solid ${color}` });
  
  window.addEventListener("wheel", () => {
    let scroll = window.scrollY;
    console.log(scroll);
    if (scroll >= 1300) {
      setStyle({
        animation: "load 2s ease-out",
        display: "block",
        borderBottom: `4px solid ${color}`,
      });
    }
  });
  return (
    <>
      <div className="skill">
        <Fade bottom>
          <div className="Skill__logo">
            <img
              className="logo__img"
              src="./images/html-5-logo-svgrepo-com.svg"
              alt=""
            />
          </div>
          <div className="skills__about">
            <div className="skillitem">
              <div className="skill__set">
                <div className="skill__Name" style={{ color: color }}>
                  {name}
                </div>
              </div>
              <div style={style} className="loading__skill"></div>
            </div>
          </div>
        </Fade>
      </div>
    </>
  );
}

export default Skill;

Need assistance with my code as the wheel event seems to be firing infinitely and causing my application to crash. Any insights on how to resolve this issue would be greatly appreciated.

javascript html css reactjs

Answer 1

Answer №1

Once the setStyle function is triggered within the wheel event listener callback, it triggers a refresh of the Skill component, which in turn invokes

window.addEventListener("wheel", () => {

again. This results in another callback being added to the window object, causing the initial wheel event to be triggered again, creating an infinite loop.

To resolve this issue, a simple solution is to place the logic that should only run during the initial render inside a useEffect hook with an empty dependency array, like this:

useEffect(() => {
  window.addEventListener("wheel", () => {
    let scroll = window.scrollY;
    console.log(scroll);
    if (scroll >= 1300) {
      setStyle({
        animation: "load 2s ease-out",
        display: "block",
        borderBottom: `4px solid ${color}`,
      });
    }
  });
}, []);

While the above solution works, it is a temporary fix. It is important to control window-related properties in the top-most parent component of the application to prevent global variable pollution and ensure the maintainability of event listeners.

Answer 2

Once the setStyle function is triggered within the wheel event listener callback, it triggers a refresh of the Skill component, which in turn invokes

window.addEventListener("wheel", () => {

again. This results in another callback being added to the window object, causing the initial wheel event to be triggered again, creating an infinite loop.

To resolve this issue, a simple solution is to place the logic that should only run during the initial render inside a useEffect hook with an empty dependency array, like this:

useEffect(() => {
  window.addEventListener("wheel", () => {
    let scroll = window.scrollY;
    console.log(scroll);
    if (scroll >= 1300) {
      setStyle({
        animation: "load 2s ease-out",
        display: "block",
        borderBottom: `4px solid ${color}`,
      });
    }
  });
}, []);

While the above solution works, it is a temporary fix. It is important to control window-related properties in the top-most parent component of the application to prevent global variable pollution and ensure the maintainability of event listeners.

Answer 3

Answer №2

One potential explanation could be the frequent firing of the wheel event during scrolling. To address this issue, you can experiment with implementing a debouncing script.

// ...more code
function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
 window.addEventListener("wheel", debounce(() => {
    let scroll = window.scrollY;
    console.log(scroll);
    if (scroll >= 1300) {
      setStyle({
        animation: "load 2s ease-out",
        display: "block",
        borderBottom: `4px solid ${color}`,
      });
    }
  }));
// ...more code

This particular implementation sets a limit of firing the event every 300 milliseconds, approximately every 0.3 seconds.

Answer 4

One potential explanation could be the frequent firing of the wheel event during scrolling. To address this issue, you can experiment with implementing a debouncing script.

// ...more code
function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
 window.addEventListener("wheel", debounce(() => {
    let scroll = window.scrollY;
    console.log(scroll);
    if (scroll >= 1300) {
      setStyle({
        animation: "load 2s ease-out",
        display: "block",
        borderBottom: `4px solid ${color}`,
      });
    }
  }));
// ...more code

This particular implementation sets a limit of firing the event every 300 milliseconds, approximately every 0.3 seconds.

Answer 5

Answer №3

Just a friendly reminder, each time you update state or modify a prop, a new render cycle is triggered. The issue lies in your component where you are attaching a listener to the scroll event during every render cycle without removing it. Moreover, one of the actions within your listener function is to update state, leading to another render, and subsequently creating another listener, resulting in a potential infinite loop scenario.

The recommended approach is to utilize the useState hook to attach your listener during the initial render only and provide a function to remove the listener when the component unmounts:

// define handleWheel outside your function or use `useCallback` for a persistent reference
const handleWheel = () => {
  let scroll = window.scrollY;
  console.log(scroll);
  if (scroll >= 1300) {
    setStyle({
      animation: "load 2s ease-out",
      display: "block",
      borderBottom: `4px solid ${color}`,
    });
  }
}

// later in your component:
useState(() => {
  window.addEventListener("wheel", handleWheel);
  return () => window.removeEventListener("wheel", handleWheel); // to be executed on component unmount
}, []); // empty array ensures it runs only during the initial render

Answer 6

Just a friendly reminder, each time you update state or modify a prop, a new render cycle is triggered. The issue lies in your component where you are attaching a listener to the scroll event during every render cycle without removing it. Moreover, one of the actions within your listener function is to update state, leading to another render, and subsequently creating another listener, resulting in a potential infinite loop scenario.

The recommended approach is to utilize the useState hook to attach your listener during the initial render only and provide a function to remove the listener when the component unmounts:

// define handleWheel outside your function or use `useCallback` for a persistent reference
const handleWheel = () => {
  let scroll = window.scrollY;
  console.log(scroll);
  if (scroll >= 1300) {
    setStyle({
      animation: "load 2s ease-out",
      display: "block",
      borderBottom: `4px solid ${color}`,
    });
  }
}

// later in your component:
useState(() => {
  window.addEventListener("wheel", handleWheel);
  return () => window.removeEventListener("wheel", handleWheel); // to be executed on component unmount
}, []); // empty array ensures it runs only during the initial render

Answer 7

Answer №4

There are many excellent answers, but none have mentioned a way to prevent re-rendering. Allow me to suggest a different approach. Instead of using window.addEventListener("wheel") to detect scrolling and applying a style when scrollY > 1300, which triggers re-rendering each time, we can use useRef() to store a value that indicates whether the state change is necessary. By doing so, we can avoid unnecessary re-renders caused by repeatedly setting the style as we scroll. Changes to the ref value do not trigger re-renders; only changes to the state do.

For more information on useRef(), you can visit this link.

Below is a code example that demonstrates this approach:

You can also utilize React.Memo() and provide a comparison function to prevent re-renders triggered by continuous scrolling events and style changes.

Answer 8

There are many excellent answers, but none have mentioned a way to prevent re-rendering. Allow me to suggest a different approach. Instead of using window.addEventListener("wheel") to detect scrolling and applying a style when scrollY > 1300, which triggers re-rendering each time, we can use useRef() to store a value that indicates whether the state change is necessary. By doing so, we can avoid unnecessary re-renders caused by repeatedly setting the style as we scroll. Changes to the ref value do not trigger re-renders; only changes to the state do.

For more information on useRef(), you can visit this link.

Below is a code example that demonstrates this approach:

You can also utilize React.Memo() and provide a comparison function to prevent re-renders triggered by continuous scrolling events and style changes.

My website keeps crashing because the "wheel" event is being constantly triggered

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unable to access $_SESSION variable when making AJAX request from a different port

Resolving VSCode WebViewPanel access issues through a corporate proxy

Can the system automatically generate and display a new user ID right after a form is submitted?

Ways to compel links to open in Internet Explorer

Display the size of the data array in VueJS once the data has been retrieved from the API

Transforming dynamic class based on state value from React to TypeScript

Access external variables in next.js outside of its environment configuration

Trouble Viewing Image File

Creating and deleting HTML elements in a dynamic array format

Error message, 'props is incompatible with empty', appears when attempting to create a Component without passing any props

React: Function is missing a return type declaration. eslint plugin @typescript-eslint urges for explicit function return types

Finding a solution for odd css box-sizing behavior in Bootstrap 3 and eliminating the unwanted horizontal slider

Execute the cucumber cli programmatically in the index.js file of a node application

How to Pause or Temporarily Halt in Jquery?

Create a Vue component that utilizes the v-for directive to iterate through a list of items, passing data from a

Having trouble with an unknown cipher when using the crypto module?

Error: Attempting to access 'string' property of an undefined object when utilizing griddle version 1.0.3 in conjunction with react version 16.2.0

Toggling visibility in React Native by pressing a button

the function fails to run upon clicking the button again

Encountering a "Cannot GET /PATH" error while developing a NUXT application due to a DOT present in