Immuabilité en Javascript & React

React est une bibliothèque célèbre pour la création d'interfaces utilisateur dynamiques. L'immuabilité des données est une idée issue de la programmation fonctionnelle et l'application à la conception de votre application frontale peut présenter de nombreux avantages.

Qu'est-ce que la mutation de données ?
Pour comprendre l'idée de la mutation des données, il faudra revenir aux fondements de la programmation et comprendre comment comparer les structures de données en javascript. La comparaison des types primitifs est assez facile.

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

En bref, pour les cas non primitifs ==et les ===opérateurs comparent les variables par leur référence. nous pouvons également les comparer par valeurs, mais dans une structure de données complexe, cela nécessitera plusieurs contrôles d'égalité, appelés contrôles d'égalité approfondis.

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() : Vous pouvez utiliser [].concat()pour modifier les valeurs du tableau de manière immuable.

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

Il est difficile de vérifier si votre état a changé ou non, si votre état est compliqué (contient un objet imbriqué). Vous devez effectuer une vérification d'égalité approfondie, car lorsque les objets sont comparés à l'aide de l'égalité de référence, vous ne pouvez pas être sûr que l'état suivant est modifié, et la vérification d'égalité approfondie prendra plus de temps que la comparaison avec le temps de rendu. Ainsi, React préfère restituer le composant à chaque appel setState au lieu de comparer les changements d'état.

Garder votre état minimal est la meilleure pratique dans React.

Merci! J'espère que cet article vous sera utile :)