strange behavior of history.goBack()

[Pong420]

Minimal CodeSandbox Demo

Step to reproduce

1. Open the demo
2. Navigate to /about
3. Click on Go Back browser history back button
   

Expected console.log

Home 1
About 2
Home 3

Actual console.log

Home 1
About 2
About 3
Home 3

[AlexReff]

You forgot to include event.preventDefault() before your history call. You provided an href value, so the browser tries to navigate to it, then the click handler performs a history action, causing the duplication.

Before:

<a href="#" onClick={() => history.goBack()}>

After:

<a href="#" onClick={(e) => e.preventDefault(), history.goBack()}>

[Pong420]

Thanks your reminder.
But the issues still occur if click on the browser history back button

[agriffis]

@Pong420 I think what you're seeing is that effects run immediately when props change, but components (and routes) wait to render until the next tick (request animation frame).

You can see this if you add some logging for the rendering:

function Home() {
  useHooks("Home");
  console.log("rendering Home");
  return (
    <div>
      <h2>Home</h2>
    </div>
  );
}

function About() {
  useHooks("About");
  console.log("rendering About");
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

Now your sequence produces:

rendering Home 
Home 1 -- effect ran at component mount
rendering About 
About 2 -- effect ran at component mount
rendering About 
About 3 -- effect ran when "back clicked"
rendering Home 
Home 3 -- effect ran at component mount

I'm not sure why we don't also see an extra effect when links are clicked as we see from browser back and forward, but in any case, it's something to be aware of: Effects run when props they depend on change, even when the component is preparing to unmount.

[Pong420]

Effects run when props they depend on change, even when the component is preparing to unmount.

you are right, thanks

[halil-akgun]

You forgot to include event.preventDefault() before your history call. You provided an href value, so the browser tries to navigate to it, then the click handler performs a history action, causing the duplication.

Before:

<a href="#" onClick={() => history.goBack()}>

After:

<a href="#" onClick={(e) => e.preventDefault(), history.goBack()}>

Thank you very much.
I was struggling for an hour. Thanks to you, I solved the problem by doing the following:

onClick={(e) => { e.preventDefault(); props.history.goBack(); }}