useMemo()を整理してみた

You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

react-typescript-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── ts.config.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.module.scss  
    ├── App.css
    ├── App.tsx
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js|

$npm install node-sass

import React, { useState } from "react";
import classes from "./App.module.scss";

function App() {
  const [countA, setCountA] = useState<number>(0);
  const [countB, setCountB] = useState<number>(0);

  const calculatedResult = heavyFunction(countA);

  return (
    <div className={classes.app}>
      <h2>useMemo</h2>
      <p>Aをクリックすると「+100」, Bをクリックすると「+1」される</p>
      <p>また、Aは+100されると同時にAの値が２倍された値が表示される</p>
      <div className={classes.itemsWrapper}>
        <div className={classes.items}>
          <p>Aの値：{countA}</p>
          <p>Aが2倍された値：{calculatedResult}</p>
          <button
            onClick={() => {
              setCountA(countA + 100);
            }}
          >
            A（重い処理）
          </button>
        </div>
        <div className={classes.items}>
          <p>Bの値：{countB}</p>
          <button
            onClick={() => {
              setCountB(countB + 1);
              console.log("Bをクリック");
            }}
          >
            B
          </button>
        </div>
      </div>
    </div>
  );
}

//useMemo（）を実装した場合としていない場合の違いを確かめるために、Aボタン押した時に重い処理を入れます。
function heavyFunction(count: number) {
  let i = 0;

  while (i < 1000000000) {
    i++;
  }
  console.log("重い処理を実行");
  return count * 2;
}

export default App;

.app {
  margin-top: 40px;
  text-align: center;
  .itemsWrapper {
    display: flex;
    justify-content: space-around;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    .items {
      button {
        color: white;
        font-weight: bold;
        cursor: pointer;
        text-align: center;
        width: 150px;
        padding: 15px;
        margin: 10px;
        border-radius: 180px;
        background: #668ad8; 
        box-shadow: 0px 10px gray;
        &:active {
          box-shadow: none;
          position: relative;
          top: 5px;
        }
      }
    }
  }
}

+ import React, { useMemo, useState } from "react";
- import React, { useState } from "react";

+ const calculatedResult = useMemo(() => {
+ return heavyFunction(countA);
+ }, [countA]);
- const calculatedResult = heavyFunction(countA);