Use React to increment a variable by a random value until it reaches a specific threshold

Question

Use React to increment a variable by a random value until it reaches a specific threshold

I am currently working on creating a simulated loading bar, similar to the one seen on YouTube videos. My goal is for it to last 1.5 seconds, which is the average time it takes for my page to load. However, I have encountered an issue with the following code:

  const [fakeLoader, setFakeLoader] = useState(0);

  const startLoader = useCallback(() => {
    if (fakeLoader > 100) return;
    requestAnimationFrame(startLoader);

    if (Math.random() < 0.05) {
      setFakeLoader((prev) => (prev += Math.random() * 3));
    }
  }, []);

  useEffect(() => {
    startLoader();
  }, [startLoader]);

The problem lies in the fact that fakeLoader always remains at 0 within the startLoader function, preventing the conditional statement from running. I attempted removing the useCallback, but found that this caused the function to constantly change, potentially leading to memory leaks or other issues.

javascript reactjs

Answer 1

Answer №1

There are some issues within your code, but the primary concern lies in the stale enclosure of the fakeLoader state within the useCallback hook.

To address this, one possible solution involves utilizing an interval to periodically check if a state update is required. Through a slight refactoring, a custom useInterval hook can be implemented. By moving the condition fakeLoader < 100 into the functional state update callback, it allows for correct referencing of the previous state.

const useInterval = (callback, delay) => {
  const savedCallback = React.useRef(null);

  React.useEffect(() => {
    savedCallback.current = callback;
  });

  React.useEffect(() => {
    const id = setInterval(savedCallback.current, delay);
    return () => clearInterval(id);
  }, [delay]);
};

function App() {
  const [fakeLoader, setFakeLoader] = React.useState(0);

  const startLoader = () => {
    setFakeLoader((fakeLoader) => {
      if (fakeLoader < 100 && Math.random() < 0.05) {
        return Math.min(fakeLoader + Math.random() * 3, 100);
      }
      return fakeLoader;
    });
  };

  useInterval(startLoader, 100 / 6); // 16.666ms is approx 60fps

  React.useEffect(() => {
    console.log(fakeLoader);
  }, [fakeLoader]);

  return (
    <div className="App">
      fakeLoader: {fakeLoader.toFixed(2)}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root" />

Answer 2

There are some issues within your code, but the primary concern lies in the stale enclosure of the fakeLoader state within the useCallback hook.

To address this, one possible solution involves utilizing an interval to periodically check if a state update is required. Through a slight refactoring, a custom useInterval hook can be implemented. By moving the condition fakeLoader < 100 into the functional state update callback, it allows for correct referencing of the previous state.

const useInterval = (callback, delay) => {
  const savedCallback = React.useRef(null);

  React.useEffect(() => {
    savedCallback.current = callback;
  });

  React.useEffect(() => {
    const id = setInterval(savedCallback.current, delay);
    return () => clearInterval(id);
  }, [delay]);
};

function App() {
  const [fakeLoader, setFakeLoader] = React.useState(0);

  const startLoader = () => {
    setFakeLoader((fakeLoader) => {
      if (fakeLoader < 100 && Math.random() < 0.05) {
        return Math.min(fakeLoader + Math.random() * 3, 100);
      }
      return fakeLoader;
    });
  };

  useInterval(startLoader, 100 / 6); // 16.666ms is approx 60fps

  React.useEffect(() => {
    console.log(fakeLoader);
  }, [fakeLoader]);

  return (
    <div className="App">
      fakeLoader: {fakeLoader.toFixed(2)}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root" />

Use React to increment a variable by a random value until it reaches a specific threshold

Answer №1

Similar questions

Errors are caused when attempting to install third-party JS plugins using npm within a foundation project

Include personalized headers to the 'request'

Monitor a user's activity and restrict the use of multiple windows or tabs using a combination of PHP and

What is the best way to create a list from a matrix using JavaScript?

Sending a JavaScript function as part of an ajax response

Discovering the proper method to reach the parent element in jQuery while within the click event

Obtain data with matching JSON values in a REACT application

Why am I receiving an error message stating "undefined is not a function" when trying

Using Node.js and Less to dynamically select a stylesheet source depending on the subdomain

Steps for generating random numbers from a set of given numbers

Facing problem with Angular 7 when making a GET request for non-JSON data

Another option instead of using $index for displaying serial numbers in ng-repeat

The cookie being sent from the backend API (implemented in nodeJS using express) to the frontend (developed with NextJS) is not successfully setting in the

When the Fetch response displays a 401 Unauthenticated error, it typically indicates an issue with authentication in a React frontend

The absence of a closing parentheses in the argument is causing an issue when rendering

What could be the reason for the absence of this Javascript function in my attribute?

JavaScript code for iframe auto resizing is not functioning properly on Firefox browser

The specific property 'splice' cannot be found within type 'T'

Transforming form inputs into JSON structure

The output of the Node.js crypto.pbkdf2 function may not match the result obtained from CryptoJS.PBKDF