こんにちは！Takuya.B（@TB_IQ）です。

私はこれまでずっとPHPを触ってきており、なぜか世間で流行しているJavaScriptに対して苦手意識がありました。

ですが、個人開発を進めるにあたってReactを使う必要がでてきたので、今少しずつ学び始めています。

記事を書いている今となってはショウモナイことですが、今日はHello, worldの動作確認するためにログを出力したら2回出力されて少し焦った話をします。

StrictModeとは

React公式サイトでは以下のように紹介されていました。

<StrictMode> は、開発環境においてコンポーネントの一般的なバグを早期に見つけるのに役立ちます。

つまり2回レンダリングしてバグを見つけるためのReactの機能とのこと。だから、ログが2回出力されていたということなんですね。スッキリ。

StrictModeを無効化する方法

原因が分かったらログが2回出力されていても問題は無いように感じますが、毎度2回出力されるのは鬱陶しいという方は以下のコードを参考にStrictModeの箇所を削除するかコメントアウトすると無効化できます。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { App } from './App.tsx'

const container = document.getElementById('root');
const root = createRoot(container!);

root.render(
  <StrictMode>　// ←削除orコメントアウト
    <App />
  </StrictMode> // ←削除orコメントアウト
);

ただ、Reactの思想的にStrictModeは無効化しないほうが良さそう

ただ、Reactではコンポーネントを純粋に保つことを推奨しており、使用している関数が純関数かどうかチェックするためのStrictModeであるわけですから、これを無効化するのはよくありません。

学習の段階ではStrictModeを無効化しても問題なさそうですが、実際の開発の際にはStrictModeを有効化にして、Reactの思想に沿って開発を進めて行くのが無難ですね。

あとがき

今日はReactの学習を始めた私がStrictModeが原因でログが2回出力されて焦ったという話をしました。

最初は無効化することしか考えていませんでしたが、調べていくとReactの思想や純関数についての理解が深まったので良かったです。

というわけで、次回もよしなに！