Estado del componente

¿Qué hace setState?

setState() programa una actualización al objeto estado de un componente. Cuando el estado cambia, el componente responde volviendo a renderizar.

¿Cuál es la diferencia entre state y props?

props (abreviatura de ”properties”) y state son objetos planos de JavaScript. Mientras ambos contienen información que influye en el resultado del render, son diferentes debido a una importante razón: props se pasa al componente (similar a los parámetros de una función) mientras que state se administra dentro del componente (similar a las variables declaradas dentro de una función).

Aquí hay algunos buenos recursos para leer más sobre cuándo usar props vs. estado:

• Props vs State
• ReactJS: Props vs. State

¿Por qué setState me está dando el valor incorrecto?

En React, tanto this.props como this.state representan los valores renderizados, es decir, lo que hay actualmente en la pantalla.

Las llamadas a setState son asíncronas; no te fíes de que this.state refleje el nuevo valor inmediatamente después de llamar a setState. Pasa una función de actualización en lugar de un objeto si necesitas calcular valores en función del estado actual (revisa a continuación para más detalles).

Ejemplo de código que no se comportará como se espera:

incrementCount() {
  // Nota: esto *no* funcionará como se espera.
  this.setState({count: this.state.count + 1});
}

handleSomething() {
  // Digamos que `this.state.count` se inicia en 0.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();
  // Cuando React rerenderiza el componente, `this.state.count` será 1, pero tu esperabas 3.

  // Esto es porque la función anterior `incrementCount()` lee de `this.state.count`,
  // pero React no actualiza `this.state.count` hasta que el componente se vuelve a renderizar.
  // Entonces `incrementCount()` termina leyendo `this.state.count` como 0 cada vez, y lo establece a 1.

  // ¡La solución se describe a continuación!
}

Ve a continuación cómo solucionar este problema.

¿Cómo actualizo el estado con valores que dependen del estado actual?

Pasa una función en lugar de un objeto a setState para asegurarte de que la llamada siempre use la versión más actualizada del estado (ver más abajo).