UseEffect firing on certain page changes, despite passing in empty array

[TomGriffiths88]

Hey guys, I'm building an e-comm site at the moment and I have made an announcement bar component. Nearly all of the site is SSG as products etc wont change very often.

I am making an announcement bar component, that will fetch the latest news from headless cms via axios in useEffect hook. Then on successful load will render the bar, which can be dismissed by the user.

The only problem is, useEffect keeps firing when I navigate pages causing the bar to pop up again, despite having passed in an empty array.

The announcement bar component is rendered within my layout component which wraps my _app component. So unless I'm missing something it shouldn't be re-rendered for a page change.

Whats going on here? Any help would be greatly appreciated.

  useEffect(() => {
    axios
      .get(
        'https://xxxxxxxxxxxx/options/announcements'
      )
      .then((res) => {
        setAnnouncement(res.data.acf.message);
        setShowAnnouncement(true);
      })
      .catch((err) => console.log(err));
  }, []);