[React]useMemo


useMemo

  • は、関数型素子内部の演算
  • を最適化することができる.
  • のレンダリングでは、いくつかの値が変更された場合にのみ演算が実行され、変更がない場合は、前の結果
  • が繰り返される.
    import React, { useState } from "react";
    
    const getAverage = (num) => {
      if (num.length === 0) return 0;
      const sum = num.reduce((a, b) => a + b);
      return sum / num.length;
    };
    
    export const Average = () => {
      const [list, setList] = useState([]);
      const [number, setNumber] = useState("");
    
      const onChange = (e) => {
        setNumber(e.target.value);
      };
      const onInsert = (e) => {
        const nextList = list.concat(parseInt(number));
        setList(nextList);
        setNumber("");
      };
    
      return (
        <div>
          <input value={number} onChange={onChange} />
          <button onClick={onInsert}>등록</button>
          {list.map((value, index) => (
            <p key={index}>{value}</p>
          ))}
          <div>평균:{getAverage(list)}</div>
        </div>
      );
    };
    
    この場合、getaverage関数は、登録数にかかわらず、入力値の変更(再レンダリング)にかかわらず無駄になります.
    import React, { useMemo, useState } from "react";
    
    const getAverage = (num) => {
      console.log("average 실행중");
      if (num.length === 0) return 0;
      const sum = num.reduce((a, b) => a + b);
      return sum / num.length;
    };
    
    export const Average = () => {
      const [list, setList] = useState([]);
      const [number, setNumber] = useState("");
    
      const onChange = (e) => {
        setNumber(e.target.value);
      };
      const onInsert = (e) => {
        const nextList = list.concat(parseInt(number));
        setList(nextList);
        setNumber("");
      };
    
      const avg = useMemo(() => getAverage(list), [list]);
    
      return (
        <div>
          <input value={number} onChange={onChange} />
          <button onClick={onInsert}>등록</button>
          {list.map((value, index) => (
            <p key={index}>{value}</p>
          ))}
          <div>평균:{avg}</div>
        </div>
      );
    };
    
  • 最初のパラメータ:定義された関数を計算する
  • 第2パラメータ:depsアレイ
    deps配列の値が変更された場合、登録した関数を呼び出して値を計算します(値が変更されていない場合は、古い値を再使用します).