setState? setState() programa una actualización al objeto estado de un componente. Cuando el estado cambia, el componente responde volviendo a renderizar.
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:
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:
\nincrementCount() {\n // Nota: esto *no* funcionará como se espera.\n this.setState({count: this.state.count + 1});\n}\n\nhandleSomething() {\n // Digamos que `this.state.count` se inicia en 0.\n this.incrementCount();\n this.incrementCount();\n this.incrementCount();\n // Cuando React rerenderiza el componente, `this.state.count` será 1, pero tu esperabas 3.\n\n // Esto es porque la función anterior `incrementCount()` lee de `this.state.count`,\n // pero React no actualiza `this.state.count` hasta que el componente se vuelve a renderizar.\n // Entonces `incrementCount()` termina leyendo `this.state.count` como 0 cada vez, y lo establece a 1.\n\n // ¡La solución se describe a continuación!\n}Ve a continuación cómo solucionar este problema.
\nPasa 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).
setState? Pasar una función de actualización te permite acceder al valor del estado actual dentro del actualizador. Dado que las llamadas a setState son por lotes, esto te permite encadenar actualizaciones y asegurarte de que se construyan una encima de otra en lugar de generar conflictos:
incrementCount() {\n this.setState((state) => {\n // Importante: lee `state` en vez de `this.state` al actualizar.\n return {count: state.count + 1}\n });\n}\n\nhandleSomething() {\n // Digamos que `this.state.count` inicia en 0.\n this.incrementCount();\n this.incrementCount();\n this.incrementCount();\n\n // Si lees `this.state.count` ahora, aún sería 0.\n // Pero cuando React vuelva a renderizar el componente, será 3.\n}setState es asíncrono? Actualmente, setState es asíncrono dentro de los controladores de eventos.
Esto garantiza, por ejemplo, que si Parent y Child llaman a setState durante un evento de click, Child no se renderiza dos veces. En su lugar, React “vacía” las actualizaciones del estado al final del evento del navegador. Esto se traduce en mejoras significativas de rendimiento en aplicaciones más grandes.
Este es un detalle de implementación, así que evita confiar en él directamente. En las versiones futuras, React realizará actualizaciones por lotes por defecto en más casos.
\nthis.state de forma sincrónica? Como se explicó en la sección anterior, React intencionalmente “espera” hasta que todos los componentes llamen a setState() en sus controladores de eventos antes de comenzar a rerenderizar. Esto aumenta el rendimiento al evitar rerenderizados innecesarios.
Sin embargo, es posible que aún te estés preguntando por qué React no solo actualiza ‘this.state’ inmediatamente sin volver a renderizar.
\nHay dos razones principales:
\nprops y state, causando problemas que son muy difíciles de depurar.Este comentario de GitHub profundiza en los ejemplos específicos.
\nEs una buena idea conocer primero React, antes de agregar bibliotecas adicionales. Puedes construir aplicaciones bastante complejas usando solo React.
","frontmatter":{"title":"Estado del componente","next":null,"prev":null},"fields":{"path":"content/docs/faq-state.md","slug":"docs/faq-state.html"}}},"pageContext":{"slug":"docs/faq-state.html"}},"staticQueryHashes":[]}