Problem

The tags list page was experiencing an infinite re-render loop that caused:
- Console flooding with debug messages
- Performance degradation
- Excessive React re-renders on every frame

Root Cause

The columns configuration object in TagsList.tsx was being created inline on every render:

  usePaginatedSortableTable(filteredTags, {
    columns: {
      2: (item: Tag) => item.name,
      4: (item: Tag) => item.size || 0,
      // ... etc
    }
  })

This created a new object reference on every render, which triggered the following cascade:
1. New columns object created
2. usePaginatedSortableTable hook recalculates (columns in dependency array)
3. New sortedTags array reference returned
4. useEffect monitoring sortedTags triggers
5. setManifestTrackData called
6. Component re-renders → back to step 1

Solution

Memoized the columns configuration using useMemo to create a stable reference:

  const tableColumns = useMemo(
    () => ({
      2: (item: Tag) => item.name,
      4: (item: Tag) => item.size || 0,
      5: (item: Tag) => item.last_modified,
      6: (item: Tag) => item.expiration || '',
      7: (item: Tag) => item.manifest_digest,
    }),
    [],
  );