# setState es Asincrónico

En el ejemplo anterior del contador en parte se mintio un poco. Se supuso que la función setState actualizaría de inmediato el estado y llamaría a render. Eso no es realmente lo que sucede. La función setState es realmente asíncrona.

Si se llama a setState e inmediatamente console.log(this.state) justo después, es muy probable que imprima el estado anterior en lugar del que se acaba de configurar.

```javascript
// Asumir que el estado es { count: 3 }
// Luego llamar setState:
this.setState({ count: 4 });

// Luego intentar imprimir el estado "nuevo":
console.log(this.state);

// Es probable que imprima { count: 3 }
// en vez de { count: 4 }
```

Si se necesita establecer el estado e inmediatamente actuar sobre ese cambio, se puede pasar una función de devolución de llamada (callback) como segundo argumento para setState, así:

```javascript
this .setState({name : 'Zero'}, function () {
    // llamado después de que el estado ha sido actualizado
    // y el componente se ha vuelto a representar
    // this.state ahora contiene { name: 'Zero' }
});
```

## setState funcional

Otra forma de hacer que las actualizaciones de estado secuenciales se ejecuten en secuencia es usar la forma funcional de setState, como esta:

```javascript
this .setState((state, props) => {
    return {
        value : state.value + 1
    }
});
```

De esta forma, se pasa una función a setState en lugar de un objeto. La función recibe el estado actual y las props como argumentos, y se espera que devuelva un objeto, que se fusionará con el estado anterior. Si se tuviera que ejecutar algunos de estos secuencialmente **...**

```javascript
this.setState((state, props) => {
    return {
        value: state.value + 1
    }
});

this.setState((state, props) => {
    return {
        value: state.value + 1
    }
});

this.setState((state, props) => {
    return {
        value: state.value + 1
    }
});
```

Esto funcionaría como se espera, eventualmente incrementando el valor en 3.

Porque cada llamada a setState "pone en cola" una actualización en el orden en que se llama, y cuando se ejecutan, reciben el último estado como argumento en lugar de usar un this.state potencialmente obsoleto.

Un beneficio adicional para el estilo funcional de setState es que las funciones de actualización de estado pueden extraerse de la clase y reutilizarse porque son funciones "puras", es decir, solo operan en sus argumentos, no modifican los argumentos y devuelven un nuevo valor. Una función "pura" no tiene efectos secundarios, lo que significa que llamarla varias veces con los mismos argumentos siempre devolverá el mismo resultado.

setState funcional es la forma preferida de llamar a setState porque está garantizado que funciona correctamente, siempre.

Pasar un objeto a setState funciona bien la mayor parte del tiempo, pero es casi como jugar con fuego. Esta bien hasta que uno se quema y luego se pasen alrededor 30 minutos tratando de descubrir por qué el estado no se está actualizando.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://zeroidentidad.gitbook.io/react-puro-19/7-state-en-clases/setstate_asincrono.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.