■目次

＊ v17とv18の挙動を一言でまとめると・・・

• v17までは、自動で2回レンダリングされなかった

• v18では、全てのコンポーネントが自動で2回レンダリングされる（開発時のみ）

  ↑「なんで1箇所にしか書いていないconsole.logが2回表示されるんだ？1回しかレンダリングされていないはずなのに・・・」となったこと、何度もあるよね？あれよ、あれ！

  index.tsの<StrictMode></StrictMode>を<></>にすれば重複されないよ！って書いてたよね、それがこれのことだったんだよ！

• 2回レンダリングされても挙動がおかしくならないように開発することがポイント！

＊ 挙動をもう少し詳しく説明すると・・・

• Reactの裏側で、一度レンダリングされたものを瞬時に破棄して、再度レンダリングしていた（アンマウント・再マウント）

＊ なぜ、こういう仕様になったのか

• 今後のReactの機能追加を想定しての動き

  → Reactがstateを保ったままでUIの一部分を追加・削除できるような機能（オフスクリーン機能）

  例）ユーザーがタブを切り替えて画面を離れてから戻ってきた場合に、Reactが以前の画面をすぐに表示できるようにする

• 今後オフスクリーンが実装されても良いように、そういった挙動に耐えうる設計に今のうちからしておいて、ということで、strictモードに開発時専用のチェック機能（全てのコンポーネントで2回レンダリング＆2回目のレンダリングで以前のstateを復元）が導入された

  • 2回レンダリングされることによって、表示や動きがおかしくなるコンポーネントがあれば、事前に修正をすることができる！

    → 今のうちに修正できれば、今後のアップデート対応もスムーズに行えるね！Meta側の優しさや・・・

○ 具体例

• useEffectで、初回レンダリング後のみ処理を走らせる（ useEffect(() => {}, []) ）ことがあると思うが、オフスクリーン実装後は、オフスクリーンで切り替える度に実行される可能性がある

  現に、StrictModeをつけたままuseEffectを記述すると、初回レンダリングのみに設定していても2回レンダリングされる

  → それで挙動がおかしくならなければOK！もしレンダリングされまくる！とか2重に表示されてしまう！とかあれば、修正が必要かな・・・

  ▼v18のindex.ts　この書き方で次のようにuseEffectを記述すると・・・

  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') as HTMLElement
  );
  root.render(
    <React.StrictMode>**
      <App />
    **</React.StrictMode>
  );**
  
  // If you want to start measuring performance in your app, pass a function
  // to log results (for example: reportWebVitals(console.log))
  // or send to an analytics endpoint. Learn more: <https://bit.ly/CRA-vitals>
  reportWebVitals();
  

  ▼useEffect

  import React, { useEffect } from "react";
  import logo from "./logo.svg";
  import "./App.css";
  
  function App() {
    **useEffect(() => {
      console.log("useEffect！！");
    }, []);**
  
    return (
      <div className="App">
  		〜〜〜
  

  ▼2回レンダリングされている