How to update object properties in state array

Question

So, I'm just going through a React course. Learning this framework for the first time so this is likely a dumb question. Here's code I've been given for updating a property on an object stored in state as an array of objects.

const [squares, setSquares] = React.useState(boxes)

function toggle(clickedSquare) {
    setSquares(prevSquares => {
        return prevSquares.map((square) => {
            return square === clickedSquare ? {...square, on: !square.on} : square
        })
    })
}

...but, the following code I wrote works too and seems simpler, what's wrong with this approach? State values are only shallow immutable. Objects stored in a state array are themselves mutable, as far as I can tell...

const [squares, setSquares] = React.useState(boxes)

function toggle(clickedSquare) {
    clickedSquare.on = !clickedSquare.on;
    setSquares(prevSquares => [...prevSquares])
}

Also consider this example where I have an array containing deeply nested objects held in state.

[
    {
        trunk: {
            limb: {
                branch: {
                    twig: {
                        leaf: {
                            color: "green"
                        }
                    }
                }
            }
        }
    }
]

I want to change that "green" to "brown". It states in this article Handling State in React that...

1. Deep cloning is expensive
2. Deep cloning is typically wasteful (instead, only clone what has actually changed)
3. Deep cloning causes unnecessary renders since React thinks everything has changed when in fact perhaps only a specific child object has changed.

The thing that has changed in the tree example is just the leaf object. So only that needs to be cloned, not the array and not the whole tree or trunk object. This makes a lot more sense to me. Does anyone disagree?

This still leaves (no pun intended) the question of what bugs can be introduced by updating property values in a state array my way and not cloning the object that has the change? A single concrete example would be very nice just so I can understand better where I can optimize for performance.

Answer 1

clickedSquare.on = !clickedSquare.on; is a state mutation. Don't mutate React state.

The reason the following code is likely working is because it has shallow copied the squares state array which triggers a rerender and exposes the mutated array elements.

function toggle(clickedSquare) {
  clickedSquare.on = !clickedSquare.on;        // <-- mutation!
  setSquares(prevSquares => [...prevSquares]); // new array for Reconciliation
}

It may not have any adverse effects in this specific scenario, but mutating state is a good foot gun and likely to cause potentially difficult bugs to debug/diagnose, especially if their effects aren't seen until several children deeper in the ReactTree.

Just always use the first method and apply the Immutable Update pattern. When updating any part of React state, even nested state, new array and object references need to be created for React's Reconciliation process to work correctly.

function toggle(clickedSquare) {
  setSquares(prevSquares => prevSquares.map((square) => // <-- new array
    square === clickedSquare
      ? { ...square, on: !square.on } // <-- new object
      : square
  ));
}

Answer 2

Here, You are using map() method which return only true or false for that condition. So, You should use filter() method instead of map() method which return filtered data for that condition.

For Example:

const arr = [
    {
        name: 'yes',
        age: 45
    },
    {
        nmae: 'no',
        age: 15
    }
]

const filterByMap = arr.map(elm => elm.age > 18)
console.log(filterByMap) // outputs --> [ true, false ]

const filterByFilter = arr.filter(elm => elm.age > 18)
console.log(filterByFilter) // outputs --> [ { name: 'yes', age: 45 } ]