useMemoについて

Question

import React, { useMemo, useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [count, setCount] = useState(1);
  const handleClick = (count :number) => {
    const new_count = count + 1;
    setCount(new_count);
  }
  const Cal = useMemo(() => {
    console.log("useMemo");
    return count * 2;
  }, [count]);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <p>
          Supernova {count}<br />
          Supernova {Cal}
        </p>
        <button onClick={() => handleClick(count)}>
          button
        </button>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

上記のコードを実行するとなぜがコンソールに

useMemo
useMemo

と二回でます。なぜ二回出るのでしょうか？

Answer 1

なぜ二回出るのでしょうか？

何回出ようが気にしないでください。

useMemoは「同じなら必ずキャッシュされる」ことを保証するものではありません。

useMemo はパフォーマンス最適化のために使うものであり、意味上の保証があるものだと考えないでください。将来的に React は、例えば画面外のコンポーネント用のメモリを解放するため、などの理由で、メモ化された値を「忘れる」ようにする可能性があります。（React公式より、強調も原文ママ）

Answer 2

React.StrictModeを外したら解決した