4. ¿Qué son los componentes con estado?

Cuando desarrollas aplicaciones necesitas poder interactuar con el usuario y tener cómo responder a sus movimientos independientemente de la plataforma. En el desarrollo web, necesitas comunicarte con fuentes externas para obtener información en determinado momento, actualizar los datos del usuario globalmente en caso de que lleguen a cambiar e incluso permitir o prohibir el acceso a ciertas rutas.

El estado en React.js

En esta clase entenderás cómo usar el estado, se trata de un almacenamiento local para guardar los datos que el componente necesita. Ten en cuenta que es completamente mutable, por lo que puedes cambiarlo en cualquier momento.

Por ejemplo, un componente Car puede tener distintas características como el modelo, la marca, tiempo de uso, entre otras cosas. El estado permite almacenar estos datos dentro del componente, mostrarlos dentro del mismo y cambiarlos fácilmente.

¿Cómo usarlo?

Hay formas distintas de escribir el estado, dependiendo de si es un componente funcional o de clase. Para el caso de los componentes de clase usaremos el hook useState() (aprenderás más sobre los hooks próximamente, en el Nivel 2 de este curso, ¡Suscríbete!).

De modo de que para declarar una variable que hará parte del estado simplemente basta con que inicialices una nueva variable dentro de tu componente.

const [state, setState] = useState(initialState)

Durante el renderizado inicial, el estado devuelto, es decir, state es el mismo que el valor pasado como primer argumento (initialState). La función setState se usa para actualizar el estado; acepta un nuevo valor de estado y sitúa en la cola una nueva renderización del componente.

Así retomando el ejemplo de un componente Car, se escribiría tal que: