Monday with Gazar — Issue #6

Exploring the Power of TanStack (August 2025) - Modern Frontend Libraries That Scale — Now with TanStack DB

TanStack has been a game-changer in frontend development, providing powerful headless libraries like react-query, react-table, and now an exciting new tool: TanStack DB.

🔧 What is TanStack?

TanStack is a suite of headless UI libraries built for framework-agnostic, scalable apps.

• TanStack Query: Fetch, cache, and sync async data effortlessly, (I love this one)

• TanStack Table Powerful, customizable table logic (Best Table Ever)

• TanStack Router Type-safe, framework-agnostic routing (Not sure, I prefer React Router )

• TanStack Virtual Virtualization for large lists

• TanStack DB ⚡ New: Local-first, reactive database, (Fancy!)

📦 1. TanStack Query – Think beyond fetch()

It’s beautiful piece of code, fetch your todos, and you get data, isLoading and many other features out of the box.

import { useQuery } from '@tanstack/react-query';
function Todos() {
  const { data, isLoading } = useQuery({
    queryKey: ['todos'],
    queryFn: () => fetch('/api/todos').then(res => res.json()),
  });
  if (isLoading) return <span>Loading...</span>;
  return <ul>{data.map(todo => <li key={todo.id}>{todo.title}</li>)}</ul>;
}

👉 Perfect for apps with APIs or microservices.

📊 2. TanStack Table – Customizable tables without limits

I guess if I had a chance to develop a table component, and spend months on it, I would probably get it some sort of similar to this component.

However, if you are designing a table component, are you expert enough to oversee everything? is your component reusable enough? if you are thinking about it, it means no, so better to just use TanStack Table.

const table = useReactTable({
  data: users,
  columns: [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'email', header: 'Email' },
  ],
  getCoreRowModel: getCoreRowModel(),
});

return (
  <table>
    <thead>
      {table.getHeaderGroups().map(headerGroup => (
        <tr key={headerGroup.id}>
          {headerGroup.headers.map(header => <th key={header.id}>{header.column.columnDef.header}</th>)}
        </tr>
      ))}
    </thead>
    <tbody>
      {table.getRowModel().rows.map(row => (
        <tr key={row.id}>
          {row.getVisibleCells().map(cell => <td key={cell.id}>{cell.renderCell()}</td>)}
        </tr>
      ))}
    </tbody>
  </table>
);

🧭 3. TanStack Router – Type-safe routing for your app

It is nice, it does the job, you need to get to really detail level of code to understand the difference between this and React Router, I would bet on React Router compare this, not because this is not great, but because the community behind React Router or the main community, they are driving the React and new tools. and most companies are using that. so I’d say, I would stick to React Router.

import { createRouter, RouterProvider } from '@tanstack/react-router';

const routeTree = rootRoute.addChildren([
  new Route({ path: '/', component: Home }),
  new Route({ path: '/about', component: About }),
]);

const router = createRouter({ routeTree });

<RouterProvider router={router} />;