CODEWITHSUNDEEP
reactjsreact-hooksuse-effect
Rusurano
Rusurano

Reputation: 552

useEffect React Hook: detecting the change of a property for each object in an array

StackOverflow,

I'm having a question about React Hooks, more particularly, useEffect hook. I'm aware that one use case of useEffect hook is to capture changes of certain state variables.

Let's suppose we have the following code:

const MyComponent = () => {
  const [sv, setSv] = useState([
    {
      a: 1,
      b: { c: 'val11', d: 'val12', e: 'val13' }
    },
    {
      a: 8,
      b: { c: 'val21', d: 'val22', e: 'val23' }
    },
    {
      a: 19,
      b: { c: 'val31', d: 'val32', e: 'val33' }
    }
  ]);

  const someCallback = useCallback(() => {
    console.log('change triggered!')
  });

  useEffect(someCallback, [sv]);
}

Let's also assume sv is an array of objects, each of which has the same set of keys, but different values associated with these keys.

It works just fine if I want to execute someCallback on any changes made to sv, including objects nested in each object contained by the array sv.

Now let's assume that there is a need to execute someCallback only when certain properties of each object in the array sv will change. For example, I'll want to only monitor changes to b.c and b.d. The way I thought would work is:

useEffect(someCallback, [sv.map(item => item.b.c), sv.map(item => item.b.d)]);

However, it didn't trigger at all. This probably because Array.map creates a new array with no reference to the previous one, however, I can't think of any other way to map the necessary values.

Any help is greatly appreciated.

Thanks!

Upvotes: 1

Views: 7108

Answers (1)

Sifat Amin
Sifat Amin

Reputation: 1186

I think using SPREAD operator should work

useEffect(someCallback, [...sv.map(item => item.b.c), ...sv.map(item => item.b.d)]);

Upvotes: 2

Related Questions