Kekekalan dalam Javascript & Bereaksi

React adalah perpustakaan terkenal untuk membangun antarmuka pengguna yang dinamis. Kekekalan data adalah ide yang berasal dari pemrograman fungsional dan menerapkan desain aplikasi ujung depan Anda dapat memiliki banyak manfaat.

Apa itu Mutasi Data?
Untuk memahami ide mutasi data, perlu mundur ke dasar pemrograman dan memahami bagaimana kita dapat membandingkan struktur data dalam javascript. Membandingkan tipe primitif cukup mudah.

let num1 = 10,
    num2 = 10;
num1 === num2; // true

let obj1 = { name: "Pragati", lname: "Garud" },
    obj2 = { name: "Pragati", lname: "Garud" };
obj1 === obj2; // false

let obj1 = { name: "Pragati", lname: "Garud" },
    obj2 = obj1;
obj1 === obj2; // true

obj1.name = "unknown";
console.log(obj1.name); // unknown
console.log(obj2.name); // unknown

Singkatnya, Untuk kasus non-primitif ==dan ===variabel perbandingan operator dengan referensi di sana. kita dapat membandingkannya dengan nilai juga, tetapi dalam struktur data yang kompleks ini akan memerlukan beberapa pemeriksaan kesetaraan yang disebut sebagai pemeriksaan kesetaraan mendalam.

let obj1 = { name: "Pragati", lname: "Garud" },
    obj2 = { name: "Pragati", lname: "Garud" };
valueCompare(obj1, obj2); //true

// Input: obj1 and obj2
// Output: true if obj1 is equal to obj2 in terms of values
function valueCompare(obj1, obj2) {
   const keys1 = list of keys of obj1;
   const keys2 = list of keys of obj2;
   if (keys1.lenth !== keys2.length) return false;
   for each key in keys1: 
      if (key is not present in keys2) 
         return false;
      if (typeOf(keys1[key] != typeOf(keys2[key]))
         return false;
      if (keys1[key] is a primitive && keys1[key] !== keys2[key])
         return false;
      if (obj1[key] is non primitive):
         isEqual = valueCompare(obj1[key], obj2[key]);
         if(!isEqual) return false;
}

let obj3 = Object.assign({}, obj1, { name: "unknown" });
obj3 === obj1; //false

2] [].concat() : Anda dapat menggunakan [].concat()untuk mengubah nilai array dengan cara yang tidak dapat diubah.

let numbers = [10, 20, 30];
numbers[1] = 22; // This will not change reference to an array
// Instead what you can do copy list and perform update as below
let numbers = [10, 20, 30];
let changedNumbers = [].concat(numbers);
changedNumbers[1] = 22;
changedNumbers === numbers; // false

Sulit untuk memeriksa apakah status Anda telah berubah atau tidak, jika status Anda rumit (berisi objek bersarang). Anda perlu melakukan pemeriksaan kesetaraan mendalam, karena ketika objek dibandingkan menggunakan kesetaraan referensi, Anda tidak dapat memastikan apakah status berikutnya diubah, dan pemeriksaan kesetaraan mendalam akan memakan waktu lebih lama dibandingkan dengan waktu render ulang. Jadi React lebih memilih untuk merender ulang komponen pada setiap panggilan setState daripada membandingkan perubahan status.

Menjaga kondisi Anda tetap minimal adalah praktik terbaik di React.

Terima kasih! Semoga artikel ini bermanfaat untuk anda :)