Cuándo usar React setState callback

Cuando cambia el estado de un componente de reacción, se llama al método de representación. Por lo tanto, para cualquier cambio de estado, se puede realizar una acción en el cuerpo de los métodos de representación. ¿Hay un caso de uso particular para la devolución de llamada setState entonces?

Sí lo hay, ya que setStatefunciona de alguna asynchronousmanera. Eso significa que después de llamar a setStatela this.statevariable no se cambia de inmediato. así que si desea realizar una acción inmediatamente después de establecer el estado en una variable de estado y luego devolver un resultado, una devolución de llamada será útil

Considere el siguiente ejemplo

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value });
  this.validateTitle();
},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

Es posible que el código anterior no funcione como se esperaba, ya que la titlevariable puede no haber mutado antes de que se realice la validación. Ahora puede preguntarse si podemos realizar la validación en la render()función en sí, pero sería mejor y más limpio si podemos manejar esto en la función changeTitle, ya que eso haría que su código sea más organizado y comprensible

En este caso, la devolución de llamada es útil

....
changeTitle: function changeTitle (event) {
  this.setState({ title: event.target.value }, function() {
    this.validateTitle();
  });

},
validateTitle: function validateTitle () {
  if (this.state.title.length === 0) {
    this.setState({ titleError: "Title can't be blank" });
  }
},
....

Otro ejemplo será cuando quieras dispatchy acción cuando el estado haya cambiado. querrá hacerlo en una devolución de llamada y no en la render()forma en que se llamará cada vez que se produzca la devolución y, por lo tanto, muchos de estos escenarios son posibles donde necesitará una devolución de llamada.

Otro caso es un API Call

Puede surgir un caso cuando necesita hacer una llamada a la API en función de un cambio de estado particular, si lo hace en el método de representación, se llamará en cada onStatecambio de representación o porque alguna Prop se transfirió a la Child Componentmodificación.

En este caso, querrá usar a setState callbackpara pasar el valor de estado actualizado a la llamada API

....
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}
....

this.setState({
    name:'value' 
},() => {
    console.log(this.state.name);
});

1. El caso de uso que viene a mi mente, es una apillamada, que no debería entrar en el render, porque se ejecutará para un eachcambio de estado. Y la llamada a la API solo debe realizarse en un cambio de estado especial, y no en cada render.

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)
} 

performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });
}

Por lo tanto, para cualquier cambio de estado, se puede realizar una acción en el cuerpo de los métodos de representación.

Muy mala práctica , debido a que el rendermétodo-debe ser puro, significa que no se deben realizar acciones, cambios de estado, llamadas a la API, solo componga su vista y devuélvala. Las acciones deben realizarse solo en algunos eventos. Render no es un evento, sino componentDidMountpor ejemplo.

Considere la llamada setState

this.setState({ counter: this.state.counter + 1 })

IDEA

Se puede llamar a setState en función asíncrona

Por lo tanto, no puede confiar this. Si la llamada anterior se realizó dentro de una función asincrónica, thisse referirá al estado del componente en ese punto de tiempo, pero esperábamos que esto se refiriera a la propiedad dentro del estado en la llamada setState del tiempo o al comienzo de la tarea asincrónica. Y como la tarea era llamada asincrónica, esa propiedad puede haber cambiado con el tiempo. Por lo tanto, no es confiable usar thispalabras clave para referirse a alguna propiedad de estado, por lo tanto, usamos la función de devolución de llamada cuyos argumentos son anteriorState y props, lo que significa que cuando se realizó la tarea asincrónica y que era hora de actualizar el estado usando setState, la llamada anteriorState se referirá al estado ahora cuando setState aún no ha comenzado Garantizar la fiabilidad de que nextState no se corromperá.

Código incorrecto: conduciría a la corrupción de datos

this.setState(
   {counter:this.state.counter+1}
 );

Código correcto con setState con función de devolución de llamada:

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

Por lo tanto, cada vez que necesitemos actualizar nuestro estado actual al siguiente estado en función del valor presentado por la propiedad en este momento y todo esto está sucediendo de manera asíncrona, es una buena idea usar setState como función de devolución de llamada.

He tratado de explicarlo en codepen aquí CODE PEN