[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は当然、構成部品を再ロードします.反応器を開発している場合は,このように動的変化を管理する.

では、上記のサンプルコードには何か問題がありますか?

の二重番号関数を見てみましょう.例として記述されていますが、この関数が返す値は、入力値に2を乗じた値です.ただし,非同期要求などの時間のかかるタスクを表すためにfor文で関数の実行時間を10000000に設定する.

この関数は、入力値が変化したときにイベントハンドラによって呼び出されて実行される関数です.ただし、userMemoを適用しないとthemeStyles()によって背景色が変更され、構成部品が再ロードされると常に新しい関数が呼び出されます.

背景画面を変えたいだけですが、不要な関数(しかも時間がかかります...)関数は毎回一緒に実行されます.

この場合、numberステータス値を依存値として使用して数値を変更した場合にのみ、userMemoを使用してslowFunction()を呼び出すことができます.