Right way to clone objects / arrays during setState in React

I wanted to add a bit more info about cloning arrays. You can call slice, providing 0 as the first argument:

const clone = myArray.slice(0);

The code above creates clone of the original array; keep in mind that if objects exist in your array, the references are kept; i.e. the code above does not do a "deep" clone of the array contents.

The chosen answer was a miracle and huge props to Nandu Kalidindi, I was having bugs with nested arrays inside of objects that I was updating in my project and was not understanding the concept of "deep" or "nested" arrays and objects not being copied to a new object.

This is my take on his fix and made it look a little more appealing to me and works just as good!

I utilize lodash and found their _.cloneDeep() function to serve my updating state needs.

Lodash _.cloneDeep()

I learned that mapping out updated arrays preventing any bugs was the best way to treat that kind of problem, but I was cloning entire objects with nested arrays that were mutating the old object's arrays in the state.

This is my answer.

const state = {
    fields: {
        "caNyDcSDVb": {
            id: "caNyDcSDVb",
            name: "test1",
            type: "text",
            options: ["A", "B", "C"]
        }
    },
};

const FieldCopy = (id) => {
    const newCopiedField = _.cloneDeep(state.fields[id]);
    newCopiedField.id = nanoid(10);
    return {
        ...state,
        fields: {
            ...state.fields,
            newCopiedField[id]: newCopiedField
        }
    };
};

Here is a one line deep-copy. This is for 'single level' deep objects. If your object has other objects / arrarys, you'll need to use a recursive method.

const clone = array_of_objects.map( x => { return {...x}} )

Since you want to maintain immutability when setting your state within React (so, always make a new object or clone), and since the spread ... operator doesn't clone deeply, you should make use of structuredClone().

Take a look at the MDN:
https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

The global structuredClone() method creates a deep clone of a given value using the structured clone algorithm.

The method also allows transferable objects in the original value to be transferred rather than cloned to the new object. Transferred objects are detached from the original object and attached to the new object; they are no longer accessible in the original object.

This is more or less the modern replacement (as of this post at least) for the JSON.parse(JSON.stringify(yourObject)) method of cloning.

Here's a functional component example:

const nestedAnimals = {
    lists: ['Dogs', 'Cats'],
    items: {
        Dogs: [
            {name: "Snoopy"},
            {name: "Lola"},
            {name: "Sprinkles"}
        ],
        Cats: [
            {name: "Felidae"},
            {name: "Garfiled"},
            {name: "Cat in the Hat"}
        ]
    }
}

const someComponent = (props) => {
    const [animals, setAnimals] = useState(nestedAnimals)
    const [selectedList, setSelectedList] = useState(animals.lists[0])
    const [animalInput, setAnimalInput] = useState("")
    
    // Handler for adding a new animal to our deeply nested object.
    function addAnimal(event) {
        const newAnimal = {name: animalInput}
        // Here's where the deep cloning magic happens.
        const newAnimals = structuredClone(animals)
        newAnimals.items[selectedList].push(newAnimal)
        // Now you've updated your state in an immutable fashion.
        setAnimals(newAnimals)
    }

    // Handler for swapping lists.
    function changeList(event) {
        setSelectedList(event.target.value)
    }
    
    // Handler for storing the value from the input field as it changes.
    function changeAnimalInput(event) {
        setAnimalInput(event.target.value)
    }

    return (
        <div>
            <input type="text" value={animalInput} onChange={changeAnimalInput}/>
            <button onClick={addAnimal}>Add Animal</button>
            <select onChange={changeList}>
                {animals.lists.map(list => <option value={list}>{list}</option>)}
            </select>
            <ul>
                {animals.items[selectedList].map(animal => <li>{animal.name}</li>)}
            </ul>
        </div>
    )
}

One issue might be that var allItems = {...this.state.items}; will only do a shallow clone of this.state.items. So when you push data into this array, it will change the existing array before you call setState.

You could use Immutable.js to solve this issue.

import { List, fromJS, Map } from 'immutable';

constructor() {
   super();
      this.state = {
       lists: List(['Dogs','Cats']), 
       items: fromJS({
        Dogs: [
          { name: "Snoopy" },
          ...
        ],
        Cats: [
          { name: "Felidae" },
          ...
        ]
      })
   };
}

and then your add function would be as follow:

handleAddItem(s) {      
  var key = Object.keys(s)[0];
  var value = s[key];

  var allItems = this.state.items.set(key, Map({ name: value }));
  this.setState({ items: allItems });
}

Just a thought!

Thanks to Luke Dupin, this solution helped me!

const clone = items.map( x => ({...x}) )