React コンポーネントが二回読み込まれている？実行される。

Question

いつもお世話になっております。
現在、reactjsとMaterialUIを習得中で、試しにポートフォリオ的なものを作ろうとしているところです。

困りごとがあり、その原因を探っていたところ、
<Contents />コンポーネントを二回呼び出しているのか、<Contents/>コンポーネントの中のコンソールログが2度表示される事が発覚しました。

こちらがコードです。
https://codesandbox.io/s/beautiful-moore-3l8v9?file=/src/App.js

<Contents/>の中身をほぼからにして、コンソールログと、return <duv>test</div>だけにするとその症状は無くなります。

そもそもは、<Card />で再現されている一覧のどれかをクリックした時に、そのimgパスを<Modal>に渡して、モーダルで表示したかったのですが、親方向に子コンポーネントから値を渡すのに苦戦していました。
そんなこんなしているうちに、<Contents/>が2度読み込まれていることに気づき、わけもわからず3時間費やしたところです...

また、長い期間勉強をしながら作っていたので、クラスコンポーネントを使ったり、フックを使ったりと、一貫性のない作りになっていて、もしかするとそれが原因なのかもしれません。
見辛くてごめんなさい。そういった部分も含めまして、、
ご助言いただけますと大変幸いです。
何卒よろしくお願いいたします。

Answer 1

<Contents/>コンポーネントの中のコンソールログが2度表示される事が発覚しました。

そういうものです。関数コンポーネントの関数は、何度実行されるかわかりません。

確実に特定のタイミング・回数で実行したいものは、useEffrectの中に書くなどして制御してください。

Comments

[maisumakun]

関数コンポーネントの直下に、「2回呼ばれて困る」ようなコードを書いてはいけません。

[maisumakun]

逆に、「あえて2回呼び出させることで、将来的に問題となる部分をあぶり出す」ようなことも可能です。

https://ja.reactjs.org/docs/strict-mode.html

[Yusuke_m25]

なるほど。今回の場合で言うとなぜ<Contents />コンポーネントだけ2度実行されたのかわかりますか？
それとも、”なぜ”は気にしないでいいのでしょうか？
<Contents/>コンポーネントが決まって2回実行されていたので何かしらの原因があると思ったのですが...

なんにせよ、元々困っていた子コンポーネントから親のステートを変えるって言うのもいつの間にかできていたのでベストアンサーにさせて頂きます。もしお時間ございましたら上記の疑問にもお答えいただけますと幸いです！

[maisumakun]

> それとも、”なぜ”は気にしないでいいのでしょうか？

はい、逆に原因がわかったからといって、（Reactを使う立場では）特にすることもありませんし。

[Yusuke_m25]

ご回答ありがとうございます！！！
承知しました！