Sí, ya que setState funciona de forma asynchronous . Eso significa que después de llamar a setState , la variable this.state no cambia inmediatamente. por lo tanto, 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 es posible que la variable de title no haya mutado antes de que se realice la validación. Ahora puede preguntarse si podemos realizar la validación en la función render() en sí, pero sería mejor y más limpio si pudiéramos manejar esto en la función changeTitle en sí, ya que eso haría que su código fuera 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 desee dispatch y actuar cuando cambie el estado. querrá hacerlo en una devolución de llamada y no en render() , ya que se llamará cada vez que se produzca una nueva representación y, por lo tanto, muchos de estos escenarios son posibles en los que necesitará una devolución de llamada.

Otro caso es una API Call

Puede surgir un caso en el que necesite realizar una llamada a la API en función de un cambio de estado en particular, si lo hace en el método de representación, se onState en cada cambio de estado de representación o porque alguna propiedad transmitida al Child Component secundario cambió.

En este caso, le gustaría usar una devolución de setState callback para 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); });

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

 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 del método de representación.

Muy mala práctica , porque el método de render debe ser puro, lo que significa que no se deben realizar acciones, cambios de estado, llamadas a API, solo componer su vista y devolverla. Las acciones deben realizarse solo en algunos eventos. Render no es un evento, sino un componentDidMount , por ejemplo.