El callback setState en React

1. ¿Por qué es necesario el argumento de devolución de llamada?
2. ¿Cuándo utilizar la devolución de llamada setState()?

A primera vista, el método .setState() de los componentes de React parece bastante simple. Actualiza el estado existente para reflejar los cambios en el argumento. Sin embargo, mucha gente no sabe que el método .setState() también acepta otro argumento opcional. Este argumento es una función de devolución de llamada, que se ejecuta justo después de que se actualiza el estado.

Para escribir un código más confiable, necesita comprender qué hace la función callback .setState() y cómo puede usarla.

¿Por qué es necesario el argumento de devolución de llamada?

La mayoría de los desarrolladores de React no saben que el método .setState() es asíncrono. La actualización no ocurre de inmediato. Si intenta leer el contenido actualizado de state inmediatamente después de una llamada a .setState(), es posible que no tenga éxito o que lea los datos incorrectos.

Para resolver este problema, el método setState() toma otro argumento opcional: una función de devolución de llamada. Las acciones especificadas en la función de devolución de llamada se realizarán solo después de que se actualice el estado.

¿Cuándo utilizar la devolución de llamada setState()?

Como mencionamos anteriormente, la llamada setState es asincrónica. No actualiza el objeto de estado inmediatamente. Si desea realizar una comprobación o alguna otra acción basada en la actualización más reciente, usar la devolución de llamada setState es una buena práctica. Sin embargo, no es la única forma de realizar este tipo de operaciones. Discutimos las alternativas en secciones posteriores.

La devolución de llamada setState() es útil para este tipo de acciones: realizar llamadas a la API, verificar el contenido de state para arrojar un error condicionalmente y otras operaciones que deben realizarse inmediatamente después de que se actualice el state . La devolución de llamada setState() también se utiliza con frecuencia para la validación.

Por ejemplo, si queremos usar <input> para actualizar el estado, podemos usar la función de devolución de llamada para leer el valor actualizado con absoluta certeza. Sin una devolución de llamada, podríamos estar comprobando las versiones antiguas y obsoletas del estado.

Ejemplo de código:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      text: ""
    }
  }
  render() {
    return (
    <div>
    	<h1>Hello World</h1>
   		<input type="text" 
         onChange={(e) => this.setState({text: e.target.value}, 
         () => console.log(this.state.text))}></input>
    </div>
    )
  }
}

Función de devolución de llamada vs render()

Los escépticos podrían preguntar por qué necesito la devolución de llamada setState() cuando puedo acceder al state actualizado en el cuerpo del método render().

La diferencia es que el método render() se ejecutará cada vez que se actualice el state, mientras que una devolución de llamada setState() sólo se ejecutará después de actualizar el valor específico en el state.

.setState() en una función async

A veces, el método .setState() se puede llamar en funciones asincrónicas. En este caso, el estado no se actualizará de inmediato.

Si lee el valor de la propiedad estatal usando la palabra clave this, obtendrá un valor antiguo. Por otro lado, la función de devolución de llamada se llama una vez que se realiza la tarea async.

Alternativa

Los documentos de React recomiendan que los desarrolladores usen el método del bucle de vida componentDidUpdate() en su lugar, solo disponible para componentes de clase.

Para los componentes funcionales, useEffect() puede reemplazar eficazmente todos los enlaces del bucle de vida, incluido componentDidUpdate(). Solo tienes que personalizar el array de dependencias.

Por ejemplo, si su estado tiene una propiedad age y desea comprobar su valor una vez que se actualiza el estado, el gancho useEffect() se vería así:

useEffect(()=>console.log(`doing something with ${this.state.age}`), [age])