Problem useEffect and react router in reactjs?

Question

I set useEffect for only the first time running the console.log("hello");. But when I click the Home link, the useEffect run many times. Why is that? How do I fix it?

https://codesandbox.io/s/relaxed-wildflower-updeh?file=/src/Home.js:95-298

const Home = () => {
  useEffect(() => {
    console.log("hello");
  }, []);

  return (
    <div>
      <h1>History</h1>
      <Link to="/">Home</Link>
    </div>
  );
};

what do you mean it runs many times? It only logs after the rendering the component at the moment — prabhu
– prabhu, Commented Jul 31, 2020 at 11:22
the '/' route routes back again to home page, so it will run on every render, pretty much expected. — Zen_Web
– Zen_Web, Commented Jul 31, 2020 at 11:27

rb612 · Accepted Answer · 2020-07-31 11:26:13Z

3

The useEffect is running every time despite the [] argument because the component itself is mounting/unmounting every time. Why? Because react-router is not properly configured, so it's essentially refreshing the page every time, since react-router isn't there to intercept it. That's likely not what you want — to resolve, you can use history.push() for navigation, but better would be to set up the Router instance itself.

answered Jul 31, 2020 at 11:26

rb612

5,6433 gold badges36 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem useEffect and react router in reactjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related