Ya sabes tocar el DOM: buscas un nodo, cambias su texto, escondes otro. Funciona con una web pequeña. El problema aparece cuando lo mismo se muestra en tres sitios a la vez.
Con JavaScript a pelo, cada vez que un dato cambia eres tú quien tiene que ir a mano a cada rincón de la pantalla y dejarlo igual que el dato. Un carrito, su contador en la cabecera, el total al pie: tres sitios que mantener a la vez. Se te olvida uno y la pantalla miente.
React le da la vuelta al trabajo. Tú describes cómo se ve la pantalla para unos datos, y cuando los datos cambian, React se encarga de repintar. Dejas de perseguir nodos a mano.
El trabajo pesado no es dibujar una vez: es mantener lo que se ve igual que los datos según pasa el tiempo. Eso es lo que React hace por ti.
Un ejemplo del dolor: una tienda muestra el carrito en tres sitios —el icono con el número arriba, el panel lateral y el total al pagar—. Añades un producto y tienes que acordarte de tocar los tres a mano. El día que añades un cuarto sitio y olvidas uno, el número de arriba dice 3 y el total cobra 2. La pantalla miente y el usuario desconfía.
A mano
Cambias el dato y luego persigues cada sitio: contador.textContent = n, total.textContent = …. Olvidas uno y se descuadra.
Con React
Cambias el dato una vez con setN y los tres sitios que lo leen se repintan solos. No hay nada que perseguir.
React no es magia gratis: el coste es aprender a pensar en «estado que se repinta» en vez de «nodos que toco». A cambio, dejas de tener bugs de pantallas que no cuadran, que son los más difíciles de encontrar.
Cuándo no hace falta: una página informativa de tres secciones, sin datos que cambien, no necesita React. Ahí bastan HTML y un poco de CSS, y React solo añade peso. React entra cuando hay estado que evoluciona y se ve en varios sitios.
En una línea
- El problema real no es dibujar: es mantener la pantalla igual que los datos con el tiempo.
- A mano persigues cada sitio; con React cambias el dato y se repinta solo.
- Sin estado que cambie en varios sitios, React sobra.
Y lo hace con una idea sola, que es la del curso entero: la pantalla se parte en trozos, y cada trozo es una función. En la próxima lección: un componente es una función.