[React] | useMemo()
また登場するメモリーゲーム…😅
userMemo hookは、userStateやuserEffectと比較して実際のプロジェクトではあまり使われないhookです.
useMemo()もuseCallback()と同様に、注釈再構築によって姓を最適化するために使用されます.関数の繰り返し操作を阻止することで、パフォーマンスを向上させることができます.
import React, {useMemo} from 'react'
const memoizedValue = useMemo(() => {
return (실행함수 (주로 시간이 오래 걸리는 비동기 작업));
}, [의존 값]);
📌 例
function takesLongTime(num) {
console.log("엄청나게 느린 작업...");
for (let i = 0; i <= 1000000000; i++) {}
return num * 2;
}
function LetMeTryUseMemo() {
const [number, setNumber] = useState(0);
const [red, setRed] = useState(false);
const doubleNumber = useMemo(() => {
return LetMeTryUseMemo(number);
}, [number]);
const themeStyles = useMemo(() => {
return {
backgroundColor: red ? "black" : "white",
color: red ? "white" : "black",
};
}, [red]);
useEffect(() => {
console.log("theme changed");
}, [themeStyles]);
return (
<div className="App">
<p>hello, useMemo</p>
<div>
<input
type="number"
value={number}
onChange={(e) => setNumber(parseInt(e.target.value))}
></input>
<button onClick={() => setRed((prevRed) => !prevRed)}>
색 변경!!
</button>
<div style={() => themeStyles}>{doubleNumber}</div>
</div>
</div>
);
}
😭 上記の例で作成したコードは、本当に効率の悪いターミネータです.「色の変更」というボタンがあり、onClickイベントが発生すると、ステータス管理の色が赤または白に変更されます.
クリックイベントが発生し、ステータス値が変更された場合、reactは当然、構成部品を再ロードします.反応器を開発している場合は,このように動的変化を管理する.
では、上記のサンプルコードには何か問題がありますか?
この関数は、入力値が変化したときにイベントハンドラによって呼び出されて実行される関数です.ただし、userMemoを適用しないとthemeStyles()によって背景色が変更され、構成部品が再ロードされると常に新しい関数が呼び出されます.
背景画面を変えたいだけですが、不要な関数(しかも時間がかかります...)関数は毎回一緒に実行されます.
Reference
この問題について([React] | useMemo()), 我々は、より多くの情報をここで見つけました https://velog.io/@heesungj7/redux-vs.-contextテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol