ReactJS/NextJS - useState crashes tab

Question

At line #27, setOpenAddFolders(true) causes the whole tab to freeze. I have tried everything and searched everywhere, nothing. I used similar code (set a usestate var) in a different file, it works, but the code below just won't work.

I did also added console.log, but it shows that the setState did not do anything, instead it just crashes the whole tab.

Here is the error from the terminal (note that this is after the tab freezes):

error - uncaughtException: Error: No router instance found. you should only use "next/router" inside the client side of your app. https://nextjs.org/docs/messages/no-router-instance
    at noRouter (D:\xxxxx\node_modules\next\dist\server\render.js:54:11)
    at ServerRouter.push (D:\xxxxx\node_modules\next\dist\server\render.js:73:9)
    at Timeout.eval [as _onTimeout] (webpack-internal:///./pages/storage/uploadFiles.tsx:37:24)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7)```

import {useRouter} from "next/router";
import React, {useState} from "react";
import {BsArrowDownCircle} from "react-icons/bs";
import {auth} from "./../../firebase"; 
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default function uploadFiles() {
    const router = useRouter();
    const [loggedIn, setLoggedIn] = useState(false);
    const [openAddFolders, setOpenAddFolders] = useState(false);
    auth.onAuthStateChanged(function(user) {
    if (user) {
        setLoggedIn(true);
    }else{
        toast.error("Please Sign In, You Are Being Redirected");
        setTimeout(function(){
            router.push("/");
        }, 5000);
    }
    });
   

    function openAddFoldersMenu()
    {
        setOpenAddFolders(true);
    }


    function openUploadImagesMenu()
    {
        console.log("b");
    }

    return(
        <React.Fragment>
            <ToastContainer />
            {loggedIn ?
                <div className="flex items-center justify-center">
                    <div className="w-1/2">
                        <div onClick={openAddFoldersMenu} className="hover:cursor-pointer my-10 rounded-t-3xl w-full p-9 hover:bg-cyan-400 hover:text-white hover:shadow-cyan-500/50 shadow-lg ease-linear duration-100">
                            <div className="flex justify-between">
                                <h1>Add Folders</h1>
                                <BsArrowDownCircle className="animate-bounce" size={20} />
                            </div>
                            {/* <div className={addFolders ? "" : "hidden"}>
                                Some Information
                                
                            </div> */}
                        </div>

                        <div onClick={() => openUploadImagesMenu()} className="hover:cursor-pointer rounded-t-3xl w-full p-9 hover:bg-cyan-400 hover:text-white hover:shadow-cyan-500/50 shadow-lg ease-linear duration-100">
                            <div className="flex justify-between">
                            <h1>Upload Images</h1>
                                <BsArrowDownCircle className="animate-bounce" size={20} />
                            </div>
                            <div className="hidden">
                                Some Information
                            </div>
                        </div>
                    </div>
                </div>
            :
            <div className="w-[100vw] h-[100vh] bg-red-500 flex items-center justify-center">
                <h1 className="text-gray-50 text-7xl text-center">There Was A Problem Loading, <br /> Please Sign In</h1>
            </div>
            }
        </React.Fragment>
        
    );    
};

Sorry, do you mean like a live demo? Also thank you for taking your time to consider answering my question. — , Jul 16 '22 at 20:24
https://stackoverflow.com/help/minimal-reproducible-example this is a good guide to create a MRE. It will mean you strip away anything that is unnecessary, while still making sure it is complete and the error occurs. it can be only code, but if you set up a code sandbox it makes it even easier. — Dean, Jul 16 '22 at 20:31
I would not include a video, especially if it has sensitive information. Can you add the console logs to the question if there are any which report an error or something similiar. — Dean, Jul 16 '22 at 20:35
I will remove the video, but, I also added the error in the question. — , Jul 16 '22 at 20:44
it seems your useRouter call does not return an instance of router. im not familiar with next js but are you sure that here, where you call this hook, your router is available? — Dean, Jul 16 '22 at 20:49
The problem still occurs after removing useRotuer, the error is gone, but the page still freezes, and it has something to do with setstate with react. — , Jul 16 '22 at 20:53
I reproduced the code without your auth logic and toasters etc. and it worked. I urge you to do the same. Start small, recreate it slowly and then see where the error is introduced. If you put it in a code sandbox then i can look at it more in depth. — Dean, Jul 16 '22 at 21:01

score 1 · Accepted Answer · answered Jul 16 '22 at 21:37

After ALOT of tinkering, I found the problem, firebase's auth.onAuthStateChanged was called every time the content on the screen was updated, so I wrapped the auth.onAuthStateChanged with useEffect

Here is the updated code:

useEffect(()=>{
        auth.onAuthStateChanged(function(user) {
            if (user) {
                setLoggedIn(true);
            }else{
                toast.error("Please Sign In, You Are Being Redirected");
                setTimeout(function(){
                    router.push("/");
                }, 5000);
            }
        });
    },[])

ReactJS/NextJS - useState crashes tab

1 Answers1