為什麼useEffect會被呼叫兩次？

Question

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

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

    return(<p>here</p>)

}

export default Log;

每當這段程式碼運行時，我在瀏覽器控制台中會收到Running...訊息兩次。

我認為它應該只運行一次，因為我在useEffect中有一個空的第二個參數。

有人能解釋為什麼它會跑兩次嗎？

Answer 1

這是由於<StrictMode> 可能在您的根樹中。

什麼是嚴格模式？

它是如何導致 useEffect() 運行兩次的？

注意： 嚴格模式的檢查僅在開發模式下運作；它們不會影響生產建置。