Conforme consta na documentação do hook useState
, o React utiliza o método estático Object.is
para determinar se dois valores são iguais. O componente só será atualizado caso a desigualdade entre os valores seja confirmada.
A comparação feita pelo Object.is
é muito similar ao operador ===
. A diferença é que, para Object.is
, dois valores NaN
são considerados iguais e +0
e -0
são considerados diferentes.[1]
Desse modo, precisamos lembrar que, para o ===
(e portanto para o Object.is
também), dois objetos são iguais se possuirem a mesma referência. Veja:
const obj = { name: 'Foo' };
const b = obj; // Mesma referência.
console.log(Object.is(obj, b)); //=> true
// Mesmo se alterarmos em `b` (ou em `obj`), a igualdade manter-se-á:
b.name = 'Bar';
console.log(Object.is(obj, b));
Agora veja o que você está fazendo no seu componente:
const newData = data;
newData.count = newData.count + 1;
setData(newData);
Já deu pra ver o problema, certo? :)
Veja que você está atribuindo à newData
a referência do objeto data
(a atribuição de objetos não cria uma "cópia", apenas a referência é atribuída). Desse modo, você não tem um novo objeto, mas sim o mesmo objeto!
Portanto, mesmo que você modifique uma das propriedades do objeto newData
(que é o mesmo que data
), o algoritmo de Object.is
ainda determinará que são o mesmo objeto do estado anterior (já que, como vimos, essa comparação é feita com base na referência).
Enfim, para corrigir, você deve garantir que está passando um novo objeto (isto é, de diferente referência) para a função setData
.
Uma forma de fazer isso é utilizar o spread operator para espalhar as propriedades em um novo literal (conforme sugeriu a outra resposta):
const handlerIncrementData = () => {
const { count } = data;
count++;
// Note abaixo que um **novo** literal está sendo criado (portanto, diferente referência):
setData({ ...data, count });
};
Uma outra opção é utilizar o Object.assign
, passando um novo objeto em seu primeiro argumento:
const handlerIncrementData = () => {
// Novo objeto sendo utilizado como "base":
// ↓↓
setData(Object.assign({}, data, { count: data.count + 1 }));
};
Em suma: para que o componente seja renderizado novamente, você há de garantir que o valor que está passando é diferente do valor anterior (de acordo com a comparação de Object.is
). No caso de objetos, basta assegurar que a referência é diferente.
É justamente por isso que funciona se utilizar um primitivo ao invés de objeto. Primitivos são comparados por valor; enquanto objetos, por referência.
Para saber mais sobre as diferenças sobre o spread operator em objetos e Object.assign
, leia Qual é a diferença entre Object.assign e spread operator?.