Fixing a "call stack full" error in nextjs

Question

I'm trying to write code in nextjs to make my billboard scroll continuously to display some information. Nextjs debugger is showing me an error saying 'call stack full'. How can I fix this?

    const billboardContainer = useRef();

    useEffect(()=>{

        function billboardContainerScroll(n=0){
            billboardContainer.current.scrollTo({top:0,left:(n*window.innerWidth),behaviour:'smooth'});
            n++;
            if(n<7 & n>=0) {
                setTimeout(billboardContainerScroll(n), 2000);
            } else {
                n=0;
                setTimeout(billboardContainerScroll(n), 2000);
            }
        }

        billboardContainerScroll();
    });

Answer 1

The problem is that you call your function recursively without an exit condition, which in theory leads to infinite calls. But you can only have so many functions on the call stack.

Also btw you have a syntax error in your if statement. You're lacking a & in the AND operator.