Imutabilidade em Javascript e React

React é uma biblioteca famosa por construir interfaces de usuário dinâmicas. A imutabilidade de dados é uma ideia que surgiu da programação funcional e a aplicação ao design de seu aplicativo front-end pode ter muitos benefícios.

O que é mutação de dados?
Para entender a ideia de mutação de dados, será necessário voltar aos fundamentos da programação e entender como podemos comparar estruturas de dados em javascript. Comparar tipos primitivos é muito fácil.

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

Em suma, para caso não primitivo ==e ===variáveis ​​de comparação do operador por sua referência. podemos compará-los por valores também, mas em estruturas de dados complexas, isso vai precisar de várias verificações de igualdade, que são chamadas de verificações de igualdade profundas.

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 () : Você pode usar [].concat()para alterar os valores do array de maneira imutável.

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

É difícil verificar se o seu estado mudou ou não, se o seu estado é complicado (contém objeto aninhado). Você precisa fazer uma verificação de igualdade profunda, porque quando os objetos são comparados usando a igualdade de referência, você não pode ter certeza se o próximo estado foi alterado, e a verificação de igualdade profunda levará mais tempo do que o tempo de comparação para renderizar novamente. Portanto, o React prefere renderizar novamente o componente em cada chamada setState em vez da comparação de mudança de estado.

Manter o seu estado mínimo é a melhor prática no React.

Obrigado! Espero que este artigo seja útil para você :)