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

Can someone please solve this? If i remove the "/" before about and id, it throws no errors smh.

import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import { useState } from "react";

function MyApp({ Component, pageProps }) {
  const [navbar, Setnavbar] = useState(0);
  if (process.browser) {
    let params = window.location.pathname;  
    console.log(params);
    if (params == "/about") {
      Setnavbar(0);
         }
    else if (params == `/id/portal`) {
      Setnavbar(1);
     }
 }

CodePudding user response：

You might want to put your code inside useEffect like so and use router instance from nextJS to get pathName.

    import Navbar from "../components/Navbar";
    import Footer from "../components/Footer";
    import { useState,useEffech } from "react";
    import { useRouter } from 'next/router';

    function MyApp({ Component, pageProps }) {
      const [navbar, Setnavbar] = useState(0);
        const router = useRouter()
       const params= router.pathname

      useEffect(()=>{
        if (process.browser) {
        if (params == "/about") {
          Setnavbar(0);
             }
        else if (params == `/id/portal`) {
          Setnavbar(1);
         }
     }
 },[params])

CodePudding user response：

This is react basic concept that everytime a state changes, the component re renders. And when component re renders, it again change state, and so this goes on and on till infinite. You will have to apply techniques to render only once based on params value. As other answers have mentioned.