3

I have 3 pages reactjs application with a bootstrap template. I am using react-router to handle the page transitions. So I have a index.js file containing something like:

function App() {
   return(
      <Router>
        <Switch>
          <Route path="/page1/">
            <Page1 />
          </Route>
          <Route path="/page2">
            <Page2 />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </Router>
    );
}

In my index.html file, I defined some js functions to apply some effects to the pages, like a carousel and things like this. The weird thing is that when I reach page2 from clicking the link on page1 the js effects are applied, but when I refresh it the js effects are not applied...

this is my page2 file (I stripped all the unnecessary stuff for simplicity):

function Page2(){
useEffect(() => {
   window.applyEffects();
})

return(
  some jsx here...
)
}

am I doing something wrong here?

EDIT

I realised I forgot to add an important detail. I removed the useEffect and the call to window.applyEffects() in my component and the page renders as I would expect without the effect. If then I call window.applyEffects() from the developer console everything works fine. I suspect I should find a way to call the js function AFTER the page has been totally rendered. Is this doable?

SOLVED

I would like to thank everyone that replied and helped me in the right direction. I solved it by updating the useEffect hook like this:

useEffect(() => {
  const script = document.createElement('script');

  script.src = `${window.location.origin}/js/effects.js`;
  script.async = true;

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  }
});

I created a file called effects.js in the js folder, and I load it by appending it to the dom every time the component loads... also I remember to remove it with the return. I leave this here hoping it could help someone in my same situation in the future! Thank you stackoverflow community !

Gnagno
  • 597
  • 1
  • 6
  • 18

2 Answers2

1

It seems that you just want to run a piece of code every time page is reloaded, checking it out I found it React | How to detect Page Refresh (F5)

and it seems what you are looking for.

Adriano Machado
  • 170
  • 10
  • I posted a similar comment to another answer stating the same but I guess the person deleted his answer. The `useEffect` hook will fire in an infinite look without the **array** dependency, thus firing the function inside. However, it seems that is not the case, I suspect he's not using the `window` object correctly. – ZombieChowder Nov 30 '20 at 21:43
  • try to add window in the dependency array, like useEffect(() => { window.applyEffects(); },[window]) or even window.applyEffects as I edited my answer – Adriano Machado Nov 30 '20 at 21:45
  • Thank you for your comment, I tried adding window in the dependency array and I get this error in the browser console: React Hook useEffect has an unnecessary dependency: 'window'. Either exclude it or remove the dependency array. Outer scope values like 'window' aren't valid dependencies because mutating them doesn't re-render the component I get the same even if I add window.applyEffects in the array... – Gnagno Nov 30 '20 at 22:32
  • Yep there's no reason to add any global variables, including `window` itself, to a React dependency array. – Caleb Miller Nov 30 '20 at 22:44
  • Thank you for your help, I fixed it and updated the initial question with the solution – Gnagno Dec 01 '20 at 14:34
1

I saw that you are using window object inside your code. Maybe that is the root of your problem. On the official documentation it says:

Window Object The window object represents an open window in a browser.

If a document contain frames ( tags), the browser creates one window object for the HTML document, and one additional window object for each frame.

...which kind of suggests that it will fire once the window is open in the browser, hence I'm not sure that it will re-fire once you refresh the page. Having the useEffect hook should fire away anything when a page refreshes because it mounts the component again.

I suggest look into how you are using the window.applyEffects(). Here's a link to the official window documentation.

ZombieChowder
  • 1,187
  • 12
  • 36