ReactJs applying javascript correctly

Question

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 !

Answer 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.

Answer 2

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.