1

I'm using login with firebase which has hooks like this

const [user, loading, error] = useAuthState(auth);

When the user variable changes, it's suppose to indicate they have logged in.

So I do this

useEffect(() => {
    if (loading) return;
    if (!user) return navigate("/");
    
    //otherwise do some network stuff
}, [user, loading]);

But the problem now is that I'm hitting the server twice because useEffect is always called twice in strict mode.

And I'm not suppose to turn off strict mode because it's good for you.

So what is the solution?

erotsppa
  • 14,248
  • 33
  • 123
  • 181
  • This is by design. Why is hitting the server twice an issue? Strict mode is there to help you make sure that effects are cleaned-up properly and don't cause issues in production if a components renders twice in short sequence. – Slava Knyazev Apr 19 '23 at 22:27
  • 1
    Does this answer your question? [My React Component is rendering twice because of Strict Mode](https://stackoverflow.com/questions/61254372/my-react-component-is-rendering-twice-because-of-strict-mode) – Slava Knyazev Apr 19 '23 at 22:27
  • No I specifically said I dont want to remove it and I dont want to have redundant calls to the server – erotsppa Apr 19 '23 at 22:56
  • Why do you not want redundant calls? Note that this only happens in development mode. This feature is turned off in production. – Slava Knyazev Apr 19 '23 at 23:28

1 Answers1

-1

This is due to strict mode being enabled- it's designed this way to help you assess the purity of your functions. Note that this is only in development, and will be turned off in production, so not much to worry about there.

pujan parikh
  • 9
  • 5