ReactのuseEffectの挙動について
解決したいこと
開発作業時のuseEffect内処理の実行回数とバンドルした場合のuseEffect内処理の実行回数が違う問題を解決したい。
準備
プロジェクトは以下のコマンドで開始しました。
% npx create-react-app testapp
発生している問題
Reactを使いコンポーネントに以下のようなテストコードを記述しました。
import { useEffect } from 'react';
const Test = ({ flag }) => {
useEffect(() => {
console.log( '1' );
}, []);
return <div />;
};
export default Test;
npm run startを実行してウェブブラウザのコンソールを確認するとuseEffectの第2引数に空配列を指定しているにも関わらず「1」が2回出力されてしまいます（ウェブブラウザのリロードで確認）。しかし一旦npm run buildしてその結果をウェブブラウザで確認すると「1」の出力は1回です。
知りたいこと
npm run startして開発しているときも、npm run buildの結果と同じように実行する方法はありますか。
地図ライブラリのleafletを使用したいのですが、react-leafletでは標準でleafletに実装されている機能を使う場合は問題なさそうですが、独自の拡張を施したレイヤーを使用する場合に専用のコンポーネントを作る必要があるようで、その手間をかけるならleafletに関する記述は従来どおりの記述にしたいと考えました。useEffectが便利に使えると考えたのですが、開発時とバンドル時の挙動が違うため開発に手間がかかり、Reactの使用を諦めるか悩んでいます（地図以外の部分はReactを使いたいのですが）。
npm run buildなんてバンドルするときしか使わないのでnpm run startで確認していたのですが、どうしても2回実行されてしまうのでもしやと思いnpm run buildの結果を確認したら期待通りの結果だったので困惑しています。
どうぞお知恵をお貸しください。よろしくお願いします。
0
