O setState
é assíncrono
Esse é o comportamento esperado.
Chamadas ao setState
são assíncronas, o React busca realizar uma atualização em lote (batch) para causar menos renderizações.
Tendo em vista esse comportamento do setState
, você conseguirá realizar um console.log
do estado atualizado apenas na próxima renderização, e não logo abaixo do setState
.
Citando a documentação:
Por que setState está me dando o valor errado?
Chamadas para setState são assíncronas - não confie que this.state vá refletir o novo valor imediatamente após chamar setState. (...)
Quando setState é assíncrono?
Atualmente, setState é assíncrono dentro de manipuladores de evento.
Isso garante que, por exemplo, caso tanto Parent
quanto Child
chamem setState
após um evento de clique, Child
não seja renderizado duas vezes. Em vez disso, React executa todas as atualizações de estado ao final do evento do navegador. Isso resulta numa melhoria de performance significativa para aplicativos maiores.
Isso é um detalhe de implementação, então evite depender disso diretamente. Em versões futuras, o React fará atualizações em lotes em mais casos.
Um exemplo prático:
function Exemplo() {
const [state, setState] = React.useState('primeiro render');
React.useEffect(() => {
setState('segundo render');
console.log('useEffect após setState:', state);
}, []);
console.log('RENDER:', state);
return <div>Estado: {state}</div>
}
ReactDOM.render(<Exemplo />, document.querySelector("#container"));
<div id="container"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
A diferença entre um objeto e uma função no setState
Um detalhe específico sobre seu caso setDados(dados => productInfo)
: existe diferença entre utilizar um objeto e uma função no setState
. Como seu novo estado independe do estado atual, você pode simplesmente utilizar setDados(productInfo)
.
Conforme documentação:
Passar uma função de atualização permite que você acesse o valor atual do state
dentro dela. Como as chamadas de setState
são feitas em lotes, isso permite que você encadeie atualizações e garanta que elas se componham ao invés de entrar em conflito.
Abaixo coloco um exemplo com setTimeout
de 500ms para simular uma situação em que esse conflito acontece. Clique várias vezes rapidamente no mesmo botão para atualizar o estado então ver a diferença entre os dois modos:
function Exemplo() {
const [stateUm, setStateUm] = React.useState(0);
const [stateDois, setStateDois] = React.useState(0);
function updateUm() {
setTimeout(() => setStateUm(stateUm + 1), 500);
}
function updateDois() {
setTimeout(() => setStateDois(val => val + 1), 500);
}
return (
<div>
<div>
<p>stateUm: {stateUm}</p>
<button onClick={updateUm}>setStateUm(stateUm + 1)</button>
</div>
<div>
<p>stateDois: {stateDois}</p>
<button onClick={updateDois}>setStateDois(val => val + 1)</button>
</div>
</div>
);
}
ReactDOM.render(<Exemplo />, document.querySelector("#container"));
<div id="container"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
dados
esteja formatado? Pode formatar oproductInfo
antes de colocar nosetDados
...