■

useMemo

• 不要な再計算をスキップする
• useEffectは非同期に向いてる。
• 基本的にuseMemoの方が良い

useMemoの使用

1. useMemoをimport
2. useMemo()で囲う
3. 第2引数にuseMemoを使わない（再計算するStateを入れる）

• useMemoをimport
  • import{useMemo} from 'react';
• useMemoで囲う
  • const isOdduse=Memo(処理return(),[第2引数]);
• useMemoを使うと必要となる結果は変数となる

propsの書き方

• メイン関数の引数にpropsとかく
• メイン関数の引数に{}で囲って継承したい属性を列記する

React.memo()

• useCallbackと組み合わせて使う。不要なレンダリングを防ぐ
• ただし関数のレンダリングは防げない

React.memo()の使い方

• コンポーネントのexport場所をReact.memo()で囲う
  • export default React.memo(CountDisplay)

useCallback

• 不要なレンダリングを防ぐ
• React.memoと組み合わせて使う
• 関数の不要なレンダリングを防ぐ

useCallbackの使い方

1. useCallbackをimportする
2. useCallBackで関数を囲う
3. 第2引数を（空）にすると初回のみレンダリングをする

• useCallbackをimportする
  • import {useCallback} from 'react'
• useCallbackで関数を囲う
  • const AddCount1=useCallback(()=>{

    setCount1(prevCount1=>prevCount1+1);

    },);
• 第2引数を[]（空）にすると初回のみレンダリングをする
  • useStateの変数を入れるとその変数が変更された時だけレンダリングをする