useMemoReactフックの使用方法

useMemo Reactフックが何に役立つのか、そしてそれをどのように扱うのかを調べてください!

私をチェックしてくださいReactフックの紹介まず、あなたが彼らに不慣れであるならば。

私が時々使うReactフックの1つはuseMemo

import React, { useMemo } from 'react'

このフックは、メモ化された値を作成するために使用されます。

このフックは非常に似ていますuseCallback、違いはuseCallbackメモ化されたコールバックを返し、useMemoその関数呼び出しの結果であるメモ化された値を返します。ユースケースも異なります。useCallback子コンポーネントに渡されるコールバックに使用されます。

複雑な計算を行うか、データベースにアクセスしてコストのかかるクエリを実行するか、ネットワークにアクセスして、値を計算する必要がある場合があります。

このフックを使用すると、この操作は1回だけ実行され、値はメモ化された値に格納され、次にそれを参照するときに、はるかに高速に取得できます。

使用方法は次のとおりです。

const memoizedValue = useMemo(() => expensiveOperation())

その空の配列を2番目のパラメータとしてに追加してくださいuseMemo()、それ以外の場合、メモ化はまったく行われません。

引数を渡す必要がある場合は、配列で渡す必要もあります。

const memoizedValue = useMemo(() => expensiveOperation(param1, param2), [param1, param2])

値にアクセスしようとしたときにパラメータの1つが変更された場合、もちろん値はメモ化せずに計算されます。

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: