componentが勝手に二重renderされちゃう

始めに

最初にReactを勉強していた時に、ログを確認したら絶対１回しか出力されないうはずのログが
２回出力されていることがわかりました。特に問題とかにはならなかったため、無視してきたが、
ソースが長くなることにより、ログを見るのがむずくて探してみた。

renderが二重されちゃう

import React from 'react'
export default function List() {
    const todos= [
        {id: 1, text: 'Drink Water'},
        {id: 2, text: 'Wash Car'}
    ]
    
    const Item = (props) => {
        console.log(props);
        return <li>{props.id}{props.text}</li>
    }

    const todoList = todos.map((todo) => 
        <Item key={todo.id} id={todo.id} text={todo.text}/>
    )  

    return (
        <>
            {todoList}
        </>
    )
}

普通だと上記を実行させたらtodosのobjectが２回出力すると予想されますが、

console画面を見るとなぜか２回出力され、２回renderされてしまうことがわかります。
一体なぜでしょか？
それはReact.StrictModeです。

React.StrictMode

StrictModeとは、Applicationの潜在的な問題を発覚するためのツールです。
これは、開発モードでは活性化して、productionモードでは影響を受けないそうです。 render段階のライフサイクルメソッド(constructor、render、setStateupdate function...)は何度も呼び出されることがあるため、副作用を含まないことが重要です。 そうでなければメモリ漏れなど多様な問題を起こしかねない！
しかし、このような問題は予測通りに動作しないため、発見するのが難しいです。 それで、StrictModeが問題を見つけることはできないですが、いくつかの機能を意図的に二重呼び出しして発見できるようにしてくれます。

その機能に該当するのは以下！

・Class component constructor, render, and shouldComponentUpdate methods
・Class component static getDerivedStateFromProps method
・Function component bodies
・State updater functions (the first argument to setState)
・Functions passed to useState, useMemo, or useReducer

React.StrictModeを解除するにはindex.jsのStrictModeを無効にしておけば二重呼び出されません。

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // StrictModeに囲まれているコンポーネントが対象！  
  <React.StrictMode> 
    <App />
  </React.StrictMode>
);

参考したサイト

https://mariosfakiolas.com/blog/my-react-components-render-twice-and-drive-me-crazy/