Console.log('Dynamic page') logging twice in NextJs

Question

I added Console.log('Dynamic page') in a dynamic page in NextJs, but I realise it logs twice instead of once. I moved the log function into useEffect with an empty array dependency but it still logged twice. What could be the issue here? Thank you

The code /topics/[articleId].js:

import { useRouter } from 'next/router'
import { useEffect } from "react"
import Image from "next/image"
import Link from "next/link"
import ExcitedSVG from '../../../components/reaction-icons/excited'
import HappySVG from '../../../components/reaction-icons/happy'
import InLoveSVG from '../../../components/reaction-icons/in-love'
import NotSureSVG from '../../../components/reaction-icons/not-sure'
import SillySVG from '../../../components/reaction-icons/silly'
import ArticleStyles from "../../../components/styles/article.module.css"

export default function Article(){

    useEffect(()=>{
        console.log('Log once'); <--- //It logs twice instead
    },[])

    return (
        <div className={`${ArticleStyles.articlePg} pt-5`}>
            Component content            
        </div>
    )
}

If you have something that triggers a re-render like another hook, a state updating, updating props from a parent components, etc then yeah it will re-render and logout twice. Without the code its unclear exactly why. — Lith, Apr 17 '22 at 21:29
@IbrahimAzharArmar Post updated to include code. I am currently working in localhost — Kofi Talent, Apr 18 '22 at 02:57
@Lith Post updated to include code. I am currently working in localhost — Kofi Talent, Apr 18 '22 at 02:57
Needs more detail. How is `Article` being mounted? Is there only 1 `Article` on the page? If so, are you sure the parent component isn't being re-rendered? — cSharp, Apr 18 '22 at 03:01
@cSharp Yes there is only one Article on the page (single article details page), which shows up when a user clicks on an article with the url that follows the following dynamic route: /topics/[articleId].js — Kofi Talent, Apr 18 '22 at 03:22

score 9 · Accepted Answer · answered Apr 18 '22 at 03:25

9

I think the main reason for double rendering is because of StrictMode in React (only in development mode). You can remove it in next.config.js

module.exports = {
  //reactStrictMode: true,
}

answered Apr 18 '22 at 03:25

Nick Vu

14,512
4
21
31

1

tnx but why is this happening? – Mohmmad Ebrahimi Aval Dec 20 '22 at 15:42
2

I have the answer for it [here](https://stackoverflow.com/questions/72047304/useeffect-function-fetch-multiple-data/72047454#72047454), you can check it out, @MohmmadEbrahimiAval – Nick Vu Dec 20 '22 at 17:45

Console.log('Dynamic page') logging twice in NextJs

1 Answers1

Linked