Integrar un store de favoritos en la UI
Hasta ahora hemos creado stores y aprendido a consumir estado global en React. En esta clase damos un paso más y lo llevamos a la interfaz de usuario, integrando un sistema de favoritos real que se comparte entre distintas partes de la aplicación.
Verás cómo mostrar información global en el header, cómo modificar ese estado desde componentes internos y, sobre todo, cómo evitar rerenderizados innecesarios cuando trabajamos con stores.
Objetivo de la clase
Queremos construir una experiencia completa de favoritos:
- Mostrar el número de favoritos en el header.
- Permitir marcar y desmarcar elementos como favoritos.
- Compartir el estado entre distintas páginas.
- Optimizar la UI para que solo se renderice lo necesario.
Mostrar favoritos en el header
El primer paso es usar el store de favoritos en el header.
La idea es sencilla:
- Solo mostrar la sección de favoritos si el usuario ha iniciado sesión.
- Mostrar un icono de corazón junto al número de favoritos.
- Mantener este contador sincronizado automáticamente.
El header se convierte así en un consumidor del estado global, reaccionando a cualquier cambio en el store sin lógica adicional.
Añadir favoritos desde una tarjeta
El siguiente paso es permitir modificar el estado.
En cada tarjeta (por ejemplo, un JobCard) añadimos:
- Un botón para marcar o desmarcar como favorito.
- Una comprobación para saber si ese elemento ya es favorito.
- Una acción que haga toggle del estado en el store.
Al hacer click:
- El estado global cambia.
- El contador del header se actualiza automáticamente.
- La UI refleja el nuevo estado sin wiring manual.
Esto demuestra una de las grandes ventajas del estado global bien diseñado.
El problema de los rerenderizados
Aquí aparece un problema clásico.
Si un componente grande:
- Lee todo el estado del store.
- Y además renderiza muchos elementos.
Entonces, cada cambio en el store provoca un rerender completo, aunque solo cambie una parte pequeña de la UI.
En el ejemplo:
- Al marcar un favorito.
- Se rerenderiza toda la tarjeta.
- Aunque solo cambie el botón de favoritos.
Esto no escala bien.
Extraer componentes para optimizar
La solución es estructural, no mágica.
Extraemos un componente específico, por ejemplo:
FavoriteButton
Este componente:
- Es el único que lee el estado de favoritos.
- Solo se rerenderiza cuando cambia esa parte concreta del store.
- El resto de la tarjeta permanece intacta.
La clave es esta:
Cada componente debería leer solo el estado que realmente necesita.
Así conseguimos:
- Menos rerenders.
- UI más predecible.
- Mejor rendimiento.
Buenas prácticas con estado global
De esta clase te llevas varias ideas importantes:
- No hagas componentes todopoderosos que lean todo el store.
- Extrae componentes pequeños y específicos.
- Consume el estado lo más abajo posible en el árbol.
- El estado global no es el problema, la estructura sí.
Qué has aprendido
Al terminar esta clase sabes:
- Integrar un store real en la UI.
- Mostrar información global en el header.
- Modificar estado desde distintos puntos.
- Detectar y corregir problemas de rendimiento.
- Diseñar componentes que escalan mejor.
En la siguiente clase seguiremos profundizando en cómo estructurar stores para aplicaciones grandes y evitar errores comunes cuando el estado global empieza a crecer.