CODEWITHSUNDEEP
javascriptreactjsnext.js
Doma
Doma

Reputation: 47

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

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);
     }
 }

Upvotes: 3

Views: 6063

Answers (2)

Ranu Vijay
Ranu Vijay

Reputation: 1249

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.

Upvotes: 5

Abdul Kabeer
Abdul Kabeer

Reputation: 287

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

Upvotes: 0

Related Questions