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

user_17923592 0
Viewed 1288

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);
     }
 }
next.js reactjs javascript
2 Answers

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.

user_70329670

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])
user_121834910
Related