0

Basicamente tenho um estado que é um objeto complexo e vários componentes que renderizam apenas uma propriedade dele, como a aplicação é meio grande fiz este protótipo para ilustrar:

//Component principal que guarda um objeto como state
export default function App() {
  const [data, setData] = useState({
    count: 0,
    title: "generic title"
  });

  const handlerIncrementData = () => {
    const newData = data;
    newData.count = newData.count + 1;
    setData(newData);
  };

  return (
    <div className="App">
      <h2 onClick={handlerIncrementData}>Contador: {data["count"]}</h2>
    </div>
  );
}

Teoricamente toda vez que eu clicar no h2 o valor do count vai ser incrementado e, de fato, checando pelo React Dev Tools, ele está sendo, porém a renderização do componente não atualiza. Aparentemente o React não atualiza componentes que só usam uma propriedade do state. Estou fazendo algo errado ou isso faz parte da biblioteca? Caso seja, como posso contornar esse problema?

O código funciona perfeitamente usando um tipo primitivo no lugar do obj como state.

2 Respostas 2

2

Esses dias teve o mesmo problema é uma pergunta, onde até relatei para o usuário que me perguntou sobre copiar o novo estado para o objeto, que no caso usei spread operator, pelo que entendo quando vai se alterar objeto(s) ou lista(s) precisa utilizar uma nova cópia do objeto e/ou lista para que o componente tenha essa nova realidade ou atualização da informação, exemplo:


//Component principal que guarda um objeto como state
function App() {
  const [data, setData] = React.useState({
    count: 0,
    title: "generic title"
  });

  const handlerIncrementData = () => {
    let { count } = data;
    count ++;
    setData({...data, count});    
  };

  return (
    <div className="App">
      <h2 onClick={handlerIncrementData}>Contador: {data["count"]}</h2>
    </div>
  );
}
ReactDOM.render( <App/> , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Referencias:

1
  • 1
    Muito obrigado, eu to fazendo uma aplicação meio grande e demorei pra perceber que alguns componentes não tavam funcionando, ja tava com medo de ser tarde demais pra mudar algo, enfim, valeu mesmo. Commented 4/01/2021 às 0:19
1

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?.

1
  • 1
    resposta perfeita, muito obrigado pela atenção Commented 5/01/2021 às 12:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .