Atualizações de estado atrasadas no React: Compreendendo o SetState assíncrono

Ao trabalhar com componentes React, é crucial entender a natureza do método do settate. Em contraste com a programação imperativa, onde as atualizações de estado ocorrem imediatamente, o SetState do React é assíncrono. Isso significa que a atualização do estado não garante uma reflexão imediata no estado interno do componente. Snippet que implementa um componente BoardAdd no React:

Classe Boardadd estende React.component { construtor (adereços) { super (adereços); this.state = { BoardAddmodalShow: false }; this.openaddboardmodal = this.openaddboardmodal.bind (this); } OpenAddboardModal () { this.setState ({BoardAddmodalShow: true}); console.log (this.state.boardaddmodalshow); } } Quando o método OpenAddboardModal é chamado, ele define o sinalizador BoardAddmodalShow como True e imprime seu valor no console. No entanto, a saída do console mostra que o valor permanece falso, apesar da chamada SetState. Depois de ser chamado, a interface do usuário permanece inalterada até que a reação agenda uma renderização novamente. A instrução console.log é executada antes que a renderização ocorra, resultando no valor de estado desatualizado sendo impresso. Podemos usar uma função de retorno de chamada como um argumento para o SetState. O retorno de chamada é executado após a atualização do estado e a renderização ocorreu:

OpenAdDboardModal () { this.setState ({BoardAddmodalShow: true}, function () { console.log (this.state.boardaddmodalshow); }); }

class BoardAdd extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            boardAddModalShow: false
        };
        this.openAddBoardModal = this.openAddBoardModal.bind(this);
    }

    openAddBoardModal() {
        this.setState({ boardAddModalShow: true });
        console.log(this.state.boardAddModalShow);
    }
}

Esta natureza assíncrona do SetState serve a um propósito de melhorar o desempenho. Como as atualizações do estado acionam os renderizadores, torná-los síncronos pode levar à falta de resposta do navegador. As chamadas SetState em lote melhoram o desempenho, minimizando as renderizações desnecessárias e aprimorando a experiência do usuário.