Create A Deep Clone Of An Object In React

This article will show you how to create a deep clone of an object in React. Learn more about it with the explanation and examples below.

How to create a deep clone of an object in React?  

Before we create a deep clone of an object in React, first understand the difference between shallow copy and deep copy.

• Shallow Copy: Quicker is shallow repetition. Nevertheless, the way it handles pointers and references is “lazy”. It simply copies the price of the pointer instead of making a new copy of the particular knowledge it points to. As a result, both the original and the copy may contain hints pointing to the same fundamental knowledge.
• Deep Copy: The underlying data is truly replicated by deep repetition. The copy does not access to it because the first does not share it.

Code:

// Shallow Copy Example
const a = {
  animals: {
    cat: 'Tom'
  }
}

let b = {...a}
b.animals.cat = 'Jack' 
console.log(b.animals.cat) 
console.log(a.animals.cat) 

Output:

Jack
Jack

As you can see, when copy b of a changes the value inside, the value of a is also changed.

Use decompose elements inside an object method

In this way, we will decompose each element of object a and assign a complete nest object to the new object b, passing in b the values ​​of the keys from object a using the rest operator.

Code:

import React from "react";
 
function App() {
  const a = {
    vehicles: {
      car: 'BMW I8'
    }
  }
  let b = {vehicles: {...a.vehicles}}
  b.vehicles.car = 'GTR-R'
  return (
    <div>
      <h2>Create a Deep clone of an Object | LearnShareIT</h2>
      <hr/>
      <p>Car in object a: {a.vehicles.car}</p>
      <p>Car in object b: {b.vehicles.car}</p>
    </div>
  );
}
 
export default App;

Output:

So now, when we access vehicles.car, but the return values ​​of the old and new objects differ. We have created a deep clone of an object in React.

Use _cloneDeep() in lodash method

Lodash is a powerful JavaScript library for handling Array, Objects, Functions, Collection … etc. In this case, we will use a built-in library function _cloneDeep() to create a deep clone of the object. Here’s how to install the library with the npm command.

Terminal:

npm i lodash

And here is how to use the _ cloneDeep() function.

Code:

import React from "react";
import cloneDeep from "lodash/cloneDeep";

function App() {
  const a = {
    vehicles: {
      car: "BMW I8",
    },
  };
 
  var b = cloneDeep(a);
  b.vehicles.car = "GTR-R";
  return (
    <div>
      <h2>Create a Deep clone of an Object | LearnShareIT</h2>
      <hr />
      <p>Car in object a: {a.vehicles.car}</p>
      <p>Car in object b: {b.vehicles.car}</p>
    </div>
  );
}
 
export default App;

This approach can partially create a deep clone of an object in React, which is not to decompose the original nest object in detail. Still, it will have to install more libraries into the project, but the results are the same. The choice is yours, good luck.

Summary

To summarize, through this article, you can learn several ways to create a deep clone of an object in React. You can use decompose elements inside the object method or use _cloneDeep() in the lodash method to do it. Let’s choose the suitable method for you.

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs