[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>
);
};
deps配列の値が変更された場合、登録した関数を呼び出して値を計算します(値が変更されていない場合は、古い値を再使用します).
Reference
この問題について([React]useMemo), 我々は、より多くの情報をここで見つけました https://velog.io/@jjaa9292/ReactuseMemoテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol