Actualmente en el inmenso ecosistema de Herramientas Frontend creo que hay un proyecto que vale la pena ponerle atencion, y más si ere desarrollador de React. En este caso estoy hablando de React Query, que es parte de un proyecto llamado TanStack el cual esta creando bibliotecas muy utiles para frameworks Frontend como React, Vue, Svelte y Solidjs.
¿Qué es TanStack?
Y esto es porque desde hace algunos años atras una biblioteca que se ha estado haciendo cada vez más popular en el ecosistema de React ha sido React Query, esta permite solicitar datos desde el servidor (fetch data), establecer un estado, guardarlos en memoria cache y actualizarlos cuando se necesite.
Es decir en lugar de usar fecth, en un useEffect y cargar datos en un estado (useState), manejar errores, el estado de carga de datos y su almacenaje.
function Todos() {
const [data, setData] = useState();
const [status, setStatus] = useState();
const [errorMsg, setErrorMsg] = useState();
useEffect(() => {
async function manageRequest() {
setStatus("loading");
try {
const todosData = await requestTodos();
setData(todosData);
setStatus("success");
} catch (e) {
setStatus("failed");
setErrorMsg(e.msg);
}
}
manageRequest();
}, []);
if (status === "loading") {
return <span>Loading...</span>;
}
if (status === "error") {
return <span>Error: {errorMsg}</span>;
}
return (
<div className="list-wrapper">
{data.map((todo) => (
<Todo todo={todo} />
))}
</div>
);
}
Podemos pasar a usar esto:
const requestTodos = () => fetch("/todos");
function Todos() {
const { data, status, error } = useQuery(["todos"], requestTodos);
if (status === "loading") <span>Loading...</span>;
if (status === "error") <span>Error: {error.message}</span>;
return (
<div className="list-wrapper">
{data.map((todo) => (
<Todo todo={todo} />
))}
</div>
);
}
lo que nos permite hacer exactamente lo mismo pero con código que es mucho más limpio, facil y ordernado de mantener, ademas este no tienen ninguna opinion en como solicitar datos. (puedes usar fetch o axios (o graphQL).
Esta biblioteca tambien fue necesaria porque establecer datos en una memoria cache, evitar duplicacion de peticiones, saber cuando los datos estan desactualizados, o reflejar cambios lo más rapido posible, puede ser una tarea laborioza de hacer en cada aplicación. Asi que React Query simplifica esto enormenente.
La biblioteca no es un reemplazo a fetch o axios, de hecho puedes usarlo con estos, sino ofrece hooks sencillos para solicitar datos (useQuery) para modificar datos (useMutation) y funciones para poder actualizar la memoria cache (QueryCache), y tampoco es un reemplazo a manejadores de estado locales, como useContext con useReducer, MobX, Redux, Zustand o similares, sino que te permite usar incluso el estado que le pertenece al cliente y el estado que viene desde el servidor asincronamente.
Es decir puedes usar React Query en conjunto con esto otros manejadores de estado. Algo comun es ver por ejemplo a React Query junto a Zustand o bibliotecas similares. Juntos serian una alternativa a Redux Toolkit, que ofrece lo mismo. Solo que React query es mucho más facil de usarlo, de hecho tambien funciona con GraphQL, similar a bibliotecas como Apollo.
React QUeyr tambien provee una herramienta de Debugging que te permite debuggear tus peticiones facilmente en desarrollo, llamada React Query DevTools
Y como al proyecto le fue tan bien, actualmente ya no solo funciona con React sino tambien con Frameworks como Vue, Svelte y Solid. De hecho paso de nombrarse React Query a TanStack Query.
Esto porque ahora bajo el nombre de TanStack tambien estan desarrollando otras bibliotecas que son tipicamente necesarias en cualquier aplicacion, como:
- TanStack Table la cual permite integrar tablas y Datagrids en tus proyectons frontend, que a difirencia de AG-Grid que ya provee funcionalidades, estilos y todo el markup hecho, React table es una biblioteca headless, es decir que construyes solo con las funciones que necesitas tu tabla, añadiendo tu propio diseño y estilos, haciendo que tengas que escribir más codigo, pero haciendo que tu web sea más ligera al solo usar lo que necesitas.
- Tanstack Virtual una biblioteca para controlar elementos que se veran en pantalla cuando estos son muchos
- tanstack Router, Esta biblioteca es un enrutador para frontend, similar a proyectos como react-router-dom en React, vue-router, svelte-router-spa, y asi. Solo que de momento aun esta en desarrollo, por lo que solo puede usarse para React, pero ya estan implementandolo para otros frameworks. Lo interesante de esta biblioteca es que como esta basada en Typescript, permite definir los tipos de datos tambien de nuestras rutas, parametros, ademas de guardar en memoria cache los datos que se pasen de un lado a otro, haciendo no solo las transiciones de pagina mas rapido sino más fáciles de desarrollar.
y otras bibliotecas que de momento estan solo para react pero estan trarabajando para sopotar más frameworks como React Charts, React Ranger para crear graficos en el frontend.
Este tipo de biblitoeca agnosticas siempre son uan muy buena opcion, sobre todo para aquellos equipos de desarrolladores que usan distintos frmaeworks y no quieren empezar desde cero con otra biblioteca. Y Si aun no lo has probado dejo algunos tutoriales usandolo en la descripcion.
