useMemo と useCallback をいつ使用するか: React ファンのための簡単なガイド

あなたが React 開発者であれば、オンラインで React の useMemo と useCallback の議論に出くわし、これまで以上に混乱してしまったかもしれません。 useMemo と useCallback の違いを理解するのは非常に難しい場合があります。 それで大丈夫です！ 最初は React-Hook を理解するのは難しいかもしれませんが、後で非常に役立つ可能性があります。

この記事では、useCallback と useMemo の違いと、useCallback と useMemo をいつ使用するかを示します。

useMemo と useCallback の違い

React 16.8 で 2 つの組み込みフックが導入されました。 これらの機能は、パフォーマンスを最適化するために導入されました。 useMemo と useCallback の違いはほとんどないように見えるので、混乱を解消しようとします。

React-Hook とは何ですか?

フックは React に導入された新機能で、クラスを作成せずに useState やその他の React 機能を使用できるようにします。 フックは、React の状態とライフサイクル機能に「フック」するメソッドと関数です。

useCallback と useMemo

useCallback フックは、子コンポーネントが実際には必要なく何度も再レンダリングされる場合に使用されます。 useCallback を使用すると、毎回新しいインスタンスを作成する代わりに、渡された関数の同じインスタンスを返すことで、この不要な再レンダリングを防ぐことができます。 これにより、かなりの時間 (および開発時間に費やすお金) を節約できます。 メモ化されたコールバックで依存関係の配列を渡すと、依存関係が変更された場合にのみ変更されるメモ化されたバージョンになります。

useMemo は React の機能コンポーネントで使用されます。 メモ化された値を返すために使用されます。 メモ化とは、次の実行のために同じ引数で関数を再コンパイルする代わりに、キャッシュされた結果を返すことによって再コンパイル時間を節約するプロセスを指します。 キャッシュされた結果は、次に呼び出されたときに返されます。 useMemo フックは、メモリーにマップされた値を提供します。

明らかに、いくつかの類似点があります。 useMemo と useCallback の両方で、フックは関数と依存関係の配列を受け入れます。 ただし、useCallback は戻り値を記憶し、useMemo は関数を記憶します。 つまり、一方は値型をキャッシュし、もう一方は関数をキャッシュします。

• 続きを読む –ファイルを整理する方法と理由
• 教室で電子ガジェットを活用する 9 つの方法

useCallback と useMemo をいつ使用するか

では、いつ useCallback を使用する必要があり、いつ useMemo が最適なオプションなのでしょうか? 例を見てみましょう。 計算量が多く高価なコードが引数を受け入れて値を返す場合、useMemo が最適なオプションです。 そうすれば、コードを再実行して時間と計算能力を浪費することなく、レンダリング間で値を参照し続けることができます。

関数インスタンスを複数のレンダーにわたって永続的に維持する必要がある場合は、代わりに useCallback を使用する必要があります。これは、本質的に関数を React コンポーネントのスコープ外に配置してそのまま維持するためです。

useEffectとは？

useEffect を使用するときに遭遇する可能性のある依存配列については、既に説明しました。 useEffect は別の React フックです。 コールバック引数ロジックを使用して、機能コンポーネントの副作用を処理するために使用されます。 依存関係は、プロパティや状態値など、副作用の依存関係のリストです。

このフックは、コンポーネントがレンダリング後にアクションを実行する必要があることを React に示します。 DOM が更新されると、渡したエフェクトが保存されます。 この結果を得るために、データ フェッチを実行することもできます。

つまり、useCallback、useMemo、および useEffect はすべて、React アプリケーションでのコンポーネントの再レンダリング間のパフォーマンスの向上に関係しています。

ただし、フックを使いすぎないことが重要です。 フックは新しい複雑なロジックを導入し、意図したものとは逆の効果をもたらす可能性があり、パフォーマンスの問題を解決する代わりに作成する可能性があります。 useMemo は、非常にコストのかかる計算にのみ使用する必要があります。

アプリケーションの根本的な問題を修正するために useMemo または useCallback を使用しないでください。 最終的には、これらの問題が再発して悩まされるため、最初に既知の障害に対処することをお勧めします。

• 続きを読む –最適な CMS の選び方
• 暗号化方式の長所と短所は何ですか?

結論

この記事が洞察に満ちていて、2 つのフックについて理解が深まったことを願っています。 要約すれば：

• どちらも関数と依存関係の配列を受け入れます
• useMemo は返された値を記憶し、useCallback は関数を記憶します。

useMemo と useCallback の違いは明らかです。 これらのツールは時間とお金を節約できる可能性がありますが、それは適切なコンテキストと環境で使用された場合に限られます。

このチュートリアルがuseMemo と useCallback をいつ使用するかについて知るのに役立つことを願っています: React ファンのための簡単なガイド. 何か言いたいことがあれば、コメント欄からお知らせください。 この記事が気に入ったら、共有して、Facebook、Twitter、YouTube で WhatVwant をフォローして、技術的なヒントを入手してください。

useMemo と useCallback を使用する場合 – FAQ