React useMemoを使用してパフォーマンスを向上しよう!

FRONT END

みなさんこんにちは!
lismotechの大石です。
今回のブログでは、useMemoを使用してメモ化の実装を行っていきます。

メモ化とは何か?

メモ化することで計算結果を記憶しておき、同じ計算を繰り返さないようにすることができます。
メモ化することによって不要な再レンダリング避け、重い計算を何度も行わないように出来ます。
こうする事でパフォーマンスの向上に繋がります。

メモ化の種類

・React.memo
 Propsが変更されない限りコンポーネントの再レンダリングを防ぎます。
・useMemo
 計算量の多い関数の結果をメモ化します。
・useCallback
 関数をメモ化 関数の再生成を防ぎます。

実際に使用してみる。

stateの合計値を出力する関数で試して見ましょう。
ユーザーが変更を加えた時のみ再計算を行います。
まずはreactからuseMemoをimportし、stateを定義します。

import React, { useState, useMemo } from 'react';
const [numbers, setNumbers] = useState([1, 2, 3, 4, 5]); 
const [newNumber, setNewNumber] = useState('');

合計値の計算を行う関数

ここでuseMemoを使用します。
依存配列 [ ] の中には依存する値値を入れます。(この値が変更されたら再計算を行う)

const sum = useMemo(() => { 
 return numbers.reduce((acc, curr) => acc + curr, 0); 
}, [numbers]);

新しい数値を追加する関数

numbersに値を追加する関数を作成します。
newNumberが数値かつ空文字列ではないことを確認し、setNumbersで配列の状態を更新します。

const addNumber = () => { 
 if (!isNaN(newNumber) && newNumber !== '') { 
  setNumbers([...numbers, parseFloat(newNumber)]); 
  setNewNumber(''); 
 } 
};

完成コード

ユーザーが値を追加した時のみ合計値を再計算し、表示するロジックです。
値が計算されない場合は再計算を行わず、保存された値を表示できます。

import React, { useState, useMemo } from 'react';

const SumComponent = () => { 
 const [numbers, setNumbers] = useState([1, 2, 3, 4, 5]); 
 const [newNumber, setNewNumber] = useState(''); 
 
 const sum = useMemo(() => {
  return numbers.reduce((acc, curr) => acc + curr, 0); 
 }, [numbers]); // 依存配列にnumbersを指定 // 

 const addNumber = () => { 
  if (!isNaN(newNumber) && newNumber !== '') { 
   setNumbers([...numbers, parseFloat(newNumber)]); 
   setNewNumber(''); 
  } 
 }; 

 return ( 
  <div> 
   <input 
    type="text" 
    value={newNumber} 
    onChange={(e) => setNewNumber(e.target.value)} 
   /> 
   <button onClick={addNumber}>Add Number</button> 
   <div>合計値: {sum}</div> 
  <ul> 
   {numbers.map((number, index) => ( 
    <li key={index}>{number}</li>
    ))} 
  </ul> 
 </div> 
 ); 
} 

export default SumComponent;

今回の内容ではuseMemoを使用した計算のメモ化を行いました。
関数のメモ化やコンポーネントのメモ化など他にも種類があるのでぜひ試して見てください。
メモ化を適切に使用することでパフォーマンスの向上につながります。
また次回もお楽しみに!


NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。

企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

お得な情報がLINEに届く!!

LINE公式アカウントはこちらから。

友だち追加

最新記事

CONTACT

NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

平日10:00〜19:00

お電話の場合こちらから

043-305-4162

平日10:00〜19:00