【React.js】console.logが複数回重複して表示される件の解決策メモ

事象

コード

const Article = (props) => {
    console.log("Current title:", props.title)
    const {title, content} = props;
    return (
        <div>
            <h2>{title}</h2>
            <p>{content}</p>
        </div>
    );
}

export default Article;

ブラウザのコンソールログ

Current title: テストタイトル      Article.jsx:2
Current title: テストタイトル      Article.jsx:2

原因

Strict Modeの使用: 開発モードでReactのStrict Modeが有効になっている場合、コンポーネントは意図的に複数回レンダリングされることがあります。これは、副作用（例：状態の更新）の問題を発見するためのものです。本番ビルドでは、この動作は発生しません。

ChatGPT

解決策

ReactのStrict Modeによってコンポーネントが複数回レンダリングされる現象は、Strict Modeが意図的に行うもので、開発プロセス中に副作用や他の問題を発見するためのものです。この動作は本番ビルドでは発生しませんが、もしStrict Modeによる複数回のレンダリングを避けたい場合、次のステップを試みることができます：

1. Strict Modeの無効化: index.js または App.js ファイル内で、<React.StrictMode> タグを削除またはコメントアウトすることで、Strict Modeを無効にできます。ただし、これによりStrict Modeの提供する他の利点も失われることに注意してください。
2. コードの最適化: Strict Modeが複数回のレンダリングを引き起こす主な理由は、副作用や状態の不適切な管理にあります。コンポーネントのライフサイクルや状態管理の方法を見直し、不必要な副作用や更新がないか確認します。
3. 開発プロセスの理解: Strict Modeが複数回レンダリングを行うのは、問題を検出するためです。これはコードの質を向上させるためのものなので、Strict Modeが指摘する問題を解決することが重要です。Strict Modeを無効にする代わりに、それが検出する問題に注目し、それらを解決することが望ましいです。

最終的に、Strict Modeは開発プロセスを改善するためのツールであり、通常はそれを無効にすることは推奨されません。代わりに、コードの品質を向上させ、Strict Modeが検出する問題を解決することがより良いアプローチです。

ChatGPT

以下コメントアウトすれば解決はするが、非推奨なのでやめておいた。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
//  <React.StrictMode>
    <App />
//  </React.StrictMode>
);