Estados locales con useState

Un estado local en un componente es como la “memoria” de este.

Los componentes regularmente necesitan cambiar lo que muestran en pantalla como resultado de una interacción del usuario.

Cuando no teníamos React, lo hacíamos explícitamente con vanilla JavaScript, pero ahora dejamos que React se encargue. ¿Cómo?, con su memoria local a la que llamamos: state (estado).

Por eso, en esta lección aprenderás:

1. Cómo agregar un estado local a un componente con el hook useState
2. Cómo se usa useState
3. Cómo agregar más de un estado
4. Porqué le llamamos estado local

Un estado no es una variable común

Un estado generado con el hook useState está íntimamente ligado al VirtualDom de React, lo que le permite actualizar el UI con base en este estado.

En otras palabras, si cambiamos el estado, entonces React cambia el UI que usa ese estado. Veámoslo con un ejemplo:

import { useState } from 'react';

Para crear un estado, importaremos useState desde React.

const [index, setIndex] = useState(0);

Cuando invocamos useState en un componente, es importante recordar que este devolvera una tupla (una tupla es un par de valores, dos y solo dos siempre, y regularmente son entregados en un array).

El primer elemento de la tupla es el valor contenido en el estado, mientras que el segundo elemento del array es la función que actualiza ese estado.

👀 Los nombres de los elementos de esta tupla los puedes definir a placer, pero es una convención utilizar la palabra set antes del nombre del segundo elemento, pero con camelCase. [state,setState].

Un componente completo se vería así:

import { useState } from "react";

export default function Tabs() {
  const [index, setIndex] = useState(0);
  return (
    <div>
      <button onClick={() => setIndex(0)}>Tab1</button>
      <button onClick={() => setIndex(1)}>Tab2</button>
      <button onClick={() => setIndex(2)}>Tab3</button>
      <section>
        {index === 0 && <p>Contenido de la tab1</p>}
        {index === 1 && <p>Contenido de la tab2</p>}
        {index === 2 && <p>Contenido de la tab3</p>}
      </section>
    </div>
  );
}

Puedes observar que solo se mostrará el contenido de la tab seleccionada. A esto también se le llama “conditional rendering”.

¿Qué son los Hooks en React?

Cualquier función en react que comience con la palabra use, es llamado Hook.

Los hooks son funciones especiales que en ingles hacen: “hook into” beneficios de React. 🤔

Como libre interpretación personal diría que, te permiten “colgarte” de ciertas funciones en React que antes estaban disponibles solo para los componentes de clase (class).

👀 Como cuando de morrillo (chamaco (niñito pues)) jugabas con esos pescaditos de imán a los que “enganchabas” con una cañita de juguete. 🫠

El hook useState puede recibir diferentes tipos de valores o estructuras:

export default function Carousel() {
  const [index, setIndex] = useState(0);
  const [showFullScreen, setShowFullScreen] = useState(false);
  const [config, setConfig] = useState({theme:"dark",name:"blissmo"});
// ...

Toma nota de dos cosas aquí: Podemos usar useState cuantas veces queramos en un componente y useState puede almacenar cualquier tipo de datos que necesitemos.

En este componente, mostraremos un carrusel de imágenes, y necesitamos la “memoria” de cual imagen se está mostrando actualmente.

Este dato lo almacenaremos en index. Así, React podrá cambiar el UI por nosotros y mostrar la imagen adecuada.

👀 Los Hooks tienen algunas reglas que debes seguir al usarlos, por ejemplo: siempre debes invocarlos al principio del bloque de la función en el componente. Más sobre estas reglas aquí.

También usamos un boolean para saber si el usuario quiere ver la imagen en pantalla completa. Si showFullScreen es verdadero, React cambiará el UI de nuevo.

Esta es la manera correcta de cambiar el UI de nuestros componentes, usando estados locales.

¿Por qué se llaman estados locales?

Los estados de los componentes están aislados y son privados para cada componente.

No tienes que preocuparte al usar dos componentes uno al lado del otro, de que sus estados se mezclen. Sus estados están aislados, cada componente mostrará diferente información y se actualizará adecuadamente. El cambio en uno, no afecta al otro.

export default function Page() {
  return (
    <div className="Page">
      <Carousel />
      <Carousel />
    </div>
  );
}

Esto es también consecuencia de que los estados en React son muy distintos de una variable regular.

Así que recuerda utilizar useState cuando necesites una variable, una pequeña memoria interna para el componente.

No te preocupes si esto no queda 100% claro ahora mismo, utilizaremos useState en más ejemplos en las próximas lecciones y seguro esto (que también es parte del núcleo de React) te quedará más que claro con la práctica. 🤓

Enlaces relacionados

Hooks en los docs oficiales