React useEffectでオブジェクトを比較する方法：浅い比較 vs 深い比較

2024-05-05

React useEffectにおけるオブジェクト比較の詳細解説

ReactのuseEffectフックは、副作用処理を実行するために便利なツールです。しかし、オブジェクトを依存関係として渡す場合、オブジェクト自体の同一性比較ではなく、浅い比較しか行われない点に注意が必要です。このため、オブジェクトの内容が変更されても、useEffectが実行されない可能性があります。

本記事では、useEffectにおけるオブジェクトの比較に関する詳細と、適切な比較方法について分かりやすく解説します。

useEffectの依存関係とオブジェクト比較

useEffectフックには、オプションとして第二引数に依存関係の配列を渡すことができます。この配列に渡された値が変化した際に、useEffect内の処理が実行されます。

オブジェクトを依存関係として渡した場合、以下の2つの点が重要になります。

オブジェクト自体が同一かどうか
オブジェクトのプロパティ値が変更されたかどうか

デフォルトでは、useEffectはオブジェクト自体を比較します。つまり、オブジェクトの参照が異なれば、たとえプロパティ値が同じであっても、useEffectは実行されます。

浅い比較と深い比較

オブジェクトの比較には、浅い比較と深い比較の2種類があります。

浅い比較: オブジェクトの参照が同一かどうかを比較します。

useEffectのデフォルトの比較方法は浅い比較であり、オブジェクトのプロパティ値の変化を検知できません。

オブジェクト比較の適切な方法

オブジェクトを依存関係として使用する場合は、以下のいずれかの方法でオブジェクトを比較する必要があります。

オブジェクトのプロパティを個別に依存関係として渡す: この方法では、比較対象となるプロパティを明示的に指定できます。

useEffect(() => {
  // オブジェクトのプロパティ `count` が変更された場合に実行
  if (count !== prevCount) {
    // 処理
  }
}, [count]);

カスタム比較関数を使用する: この方法では、独自の比較ロジックを実装できます。

const isEqual = (prevObj, nextObj) => {
  // オブジェクトの比較ロジック
  return prevObj.count === nextObj.count && prevObj.name === nextObj.name;
};

useEffect(() => {
  // オブジェクト `obj` が変更された場合に実行
  if (!isEqual(prevObj, obj)) {
    // 処理
  }
}, [obj]);

ライブラリを使用する: useDeepCompareなどのライブラリを使用することで、深い比較を簡単に実装できます。

import useDeepCompare from 'use-deep-compare';

useEffect(() => {
  // オブジェクト `obj` が変更された場合に実行
  if (!useDeepCompare(prevObj, obj)) {
    // 処理
  }
}, [obj]);

まとめ

useEffectにおけるオブジェクトの比較は、浅い比較と深い比較のどちらを使用する必要があるのかを理解することが重要です。オブジェクトのプロパティのみを比較したい場合は、個別に依存関係として渡す方法が適切です。一方、オブジェクト全体を比較したい場合は、カスタム比較関数を使用するか、ライブラリを使用する必要があります。

適切な比較方法を選択することで、useEffectの意図した動作を実現することができます。

補足

オブジェクトの比較以外にも、配列の比較など、様々な種類の比較が可能です。それぞれの状況に合わせて適切な方法を選択してください。

オブジェクトのプロパティを個別に依存関係として渡す

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

function MyComponent() {
  const [count, setCount] = useState(0);
  const [obj, setObj] = useState({ name: 'Taro', age: 30 });

  useEffect(() => {
    // オブジェクトのプロパティ `count` が変更された場合に実行
    if (count !== prevCount) {
      console.log('count が変更されました:', count);
    }
  }, [count]);

  useEffect(() => {
    // オブジェクトのプロパティ `name` または `age` が変更された場合に実行
    if (prevObj.name !== obj.name || prevObj.age !== obj.age) {
      console.log('obj が変更されました:', obj);
    }
  }, [obj.name, obj.age]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>count + 1</button>
      <button onClick={() => setObj({ ...obj, name: 'Jiro' })}>obj.name 変更</button>
      <button onClick={() => setObj({ ...obj, age: 40 })}>obj.age 変更</button>
    </div>
  );
}

export default MyComponent;

この例では、count と obj のそれぞれのプロパティを個別に依存関係として渡しています。

count が変更された場合、最初の useEffectフックが実行されます。
obj.name または obj.age が変更された場合、2番目の useEffectフックが実行されます。

カスタム比較関数を使用する

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

function MyComponent() {
  const [count, setCount] = useState(0);
  const [obj, setObj] = useState({ name: 'Taro', age: 30 });

  const isEqual = (prevObj, nextObj) => {
    // オブジェクトの比較ロジック
    return prevObj.name === nextObj.name && prevObj.age === nextObj.age;
  };

  useEffect(() => {
    // オブジェクト `obj` が変更された場合に実行
    if (!isEqual(prevObj, obj)) {
      console.log('obj が変更されました:', obj);
    }
  }, [obj]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>count + 1</button>
      <button onClick={() => setObj({ ...obj, name: 'Jiro' })}>obj.name 変更</button>
      <button onClick={() => setObj({ ...obj, age: 40 })}>obj.age 変更</button>
    </div>
  );
}

export default MyComponent;

この例では、isEqual というカスタム比較関数を使用して、オブジェクト全体を比較しています。

obj が変更された場合、useEffectフックが実行され、isEqual 関数を用いて prevObj と obj を比較します。
オブジェクトの内容が同じ場合は、useEffectフックは実行されません。

ライブラリを使用する

import React, { useState, useEffect } from 'react';
import useDeepCompare from 'use-deep-compare';

function MyComponent() {
  const [count, setCount] = useState(0);
  const [obj, setObj] = useState({ name: 'Taro', age: 30 });

  useEffect(() => {
    // オブジェクト `obj` が変更された場合に実行
    if (!useDeepCompare(prevObj, obj)) {
      console.log('obj が変更されました:', obj);
    }
  }, [obj]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>count + 1</button>
      <button onClick={() => setObj({ ...obj, name: 'Jiro' })}>obj.name 変更</button>
      <button onClick={() => setObj({ ...obj, age: 40 })}>obj.age 変更</button>
    </div>
  );
}

export default MyComponent;

前述に加え、useEffectにおけるオブジェクト比較を実装する方法はいくつかあります。以下に、それぞれの方法の特徴と利点・欠点をご紹介します。

オブジェクトの参照渡し

最も単純な方法は、オブジェクト自体を依存関係として渡すことです。

useEffect(() => {
  // obj が変更された場合に実行
  if (obj !== prevObj) {
    // 処理
  }
}, [obj]);

利点:

記述がシンプル

オブジェクトのプロパティ値が変更されても、オブジェクト自体が同一であれば実行されない
パフォーマンスに影響を与える可能性がある

プロパティの個別渡し

比較対象となるプロパティを個別に依存関係として渡します。

useEffect(() => {
  // count が変更された場合に実行
  if (count !== prevCount) {
    // 処理
  }
}, [count]);

useEffect(() => {
  // name または age が変更された場合に実行
  if (prevObj.name !== obj.name || prevObj.age !== obj.age) {
    // 処理
  }
}, [obj.name, obj.age]);

特定のプロパティのみを比較したい場合に適している

監視対象となるプロパティが増えると、記述が煩雑になる

カスタム比較関数

独自の比較ロジックを実装するカスタム比較関数を使用します。

const isEqual = (prevObj, nextObj) => {
  // オブジェクトの比較ロジック
  return prevObj.name === nextObj.name && prevObj.age === nextObj.age;
};

useEffect(() => {
  // obj が変更された場合に実行
  if (!isEqual(prevObj, obj)) {
    // 処理
  }
}, [obj]);

柔軟な比較ロジックを構築できる

記述が複雑になる

ライブラリの利用

import useDeepCompare from 'use-deep-compare';

useEffect(() => {
  // obj が変更された場合に実行
  if (!useDeepCompare(prevObj, obj)) {
    // 処理
  }
}, [obj]);