TanStack : L'Écosystème Moderne pour React

import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(res => res.json()),
    staleTime: 5 * 60 * 1000, // 5 minutes
    cacheTime: 10 * 60 * 1000, // 10 minutes
  });

  if (isLoading) return <Spinner />;
  if (error) return <ErrorMessage error={error} />;

  return <div>{data.name}</div>;
}

import { useMutation, useQueryClient } from '@tanstack/react-query';

function UpdateUserButton({ userId }) {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: (userData) => 
      fetch(`/api/users/${userId}`, {
        method: 'PUT',
        body: JSON.stringify(userData)
      }),
    onSuccess: () => {
      // Invalide le cache → refetch automatique
      queryClient.invalidateQueries({ queryKey: ['user', userId] });
    },
    // Optimistic update (avant succès serveur)
    onMutate: async (newData) => {
      await queryClient.cancelQueries({ queryKey: ['user', userId] });
      const previous = queryClient.getQueryData(['user', userId]);
      queryClient.setQueryData(['user', userId], newData);
      return { previous }; // rollback si erreur
    },
    onError: (err, variables, context) => {
      // Rollback en cas d'erreur
      queryClient.setQueryData(['user', userId], context.previous);
    },
  });

  return (
    <button onClick={() => mutation.mutate({ name: 'John' })}>
      {mutation.isPending ? 'Updating...' : 'Update User'}
    </button>
  );
}

import { 
  useReactTable, 
  getCoreRowModel, 
  getSortedRowModel,
  getFilteredRowModel,
  flexRender 
} from '@tanstack/react-table';

function UsersTable() {
  const columns = [
    { accessorKey: 'name', header: 'Nom' },
    { accessorKey: 'email', header: 'Email' },
    { 
      accessorKey: 'role', 
      header: 'Rôle',
      filterFn: 'equals' // filtre custom
    },
  ];

  const table = useReactTable({
    data: users,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(), // active tri
    getFilteredRowModel: getFilteredRowModel(), // active filtres
  });

  return (
    <table className="w-full border-collapse">
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map(header => (
              <th 
                key={header.id}
                onClick={header.column.getToggleSortingHandler()}
                className="cursor-pointer hover:bg-gray-100 p-3"
              >
                {flexRender(header.column.columnDef.header, header.getContext())}
                {{ asc: ' 🔼', desc: ' 🔽' }[header.column.getIsSorted()]}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id} className="p-3 border-t">
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

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

// Route avec loader type-safe
const userRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/users/$userId',
  loader: async ({ params }) => {
    // params.userId est 100% typé
    const user = await fetchUser(params.userId);
    return { user };
  },
  component: UserProfile,
});

function UserProfile() {
  const { user } = userRoute.useLoaderData();
  // user est typé automatiquement !
  return <div>{user.name}</div>;
}

// Navigation type-safe
import { Link } from '@tanstack/react-router';

<Link 
  to="/users/$userId" 
  params={{ userId: '123' }} // TypeScript valide userId !
>
  View User
</Link>

import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualList({ items }) {
  const parentRef = React.useRef();

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50, // hauteur estimée par item (px)
  });

  return (
    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
      <div
        style={{
          height: `${virtualizer.getTotalSize()}px`,
          position: 'relative',
        }}
      >
        {virtualizer.getVirtualItems().map(virtualRow => (
          <div
            key={virtualRow.index}
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: `${virtualRow.size}px`,
              transform: `translateY(${virtualRow.start}px)`,
            }}
          >
            {items[virtualRow.index].name}
          </div>
        ))}
      </div>
    </div>
  );
}