Quando usar setState funcional

A função setState do React fornece duas sintaxes para atualizar o estado do componente: a sintaxe de atribuição direta e a sintaxe do atualizador funcional.

Sintaxe de atribuição direta:

this.setState({pictures: pics})

Essa sintaxe é direta e fácil de usar. Ele substitui diretamente o valor do estado existente pelo novo valor fornecido. No entanto, isso pode levar a possíveis problemas se o valor do estado for usado em vários locais ou manipulado dentro dos métodos de ciclo de vida do componente.

Sintaxe do atualizador funcional:

this.setState(prevState => ({
  pictures: prevState.pictures.concat(pics)
}))

A sintaxe do atualizador funcional é preferida porque garante que a atualização do estado seja consistente e previsível. Ele recebe o estado anterior como argumento e retorna o estado atualizado. Isso evita mutações acidentais de estado e garante que o estado esteja sempre atualizado.

Mesclagem e lotes

O React mescla internamente várias chamadas setState em uma única atualização. A sintaxe de atribuição direta é vulnerável a problemas de mesclagem quando diversas chamadas tentam atualizar a mesma chave de estado. Por exemplo:

this.setState({pictures: this.state.pictures.concat(pics1)})
this.setState({pictures: this.state.pictures.concat(pics2)})

A sintaxe do atualizador funcional mescla automaticamente as atualizações corretamente, resultando no estado final refletindo pics1 e pics2.

Desempenho e eficiência

React lotes setState chamadas por motivos de desempenho. Ao mesclar várias atualizações em uma, o React pode otimizar as atualizações de componentes e reduzir novas renderizações desnecessárias. A sintaxe do atualizador funcional suporta lote, permitindo que as atualizações dependam do estado anterior.

Conclusão

Embora ambas as sintaxes possam ser usadas para atualizar o estado, a sintaxe do atualizador funcional é geralmente recomendado devido à sua consistência, segurança, recursos de fusão e suporte para otimizações de desempenho. Ao usar a sintaxe do atualizador funcional, os desenvolvedores podem evitar problemas de mutação de estado e garantir que seus componentes sejam atualizados de maneira correta e eficiente.