Create a Deep clone of an Object in React

avatar

Borislav Hadzhiev

Last updated: Apr 21, 2022

banner

Photo from Unsplash

Table of Contents #

  1. Create a Deep clone of an Object in React
  2. Create a Deep Copy of an Object using Lodash in React

Create a Deep clone of an Object in React #

To create a deep copy of an object in React:

  1. Use the JSON.stringify() method to stringify the object.
  2. Use the JSON.parse() method to parse the string back to an object.
  3. Converting the object to JSON makes all of the nested arrays or objects lose their reference.
App.js
export default function App() { const obj = { person: { name: { first: 'James', last: 'Doe', }, address: { country: 'Chile', city: 'Santiago', }, }, }; const deepClone = JSON.parse(JSON.stringify(obj)); console.log(deepClone); return ( <div> <h2>Hello world</h2> </div> ); }

We used the JSON.stringify method to convert the object to a JSON string.

App.js
console.log(typeof JSON.stringify({})); // 👉️ "string"

As a result all of the references to nested objects or arrays are lost.

The next step is to parse the JSON string back to an object by using the JSON.parse method.

App.js
// 👇️ "object" console.log(typeof JSON.parse(JSON.stringify({})));
Converting the object to a JSON string makes all of the nested arrays or objects lose their reference.

If you now mutate the copied object, you won't change the contents of the original object.

App.js
export default function App() { const obj = { person: { name: { first: 'James', last: 'Doe', }, address: { country: 'Chile', city: 'Santiago', }, }, }; const deepClone = JSON.parse(JSON.stringify(obj)); deepClone.person.name.first = 'Bob'; console.log(obj.person.name.first); // 👉️ "James" return ( <div> <h2>Hello world</h2> </div> ); }

Changing the value of a property in the deepClone object does not change the value in the original object, because the nested objects and arrays point to different locations in memory.

Create a Deep Copy of an Object using Lodash in React #

To create a deep copy of an object in React, install and use the lodash.clonedeep package. The cloneDeep method recursively clones a value and returns the result.

Open your terminal in the root directory of your project and install the lodash.clonedeep package with the following 2 commands:

shell
npm i lodash.clonedeep # 👇️ only if you use TypeScript npm i --save-dev @types/lodash.clonedeep

Now we are able to import and use the cloneDeep method.

App.js
import cloneDeep from 'lodash.clonedeep'; export default function App() { const obj = { person: { name: { first: 'James', last: 'Doe', }, address: { country: 'Chile', city: 'Santiago', }, }, }; const deepClone = cloneDeep(obj); deepClone.person.name.first = 'Bob'; console.log(obj.person.name.first); // 👉️ "James" return ( <div> <h2>Hello world</h2> </div> ); }

The cloneDeep method takes a value as a parameter, recursively clones it and returns the result.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.