I have a small app that lets a user see a game. If they log in, they can see the game editor.

So when the app first loads, it just shows them the game window.

However, when they log in, I want to show them the game editor.

So when it first loads, and the user is not logged in, it does show the game.

However, if I try to log in, I am getting error like this in browser:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

It tells me on this line:

setLoginStatus(true); 

Here is my app:

const Header = () => {

    const [showGameEditWindow, setGameEditWindow] = useState(false);
    const [showGame, setGame] = useState(true);
    const [loggedInStatus, setLoginStatus] = useState(false);

    console.log("loggedInStatus: ", loggedInStatus);
    console.log("showGameEditWindow: ", showGameEditWindow);

    if (loggedInStatus) {
        setGame(false);
        setGameEditWindow(true);
    }
    
    //this doesn't run if user is already logged in
    auth.onAuthStateChanged((firebaseUser) => {
        if (firebaseUser) {
            setLoginStatus(true);
        } else {
            setLoginStatus(false);
        }
    })
    
    const handleTableClick = useCallback(e => { setGame(true) || setGameEditWindow(false) }, []);
    const handleGameEditorClick = useCallback(e => { setGame(false) || setGameEditWindow(true) }, []);


    return (
        <div>
            <div>
                <span>
                    {<RenderLoginLink
                        onClick={handleLoginClick}
                        loggedInStatus={loggedInStatus}
                        returnToMain={handleTableClick}
                        adminTable={handleGameEditorClick}
                    />}
                </span>
            </div>
            <div>
                <div>
                    {showGame && <Game />}
                </div>
                <div>
                    {showGameEditWindow && <GameEditor onClick={handleGameEditorClick} />}
                </div>
                <div id="portal-root"></div>
            </div>
        </div>
  
  );
}     

Is there any way to fix this?

CodePudding user response：

move this to useEffect:

ussEffect(()=>{
if (loggedInStatus) {
    setGame(false);
    setGameEditWindow(true);
}
},[showGameEditWindow showGame])

CodePudding user response：

Since your if (loggedInStatus)..setGame block is just hanging out in the body of your component, it runs on every rerender, which triggers another render and you're stuck in the loop you're in. You want to use the useEffect hook which watches for changes on variables you supply (dependencies) and then runs code when those change.

useEffect(() => {
  if (loggedInStatus) {
    setGame(false);
    setGameEditWindow(true);
  }
}, [loggedInStatus]);

The code inside will only run when loggedInStatus changes, which will solve your too many re-renders problem.