useEffect Hook - how to detect the change of an object's property in a state array

Question

How can useEffect detect the change in an array's object's property
without knowing the state array size because items may be added dynamically

in this particular case the "price" property in one of the objects
The array is a state

Just for example if changing the price property useEffect won't invoke, price will be the same next time (after - localStorage.getItem)
(In my app I change it dynamically in a different way this is for example).

  const checkUseEffectLocalS = () => {     
    array[0]['Price'] = '12';    
    setItemsArray(array);
  };

  return (
    <>
      <div>
        <button
          onClick={() => checkUseEffectLocalS()}>
        Check
        </button>
    </>
  );

  useEffect(() => {
    localStorage.setItem(userItems, JSON.stringify(array));
  }, [array.map((item) => item.price)]); //Tried this way also but it didn't worked

Niether

  useEffect(() => {
    localStorage.setItem(userItems, JSON.stringify(array));
  }, [array]);  // won't work

The array structure

   array([
      {
        id: 1,
        productName: 'Vitamin',
        price: '10$',
      },
      {
        id: 2,
        productName: 'Powder',
        price: '26$',
      },
      {
        id: 3,
        productName: 'Multivitamin',
        price: '17.5$', 
      },
    ]);

Before asking I checked very similar question but with no real answer - stackoverflow

Thanks in advance.

you want to handle the state change ?

Alwani Anis
– Alwani Anis

2021-08-11 16:05:58 +00:00
Commented Aug 11, 2021 at 16:05 — Alwani Anis
– Alwani Anis, Commented Aug 11, 2021 at 16:05
@AlwaniAnis Yes sure

ExtraSun
– ExtraSun

2021-08-11 16:08:36 +00:00
Commented Aug 11, 2021 at 16:08 — ExtraSun
– ExtraSun, Commented Aug 11, 2021 at 16:08

ExtraSun · Accepted Answer · 2021-08-11 17:18:46Z

4

Without using useEffect

const checkUseEffectLocalS = () => {   
let arr= [...array]
    arr[0]['Price'] = '12';    
  localStorage.setItem(userItems, JSON.stringify(arr))
    setItemsArray(prev=>arr);
  };

  return (
    <>
      <div>
        <button
          onClick={() => checkUseEffectLocalS()}>
        Check
        </button>
    </>
  )

By using useEffect

useEffect(() => {
  localStorage.setItem(userItems, JSON.stringify(array))
}, [JSON.stringify(array)])

edited Aug 11, 2021 at 17:18

ExtraSun

5583 gold badges15 silver badges35 bronze badges

answered Aug 11, 2021 at 16:12

Alwani Anis

2584 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ExtraSun Over a year ago

Thanks, but is there a way with useEffect ? because I don't think I wanna use localStorage.setItem twice, each in a different component. It will get complicated I think

Alwani Anis Over a year ago

Yes I will edit my answer to add the other way.

ExtraSun Over a year ago

You can look at my previous question to see how I change the property -stackoverflow.com/questions/68743359/…

Alwani Anis Over a year ago

I think my answer works very well with your situation, to handle objects change you should convert it to json string , that is it.

Collectives™ on Stack Overflow

useEffect Hook - how to detect the change of an object's property in a state array

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related