CODEWITHSUNDEEP
reactjsnext.js
Kal
Kal

Reputation: 1774

React component keeps rendering indefinitely

I am getting some values from db using getserverSideProps. A console.log in the UserHomePage component keeps showing up every 2 seconds or so indefinitely.

Using react 17 and nextjs 10.0.8

I tried using useEffect with props as trigger for if (!loadUserEditForm) check below but same result.

Is this rerendering normal in React?

export default function Home(props) {
  const [user] = useCurrentUser();
  const [loadUserEditForm, setLoadUserEditForm] = useState(false);
  const DynamicMatchMaker = dynamic(() => import('../components/ui/MatchMaker'), {
    suspense: true,
  })  

    if (!loadUserEditForm) {
      if (!user?.profileCompletion) {
        setLoadUserEditForm(true)
      }
    } 


  return (
    <div>
      }
      {!user || process.env.MAINTENANCE? (<Landing />):
      loadUserEditForm?
      (<UserHomePage props={props}/>):
      (<>
      <Suspense fallback={`Loading...`}>
        <DynamicMatchMaker props={props}/>
      </Suspense>
      </>)   
      }
    </div>
  )
}

export async function getServerSideProps(context) {
 
  await middleware.run(context.req, context.res);
  const data = await getData(context.req,context.req);

  if (!data) context.res.statusCode = 404;
  return {
    props: {
      data,
    }, // will be passed to the page component as props
  };
}

Upvotes: 0

Views: 304

Answers (1)

rickvian
rickvian

Reputation: 145

you have weird closing bracket after your div opening,

return ( }

this can leads to syntax error,

other than that, you have to wrap this block in use Effect

   if (!loadUserEditForm) {
      if (!user?.profileCompletion) {
        setLoadUserEditForm(true)
      }
    }

if not, this will be run every re-render and set the state, state change will trigger re render and run that block again and loop infinitely,

try to do this:

useEffect(()=>{
 if (!loadUserEditForm) {
      if (!user?.profileCompletion) {
        setLoadUserEditForm(true)
      }
    } 
, []})

but i think your render can be reworked to be cleaner and additional state is not necessary

you can remove that if block, and loadUserEditForm state entirely and use this:

export default function Home(props) {
  const [user] = useCurrentUser()
  // const [loadUserEditForm, setLoadUserEditForm] = useState(false)
  const DynamicMatchMaker = dynamic(
    () => import('../components/ui/MatchMaker'),
    {
      suspense: true,
    }
  )

  // if (!loadUserEditForm) {
  //   if (!user?.profileCompletion) {
  //     setLoadUserEditForm(true)
  //   }
  // }

  return (
    <div>
      {!user || process.env.MAINTENANCE ? (
        <Landing />
      ) : !user?.profileCompletion ? (
        <UserHomePage props={props} />
      ) : (
        <>
          <Suspense fallback={`Loading...`}>
            <DynamicMatchMaker props={props} />
          </Suspense>
        </>
      )}
    </div>
  )
}

export async function getServerSideProps(context) {
  await middleware.run(context.req, context.res)
  const data = await getData(context.req, context.req)

  if (!data) context.res.statusCode = 404
  return {
    props: {
      data,
    }, // will be passed to the page component as props
  }
}

Upvotes: 1

Related Questions