Why Next.js code lifecycle executes several times?

Question

I've recently started learning Next.js and I've been faced with something strange. I have this simple code:

import {useRouter} from 'next/Router';
import {Profile} from '../../components/Profile';

const JobsListingPage = () => {
    const Router = useRouter();
    console.log(Router.query);

    return (
        <div>
            <h1>Job Listing Dynamic Page</h1>
            <Profile />
        </div>
    );
}

export default JobsListingPage;

It works well and I get the result in the console. The strange part is, this code gets executed 4 times on the client side. Why really? Two first time it's empty and two last times it contains the data. Is that normal or I'm doing something wrong?

Doesn't look like a normal lifecycle.

the first {} is for the initial rendering for hydrating React on the client-side. {slug} logs and onwards are populating states for re-renderings. If you want to disable double invoking (causing 2 similar logs), you should check StrictMode in this document. If you find how to turn StrictMode off in Next.js, I have a similar answer here. — Nick Vu
– Nick Vu, Commented Oct 27, 2022 at 15:17

Sachila Ranawaka · Accepted Answer · 2022-10-27 15:11:27Z

1

Adding a console in root level is not a good way to measure the component rendering cycles.

wrap this inside a useEffect and check whether it's still duplicating.

 const {query} = useRouter();  

 useEffect(() => {console.log(query)}, [query])

if this is only printing 2 consoles (first one empty) then component rendering fine

edited Oct 27, 2022 at 15:11

answered Oct 27, 2022 at 14:59

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Martin AJ Over a year ago

Uncaught ReferenceError: Router is not defined

Sachila Ranawaka Over a year ago

update console log console.log(query) @MartinAJ

Martin AJ Over a year ago

Yeah, better i.sstatic.net/Px4Y9.png, thanks, upvoted

Sachila Ranawaka Over a year ago

try using react.memo reactjs.org/docs/react-api.html#reactmemo

Martin AJ Over a year ago

I did it like this export default React.memo(JobsListingPage);. Still 3 times.

Collectives™ on Stack Overflow

Why Next.js code lifecycle executes several times?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related