2023/07/28の勉強会で発表されたものです。

1. ReactでuseEffect()
を減らしたい話
執筆者：トビウオ

2. 2回呼ばれるuseEffect()
今回操作するデータ型の定義
データ型を保持するstate
読み込んだデータをセットする

3. 2回呼ばれるuseEffect()
• 左のようなコードは
よく書かれがち
• 何が問題なのか？

4. 2回呼ばれるuseEffect()
• 左のようなコードは
よく書かれがち
• 何が問題なのか？
⇒useEffectが2回実
行されてしまう

5. 2回呼び出す理由は？
https://react.dev/reference/react/useEffect#my-effect-runs-twice-when-the-component-mounts

6. 2回呼び出す理由は？
https://react.dev/reference/react/useEffect#my-effect-runs-twice-when-the-component-mounts
「Strictモードが有効だと2回実行されるよ (要約)」

7. 2回呼び出す理由は？
• useEffectは「べき等」でなければならない
• ＝複数回実行しても表示が壊れない
• StrictModeは開発用の動作モードなので、意図的
に2度実行することで、ミスがないかを開発者に
確認させている

8. 2回呼び出さないようにするには？
• StrictModeをやめる
• ソースコードを工夫する
• useEffectを使わない

9. 「ソースコードを工夫する」
「1度読み込みしたか」を
loaded変数に記憶しておき、
2回目は実行させないように
する

10. 「useEffectを使わない」
loaded変数もuseStateで管理
し、2度目の読み込みを防止
する

11. ちなみに
• 先ほどのような「
useEffectを乱用しな
い」コツについて、
公式サイトの記事と
してまとまっている
。
https://react.dev/learn/you-might-not-need-an-effect