React state comparison with objects and nested arrays

Question

I am trying to compare state against a previous version of the same object (useRef) to detect for changes.

The object that loads into state with useEffect looks like this:

{
  active: true,
  design: [
    {
      existing: '55Xgm53McFg1Bzr3qZha',
      id: '38fca',
      options: ['John Smith', 'Jane Doe'],
      required: true,
      title: 'Select your name',
      type: 'Selection List'
    },
   {
      existing: '55Xgm53McFg1Bzr3qZha',
      id: '38fca',
      options: ['John Smith', 'Jane Doe'],
      required: true,
      title: 'Select your name',
      type: 'Selection List'
    },
  ],
  icon: '🚜',
  id: '92yIIZxdFYoWk3FMM0vI',
  projects: false,
  status: true,
  title: 'Prestarts'
}

This is how I load in my app object and define a comparitor state (previousApp) to compare it and detect changes (with lodash) this all works great until I change a value in the design array.

const [app, setApp] = useState(null)
const [edited, setEdited] = useState(false)
const previousApp = useRef(null)

 useEffect(() => {
    if (app === null) {
      getApp(someAppId).then(setApp).catch(window.alert)
    }
    if (previousApp.current === null && app) {
      previousApp.current = { ...app }
    }
    if (previousApp.current && app) {
      _.isEqual(app, previousApp.current) ? setEdited(false) : setEdited(true)
    }
  }, [app])

For example I change the input value of app.design[0].title = 'testing' with the following code:

const updateItem = e => {
  let newApp = { ...app }
  let { name, value } = e.target
  newApp.design[0][name] = value
  setApp(newApp)
}

This works in the sense that it updates my app state object but not that it detects any changes in comparison to previousApp.current

When I console log app and previousApp after changing both values, they are identical. Its seems to update my previousApp value aswell for some reason.

Rearranging the design array works as expected and detects a change with the following function:

const updateDesign = e => {
  let newApp = { ...app }
  newApp.design = e
  setApp(newApp)
}

cbdeveloper · Accepted Answer · 2019-09-24 06:50:45Z

2

It probably wasn't detecting any difference because the array present in the design property was keeping the same reference.

When you do this:

let newApp = { ...app }

You're creating a new object for your app, but the property values of that object will remain the same, because it's a shallow copy. Thus, the design array (which is an object, and therefore is handled by reference) will keep its value (the reference) unaltered.

I think this would also solve your problem:

const updateItem = e => {
  let newApp = { ...app };
  let newDesign = Array.from(app.design);  // THIS CREATES A NEW ARRAY REFERENCE FOR THE 'design' PROPERTY
  let { name, value } = e.target;
  newDesign[0][name] = value;
  setApp({
    ...newApp,
    design: newDesign
  });
}

answered Sep 24, 2019 at 6:50

cbdeveloper

31.9k45 gold badges209 silver badges404 bronze badges

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

1 Comment

Jim Over a year ago

I had no idea the array was still used with reference. I had just assumed {...app} would make a duplicate of the entire object and its children. The more you know, thank you for your explanation.

Jim · Accepted Answer · 2019-09-24 04:40:22Z

0

I found that using lodash's cloneDeep function i was able to remove the strange link that was occuring between previousApp and App; Even though I used {...app}

See the following:

if (previousApp.current === null && app) {
   previousApp.current = cloneDeep(app)
}

answered Sep 24, 2019 at 4:40

Jim

6778 silver badges17 bronze badges

Collectives™ on Stack Overflow

React state comparison with objects and nested arrays

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related