【React】useCallbackとuseMemo使ってみた

useCallbackとuseMemo の使い方

Reactアプリケーションを開発する際、パフォーマンスの最適化は非常に重要です。React Hooksには、useCallbackとuseMemoという2つのフックがあります。これらは関数や計算結果をメモ化し、再レンダリングの度に新しい関数や値を生成せずに済むようにします。この記事では、useCallbackとuseMemoの基本的な使い方に焦点を当てます。

useCallbackの使い方

useCallbackフックは、指定されたコールバック関数をメモ化します。これにより、コンポーネントが再レンダリングされるたびに新しい関数が生成されるのを防ぎます。これは特に、子コンポーネントにコールバック関数をプロパティとして渡す場合に有用です。

MyComponent.tsx

import React, { useCallback } from "react";

const MyComponent: React.FC = () => {
  const handleClick = useCallback(() => {
    console.log("Button Clicked!");
  }, []);

  return <button onClick={handleClick}>Click me</button>;
};

export default MyComponent

上記の例では、handleClick関数は再レンダリングごとに同じものが使用されます。依存配列が空であるため、再レンダリングのたびに新しい関数を生成する必要はありません。

useMemoの使い方

useMemoフックは、指定された関数の計算結果をメモ化します。これにより、再レンダリングのたびに同じ計算を再実行するのを防ぎます。これは、コンポーネント内で重い計算を行う場合に役立ちます。

MyComponent.tsx

import React, { useMemo } from 'react';

const MyComponent: React.FC = () => {
  const expensiveCalculation = useMemo(() => {
    // 重い計算
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return result;
  }, []); // 依存配列が空なので、再レンダリングごとに同じ計算結果が使用される

  return (
    <div>{expensiveCalculation}</div>
  );
};

export default MyComponent

上記の例では、expensiveCalculationは再レンダリングごとに同じ計算結果が使用されます。依存配列が空であるため、再レンダリングのたびに計算を再実行する必要はありません。

まとめ

useCallbackとuseMemoは、Reactアプリケーションのパフォーマンスを向上させるための重要なツールです。コールバック関数や計算結果をメモ化することで、不要な再計算や再生成を防ぎ、コンポーネントの効率を向上させることができます。これらのフックを適切に使用することで、より快適で効率的なReactアプリケーションを構築することができます。

この記事では、初心者大学生がReact Nextを理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！