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.

Piénsalo con dos pestañas abiertas del mismo pedido. A mano, cada una lo pidió por su lado y guarda su propia copia; cambias el estado en una y la otra sigue enseñando lo viejo. Con la caché compartida hay una sola copia: la tocas una vez y las dos pestañas se enteran.

A mano

Un useEffect y tres useState por pantalla. Cada una pide por su cuenta, y ninguna se entera de las demás.

Con la librería

Una consulta con su nombre. La caché responde al instante si ya lo tiene, y lo refresca por detrás.

No es para todo. Lo que es tuyo y vive en el navegador —un menú abierto, lo que llevas escrito— sigue en useState. Una librería de datos es para la copia del servidor; meterle el estado del cliente es usar un martillo para un tornillo.

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.

Hoy: cuenta en tu app cuántas pantallas repiten el mismo useEffect de carga. Esas son las que esta librería junta en una sola caché. 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.