みなさんこんにちは！
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公式アカウントはこちらから。
NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。
平日10:00〜19:00
© NEXTGATE LiSMOtech All rights reserved
