Why is useEffect called twice?

Question

import { useContext, useEffect, useState } from 'react';

const Log = () => {
    useEffect(() => {
        console.log('Running ...')
    },[])

    return(<p>here</p>)

}

export default Log;

Whenever this code runs, I receive the Running... message twice in the browser console.

I think it should only run once because I have an empty second parameter in useEffect.

Can anyone explain why it runs twice?

Answer 1

This is due to <StrictMode> possibly being in your root tree.

What is strict mode?

How does it cause useEffect() to run twice?

Note: Strict mode checks only run in development mode; they do not affect production builds.