Why components in NextJS render twice after refreshing?

Question

I have a project NextJS. I tried log a text at the component and relize that there are always 2 lines of my log. I am wondering that my component is render 2 times, it maybe affect the performance.

My component here:

const PostForm = () => {
    console.log("my log");

    return (<div>abc</div>);
}
export default PostForm;

Logs in my browser:

score 4 · Accepted Answer · answered Jun 22 '22 at 07:55

4

That's behaviour included in React in development mode. It re-renders everything twice to check for unhandled side effects and warn you about them.

Read more about it here

answered Jun 22 '22 at 07:55

Eldar B.

1,097
9
22

score -1 · Answer 2 · answered Jun 22 '22 at 16:03

-1

If you need to have full control about side-effects you should read about the useEffect() hook. Here is a really good explanation: https://dmitripavlutin.com/react-useeffect-explanation/

answered Jun 22 '22 at 16:03

Tobias Sporer

129
4

Why components in NextJS render twice after refreshing?

2 Answers2