CodeForjaEntrar
Datos con TanStack Query

El problema que resuelve una librería de datos

Deja de escribir el mismo useEffect

Muestra gratuita25 puntos

En «React cuando la app crece» separaste el estado del servidor del cliente, y viste que una petición tiene cuatro finales: cargando, datos, vacío y error. Ahora el paso siguiente: dejar de escribir ese código a mano en cada pantalla.

El patrón de siempre es un useEffect que pide datos, dos o tres useState para cargando, datos y error, y un fetch dentro. Funciona en una pantalla. En veinte, cada una repite lo mismo, y ninguna se entera de lo que ya pidió la de al lado.

A mano pantalla: su fetch pantalla: su fetch pantalla: su fetch nadie comparte Con librería pantalla pantalla pantalla una caché

Peor aún: dos pantallas que muestran el mismo pedido lo piden dos veces. Si una lo cambia, la otra sigue enseñando lo viejo. Y nada se refresca cuando vuelves a la pestaña.

Una librería de datos de servidor —TanStack Query, antes React Query— resuelve eso una vez y para todas. Guarda cada respuesta en una caché compartida, sabe cuándo un dato ha envejecido, lo vuelve a pedir solo y reparte la misma copia a todas las pantallas que lo usan.

Tú dices qué dato quieres y cómo se pide. La librería se encarga de la caché, la espera, el error y el refresco. El useEffect de datos desaparece.

En lo que viene: la clave que identifica cada dato, cuándo se considera viejo, cómo se pone al día solo, cómo cambiarlo sin recargar, y cómo paginar sin parpadeos.