React の概要 useCallBack()

React を使用して Web サイトを構築する場合は、Web サイトの読み込み速度とユーザーが Web サイトを操作できる速度を考慮することが重要です。 React Web サイトを高速化する 1 つの方法は、ページの変更されていない部分の再レンダリングなどの不必要な作業を回避することです。

React のuseCallback()関数は、定義した関数を記憶し、必要な場合にのみ再作成することで、これを実現するのに役立ちます。これにより、Web サイトが高速になり、ユーザーの応答性が向上します。 同年のStack Overflow 調査によると、React は最も人気のあるフロントエンド JavaScript ライブラリであり、useCallback() が業界で広く使用されている可能性が高いことを示唆しています。

この記事では、React のuseCallBack() とは何か、およびパフォーマンスを向上させるために React コードで useCallBack() を使用する方法について説明します。

React の useCallBack とは何ですか?

useCallback() は React が提供するフック関数で、関数をメモ化するために使用されます。 言い換えれば、不要な再レンダリングを回避することで、コンポーネントのパフォーマンスを最適化するのに役立ちます。

React では、コンポーネントの状態またはプロパティが変更されると、更新された値を反映するためにコンポーネントが再レンダリングされます。 このプロセスは計算コストが高く、不適切に処理するとアプリケーションのパフォーマンスが低下する可能性があります。 ここで useCallback() が役に立ちます。

useCallback() を使用すると、ユーザーは関数をメモ化できます。つまり、依存関係が変更された場合にのみ関数が再定義されます。 これにより、不要なコンポーネントの再レンダリングが防止され、アプリケーションのパフォーマンスが最適化されます。

以下に例を示します –

const memoizedCallback = useCallback(

() => {

doSomething(a, b);

}、

[a、b]、

);

チュートリアルを通じて React を始めるのは素晴らしい方法ですが、開発を始めるための動的なコースを受講することは、スキルを更新するのに非常に役立ちます。 ソフトウェア開発のエグゼクティブ大学院プログラム - upGrad からキックスタートまでのフルスタック開発の専門コースをチェックしてください。

useCallBack() を使用する利点

React useCallBack() を使用する利点をいくつか示します。

• useCallback() は、コンポーネントの不要な更新を防ぐことで、React アプリケーションの実行を高速化します。
• コンポーネントが大量のデータを取得し、それをグラフとして表示する場合は、useCallback() の恩恵を受けることができます。
• グラフの親コンポーネントが更新されても、その変更がグラフに影響しない場合は、グラフを更新してデータを再度フェッチする必要はありません。
• useCallback() を使用してデータをフェッチする関数をメモ化することで、不必要な更新を回避し、アプリケーションをより高速かつスムーズに実行できます。
• この最適化により、アプリケーションがより迅速かつ効率的に動作するため、ユーザー エクスペリエンスが向上します。

upGrad のソフトウェア開発コースをチェックしてスキルアップしてください。

useCallBack() の構文とパラメータ

const memoizedCallback = useCallback(

() => {

doSomething();

}、

[依存関係1、依存関係2]

);

この例では、 useCallback()フックはdoSomething()関数をメモします。これは、以前に作成されたバージョンをキャッシュすることを意味します。キャッシュされた関数は、dependency1またはdependency2の値が変更されない限り、後続のレンダリングでのみ使用されます。

これらの依存関係のいずれかが変更されると、新しいバージョンのdoSomething()関数が作成され、キャッシュされたバージョンが新しいバージョンに置き換えられます。これにより、不必要な関数の作成や再レンダリングが防止され、アプリケーションのパフォーマンスが最適化されます。

useMemo() と useCallBack() の違い

useCallbackと useMemo は、値をメモすることで React アプリケーションのパフォーマンスを向上させることができる React フックです。 どちらのフックも関数を引数として受け取り、その関数のメモ化されたバージョンを返します。

2 つの違いは次のとおりです。

useCallBack() を使用するシナリオ

useCallBack() を使用できるシナリオは次のとおりです。

子コンポーネントの最適化

useCallback React は、特にこれらの子コンポーネントにコールバックを渡すときに、参照の等価性に依存する子コンポーネントを最適化して、不必要なレンダリングを回避します。

不必要なレンダリングの防止

React useCallback は、必要なく繰り返しレンダリングされる子要素を持つコンポーネントがある場合に特に便利です。 コールバック関数と依存関係配列をuseCallbackに渡して、不要なレンダリングを防ぐことができます。

upGrad のフル スタックソフトウェア開発ブートキャンプコースを利用して、useCallBack() 関数を詳しく理解する機会を利用してください。

人気のソフトウェア エンジニアリング コースを探索する

useCallBack() の例

useCallBack() フックを実装する方法の例をいくつか示します。

useCallBack の例 1

親コンポーネントが関数を prop として子コンポーネントに渡す場合、親が頻繁に再レンダリングされると、子コンポーネントが不必要に再レンダリングされる可能性があります。 このような場合、useCallback を使用して関数をメモすると、不要な再レンダリングを防ぐことができます。

import React, { useCallback } from 'react';

関数 ParentComponent() {

const handleButtonClick = useCallback(() => {

console.log('ボタンがクリックされました');

}、[]);

戻る （

<ChildComponent onClick={handleButtonClick} />

);

}

function ChildComponent({ onClick }) {

戻る （

<button onClick={onClick}>クリックしてください</button>

);

}

useCallBack の例 2

大規模なデータセットに対して複雑な計算を実行する関数があるとします。 この関数が頻繁に呼び出され、実行に時間がかかる場合、アプリケーションでパフォーマンスの問題が発生する可能性があります。 このシナリオでは、useCallback を使用して関数をメモ化し、計算の不必要な再実行を防ぐことができます。

import React, { useState, useCallback } from 'react';

関数 ParentComponent() {

const [データ、setData] = useState([]);

const processData = useCallback(() => {

const処理されたデータ = “処理されたデータ”;

処理されたデータを返します。

}、 [データ]）;

戻る （

<ChildComponent processData={processData} />

);

}

function ChildComponent({ processData }) {

const 結果 = processData();

戻る （

<div>{結果}</div>

);

}

useCallBack() を使用した React パフォーマンスの最適化

useCallback フックは、関数をメモ化して、依存関係の 1 つが変更された場合にのみ関数が再作成されるようにする React の強力なツールです。 これは、頻繁に呼び出されるパフォーマンス重視の関数にとって特に有益です。 どのように使用できるかを確認するには、以下の例をチェックしてください。

import { useState, useEffect } from 'react';

関数 App() {

const [word, setWord] = useState(“ボブ”);

constsay = () => console.log(`あなたの言葉は: ${word}`);

useEffect(() => {

言う（）;

}、 [言う]）;

<div>ようこそ!</div> を返します。

}

この例では、useEffect フックが Say 関数に依存していることを示しています。つまり、関数の変更によってのみトリガーされる必要があります。 しかし、React の参照等価性チェックにより、実際に変更がない場合でも、say function は常に true と評価されるため、不必要なレンダリングが発生します。

useEffect コールバックは各レンダリングで使用されますが、パフォーマンスには適していません。 これを解決する 1 つの方法は、関数を useEffect ブロックに再配置することですが、他の場所では関数を使用できなくなるため、これは理想的な解決策ではありません。 以下の例を確認してください –

import React, { useState, useEffect } from 'react';

関数 App() {

const [word, setWord] = useState(“ボブ”);

constsay = () => console.log(`あなたの言葉は: ${word}`);

useEffect(() => {

言う（）;

}、 [言う]）;

<div>ようこそ!</div> を返します。

}

もう 1 つの解決策は、関数をラップしてuseCallback フックを実装することです。 useCallback 関数には useEffect と同様に依存関係配列が必要であることを覚えておくことが重要です。 関数が変数を取る場合、ユーザーはそれを配列で渡すことができます。 または空のままにしておきます。 ここでは、say 関数は word 変数に依存しているため、それを配列に含めます。

「react」から {useState, useEffect,useCallback} をインポートします

関数 App(){

const [word,setWord]=useState(“ボブ”)

const Say = useCallback(()=>console.log(`あなたの単語は: ${word}`),[word])

useEffect(()=>{

言う（）

}、[言う]）

return <div>ようこそ!</div>

}

useCallBack() を使用しない場合

useCallback() は特定のシナリオでパフォーマンスを最適化するための便利なツールですが、場合によっては不要な場合や有害な場合もあります。 useCallback() を使用しない場合の例をいくつか示します。

• 関数が prop として渡されるとき、それはすでに外部状態に依存しない純粋な関数です。
• 関数が prop として渡される場合、パフォーマンスの問題は発生せず、過剰に呼び出されることもありません。
• 関数が prop として渡される場合、その関数は複数の場所で使用されるため、さまざまな動作や依存関係を反映するために毎回再作成する必要があります。
• 関数が小さなコンポーネント ツリーの一部である prop として渡される場合、 useCallback() によるパフォーマンスの向上はごくわずかです。
• 関数が prop として渡されると、イベント ハンドラーとして使用され、一度だけ呼び出されます。

このような場合、 useCallback() を使用すると、メモ化されたコールバックの作成と維持のオーバーヘッドにより、実際にはパフォーマンスが低下する可能性があります。 useCallback() を使用するかどうかを決定する前に、各ユースケースを慎重に検討し、潜在的なメリットと潜在的なコストを比較検討することが重要です。

需要の高いソフトウェア開発スキル

結論

useCallback の使用は、React アプリケーションのパフォーマンスを最適化するための強力なツールになります。 機能を記憶することで、不必要な再レンダリングを回避でき、よりスムーズで効率的なユーザー エクスペリエンスにつながります。 ただし、useCallback を慎重に使用し、それが最も効果的な場合のシナリオを理解することが重要です。

upGrad は、業界関連スキルに焦点を当てた包括的なコンピューター サイエンス教育を提供するコンピューターサイエンスの修士プログラムを提供しています。 このプログラムは、ソフトウェア開発スキルを向上させるための、新人または経験豊富な個人を対象としています。 このコースを受講すると、学生は現実世界でキャリアを向上させ、希望する分野の専門家になる準備が整います。