Question 220129 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – window.onload Is not firing on mobile, while working on desktop. (react js)

Thank you for your time and without further ado, let’s get to the topic:

I need to run 1 of 2 different functions based on the starting boolean. I’m using window.onload to determine which one to run. (in the original code those functions determine what to display on the page)

Everything works fine on a desktop browser, but unfortunately, this solution does not work on mobile.

I’ve broken up my bug into this code:

import "./App.css";
import React from "react";

function App() {
  var startBoolean = true;                // starting condition, will be changed "manually"

  window.onload = (event) => {
    onLoadFunction();
  };

  const onLoadFunction = () => {
    if (startBoolean === true) {
      functionOnTrue();
    }
    if (startBoolean === false) {
      functionOnFalse();
    }
  };

  const functionOnTrue = async () => {
    console.log("Runing functionOnTrue");
    alert("Runing functionOnTrue");
  };

  const functionOnFalse = async () => {
    console.log("Runing functionOnFalse");
    alert("Runing functionOnFalse");
  };

  return (
    <div className="App">
      <button onClick={onLoadFunction}>Test onLoadFunction</button>
    </div>
  );
}

export default App;

Working fine on a desktop, but not on a mobile. (alert is not popping up)To make it work you need to manually run the function, by pressing the "Test onLoadFunction" button.

Any idea why it’s not running?

And yes, I’m new to React 😉

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you all, it worked. To sum it up:

    As some of you mentioned, the answer was as simple as switching from window.onloade to useEffect.

    From:

    window.onload = (event) => {
   onLoadFunction();
};

    to:

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

    Though there are two things I feel are worth adding.

    1. To make it work, remember to add import React, {useEffect} from "react"; to the top of your file. or use react.useEffect.
    2. Chek if you don't have your strict mode enabled, it may cause your page to rerender twice. With might lead to some trouble. More here: link.

  2. 0

    In a React app you should use the useEffect hook instead of window.onload
    Check out this link
    useEffect

    Login or Signup to reply.
  3. 0

    The reason the code is not working as expected on mobile devices is that you’re relying on the window.onload event to trigger the onLoadFunction, but on mobile devices, this event might not behave the same way as on desktop browsers.

    On mobile devices, the window.onload event might fire under different circumstances, and in some cases, it might not fire at all, especially when the page is loaded and transitioned through various states, such as when using single-page applications like React.

    To ensure that your onLoadFunction runs correctly regardless of the platform, you can use the useEffect hook in React. The useEffect hook is designed to handle side effects, such as running code after the component has rendered. You can also use it to control the initial behavior based on the startBoolean variable.

    Here’s the modified code using the useEffect hook:

    import "./App.css";
import React, { useEffect } from "react";

function App() {
  var startBoolean = true; // starting condition, will be changed "manually"

  useEffect(() => {
    onLoadFunction();
  }, []); // The empty dependency array ensures this effect runs only once after the initial render.

  const onLoadFunction = () => {
    if (startBoolean === true) {
      functionOnTrue();
    } else {
      functionOnFalse();
    }
  };

  const functionOnTrue = async () => {
    console.log("Running functionOnTrue");
    alert("Running functionOnTrue");
  };

  const functionOnFalse = async () => {
    console.log("Running functionOnFalse");
    alert("Running functionOnFalse");
  };

  return (
    <div className="App">
      <button onClick={onLoadFunction}>Test onLoadFunction</button>
    </div>
  );
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search