React Strict Mode causing issues during development

112 Views Asked by At

I have this Skip component to conditionally skip pages. I noticed that instead of skipping ONE page, it skips two pages! I suspected that it might be the Strict Mode running the UseEffect code twice. I turned the Strict Mode off and now the Skip behaves as it should, i.e. skipping just ONE page. Is this a bad practice to turn strict mode off? I was assuming it was meant to help development, but it really threw me off for a couple of hours trying to figure out what was wrong!

const Skip = () => {
  // nav is a Zustand store reference that holds the page state
  // Zustand state updates need to be run in useEffect otherwise console throws errors.
  useEffect(() => {
    if (nav.isNextClicked) {
      nav.nextPage();
    }
    if (nav.isBackClicked) {
      nav.prevPage();
    }
  }, []);

  return <div></div>;
};

export default Skip;
0

There are 0 best solutions below