remove memoization from individual table columns

- causes issues with drag/drop state

src/renderer/components/item-list/item-table-list/columns/actions-column.tsx

@@ -1,5 +1,3 @@
-import { memo } from 'react';
-
 import {
     ItemTableListInnerColumn,
     TableColumnContainer,
@@ -7,7 +5,7 @@ import {
 import { ItemListItem } from '/@/renderer/components/item-list/types';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 
-const ActionsColumnBase = (props: ItemTableListInnerColumn) => {
+export const ActionsColumn = (props: ItemTableListInnerColumn) => {
     const row: any = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
 
     const handleActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -53,16 +51,3 @@ const ActionsColumnBase = (props: ItemTableListInnerColumn) => {
 
     return <TableColumnContainer {...props}>&nbsp;</TableColumnContainer>;
 };
-
-export const ActionsColumn = memo(ActionsColumnBase, (prevProps, nextProps) => {
-    const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
-    const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
-
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevItem === nextItem
-    );
-});

src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import { memo } from 'react';
 
 import styles from './album-artists-column.module.css';
 
@@ -54,14 +53,4 @@ const AlbumArtistsColumn = (props: ItemTableListInnerColumn) => {
     return <ColumnSkeletonVariable {...props} />;
 };
 
-export const AlbumArtistsColumnMemo = memo(AlbumArtistsColumn, (prevProps, nextProps) => {
+export { AlbumArtistsColumn };
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.size === nextProps.size
-    );
-});
-
-export { AlbumArtistsColumnMemo as AlbumArtistsColumn };

src/renderer/components/item-list/item-table-list/columns/album-column.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 import { generatePath, Link } from 'react-router';
 
 import styles from './album-column.module.css';
@@ -75,18 +75,4 @@ const AlbumColumn = (props: ItemTableListInnerColumn) => {
     return <ColumnSkeletonVariable {...props} />;
 };
 
-export const AlbumColumnMemo = memo(AlbumColumn, (prevProps, nextProps) => {
+export { AlbumColumn };
-    const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
-    const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
-
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.size === nextProps.size &&
-        prevItem === nextItem
-    );
-});
-
-export { AlbumColumnMemo as AlbumColumn };

src/renderer/components/item-list/item-table-list/columns/artists-column.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Fragment, memo, useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import { generatePath, Link } from 'react-router';
 
 import styles from './album-artists-column.module.css';
@@ -109,15 +109,4 @@ const BaseArtistsColumn = (props: ItemTableListInnerColumn) => {
     }
 };
 
-const ArtistsColumnMemo = memo(BaseArtistsColumn, (prevProps, nextProps) => {
+export { BaseArtistsColumn as ArtistsColumn };
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.itemType === nextProps.itemType &&
-        prevProps.size === nextProps.size
-    );
-});
-
-export { ArtistsColumnMemo as ArtistsColumn };

src/renderer/components/item-list/item-table-list/columns/composer-column.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import { memo } from 'react';
 
 import styles from './composer-column.module.css';
 
@@ -12,7 +11,7 @@ import {
 import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { Album, RelatedArtist, Song } from '/@/shared/types/domain-types';
 
-const ComposerColumn = (props: ItemTableListInnerColumn) => {
+export const ComposerColumn = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
     const item = rowItem as Album | Song | undefined;
 
@@ -44,19 +43,3 @@ const ComposerColumn = (props: ItemTableListInnerColumn) => {
 
     return <ColumnSkeletonVariable {...props} />;
 };
-
-export const ComposerColumnMemo = memo(ComposerColumn, (prevProps, nextProps) => {
-    const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
-    const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
-
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.size === nextProps.size &&
-        prevItem === nextItem
-    );
-});
-
-export { ComposerColumnMemo as ComposerColumn };

src/renderer/components/item-list/item-table-list/columns/date-column.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import {
     ColumnNullFallback,
@@ -62,14 +62,7 @@ const DateColumnBase = (props: ItemTableListInnerColumn) => {
     return <ColumnSkeletonFixed {...props} />;
 };
 
-export const DateColumn = memo(DateColumnBase, (prevProps, nextProps) => {
+export const DateColumn = DateColumnBase;
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns
-    );
-});
 
 const AbsoluteDateColumnBase = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
@@ -152,15 +145,7 @@ const AbsoluteDateColumnBase = (props: ItemTableListInnerColumn) => {
     return <ColumnSkeletonFixed {...props} />;
 };
 
-export const AbsoluteDateColumn = memo(AbsoluteDateColumnBase, (prevProps, nextProps) => {
+export const AbsoluteDateColumn = AbsoluteDateColumnBase;
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.type === nextProps.type
-    );
-});
 
 const RelativeDateColumnBase = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
@@ -193,11 +178,4 @@ const RelativeDateColumnBase = (props: ItemTableListInnerColumn) => {
     return <ColumnSkeletonFixed {...props} />;
 };
 
-export const RelativeDateColumn = memo(RelativeDateColumnBase, (prevProps, nextProps) => {
+export const RelativeDateColumn = RelativeDateColumnBase;
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns
-    );
-});

src/renderer/components/item-list/item-table-list/columns/default-column.tsx

@@ -1,5 +1,3 @@
-import { memo } from 'react';
-
 import {
     ColumnNullFallback,
     ColumnSkeletonFixed,
@@ -7,7 +5,7 @@ import {
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 
-const DefaultColumnBase = (props: ItemTableListInnerColumn) => {
+export const DefaultColumn = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
     const row: any | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];
 
@@ -21,12 +19,3 @@ const DefaultColumnBase = (props: ItemTableListInnerColumn) => {
 
     return <ColumnSkeletonFixed {...props} />;
 };
-
-export const DefaultColumn = memo(DefaultColumnBase, (prevProps, nextProps) => {
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns
-    );
-});

src/renderer/components/item-list/item-table-list/columns/duration-column.tsx

@@ -1,5 +1,5 @@
 import formatDuration from 'format-duration';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
 import {
     ColumnNullFallback,
@@ -27,11 +27,4 @@ const DurationColumnBase = (props: ItemTableListInnerColumn) => {
     return <ColumnSkeletonFixed {...props} />;
 };
 
-export const DurationColumn = React.memo(DurationColumnBase, (prevProps, nextProps) => {
+export const DurationColumn = DurationColumnBase;
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns
-    );
-});

src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx

@@ -1,5 +1,3 @@
-import { memo } from 'react';
-
 import {
     ItemTableListInnerColumn,
     TableColumnContainer,
@@ -9,7 +7,7 @@ import { useIsMutatingCreateFavorite } from '/@/renderer/features/shared/mutatio
 import { useIsMutatingDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 
-const FavoriteColumnBase = (props: ItemTableListInnerColumn) => {
+export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
     const row: boolean | undefined = rowItem?.[props.columns[props.columnIndex].id];
 
@@ -57,19 +55,3 @@ const FavoriteColumnBase = (props: ItemTableListInnerColumn) => {
 
     return <TableColumnContainer {...props}>&nbsp;</TableColumnContainer>;
 };
-
-export const FavoriteColumn = memo(FavoriteColumnBase, (prevProps, nextProps) => {
-    const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
-    const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
-    const prevFavorite = prevItem?.[prevProps.columns[prevProps.columnIndex].id];
-    const nextFavorite = nextItem?.[nextProps.columns[nextProps.columnIndex].id];
-
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevItem === nextItem &&
-        prevFavorite === nextFavorite
-    );
-});

src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 import { generatePath, Link } from 'react-router';
 
 import styles from './genre-badge-column.module.css';
@@ -60,13 +60,4 @@ const GenreBadgeColumn = (props: ItemTableListInnerColumn) => {
     return <ColumnSkeletonVariable {...props} />;
 };
 
-export const GenreColumnMemo = memo(GenreBadgeColumn, (prevProps, nextProps) => {
+export { GenreBadgeColumn };
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns
-    );
-});
-
-export { GenreColumnMemo as GenreBadgeColumn };

src/renderer/components/item-list/item-table-list/columns/genre-column.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Fragment, memo, useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 import { generatePath, Link } from 'react-router';
 
 import styles from './genre-column.module.css';
@@ -64,14 +64,4 @@ const GenreColumn = (props: ItemTableListInnerColumn) => {
     return <ColumnSkeletonVariable {...props} />;
 };
 
-export const GenreColumnMemo = memo(GenreColumn, (prevProps, nextProps) => {
+export { GenreColumn };
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.size === nextProps.size
-    );
-});
-
-export { GenreColumnMemo as GenreColumn };

src/renderer/components/item-list/item-table-list/columns/image-column.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { memo, useState } from 'react';
+import { useState } from 'react';
 
 import styles from './image-column.module.css';
 
@@ -137,17 +137,4 @@ const ImageColumnBase = (props: ItemTableListInnerColumn) => {
     );
 };
 
-export const ImageColumn = memo(ImageColumnBase, (prevProps, nextProps) => {
+export const ImageColumn = ImageColumnBase;
-    const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
-    const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
-
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.itemType === nextProps.itemType &&
-        prevProps.size === nextProps.size &&
-        prevItem === nextItem
-    );
-});

src/renderer/components/item-list/item-table-list/columns/numeric-column.tsx

@@ -1,5 +1,3 @@
-import { memo } from 'react';
-
 import {
     ColumnNullFallback,
     ColumnSkeletonFixed,
@@ -7,7 +5,7 @@ import {
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 
-const NumericColumnBase = (props: ItemTableListInnerColumn) => {
+export const NumericColumn = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
     const row: number | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];
 
@@ -21,12 +19,3 @@ const NumericColumnBase = (props: ItemTableListInnerColumn) => {
 
     return <ColumnSkeletonFixed {...props} />;
 };
-
-export const NumericColumn = memo(NumericColumnBase, (prevProps, nextProps) => {
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns
-    );
-});

src/renderer/components/item-list/item-table-list/columns/path-column.tsx

@@ -1,5 +1,3 @@
-import { memo } from 'react';
-
 import {
     ColumnNullFallback,
     ColumnSkeletonVariable,
@@ -7,7 +5,7 @@ import {
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 
-const PathColumnBase = (props: ItemTableListInnerColumn) => {
+export const PathColumn = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
     const row: string | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];
 
@@ -25,12 +23,3 @@ const PathColumnBase = (props: ItemTableListInnerColumn) => {
 
     return <ColumnSkeletonVariable {...props} />;
 };
-
-export const PathColumn = memo(PathColumnBase, (prevProps, nextProps) => {
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns
-    );
-});

src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
 
@@ -364,17 +364,4 @@ const PlaylistReorderColumnBase = (props: ItemTableListInnerColumn) => {
     );
 };
 
-export const PlaylistReorderColumn = memo(PlaylistReorderColumnBase, (prevProps, nextProps) => {
+export const PlaylistReorderColumn = PlaylistReorderColumnBase;
-    const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
-    const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
-
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.itemType === nextProps.itemType &&
-        prevProps.enableHeader === nextProps.enableHeader &&
-        prevItem === nextItem
-    );
-});

src/renderer/components/item-list/item-table-list/columns/rating-column.tsx

@@ -1,5 +1,3 @@
-import { memo } from 'react';
-
 import {
     ItemTableListInnerColumn,
     TableColumnContainer,
@@ -8,7 +6,7 @@ import { ItemListItem } from '/@/renderer/components/item-list/types';
 import { useIsMutatingRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
 import { Rating } from '/@/shared/components/rating/rating';
 
-const RatingColumnBase = (props: ItemTableListInnerColumn) => {
+export const RatingColumn = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
     const row: null | number | undefined = rowItem?.[props.columns[props.columnIndex].id];
 
@@ -42,19 +40,3 @@ const RatingColumnBase = (props: ItemTableListInnerColumn) => {
 
     return <TableColumnContainer {...props}>&nbsp;</TableColumnContainer>;
 };
-
-export const RatingColumn = memo(RatingColumnBase, (prevProps, nextProps) => {
-    const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
-    const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
-    const prevRating = prevItem?.[prevProps.columns[prevProps.columnIndex].id];
-    const nextRating = nextItem?.[nextProps.columns[nextProps.columnIndex].id];
-
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevItem === nextItem &&
-        prevRating === nextRating
-    );
-});

src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import { memo } from 'react';
 
 import styles from './row-index-column.module.css';
 
@@ -32,18 +31,7 @@ const RowIndexColumnBase = (props: ItemTableListInnerColumn) => {
     }
 };
 
-export const RowIndexColumn = memo(RowIndexColumnBase, (prevProps, nextProps) => {
+export const RowIndexColumn = RowIndexColumnBase;
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.itemType === nextProps.itemType &&
-        prevProps.enableExpansion === nextProps.enableExpansion &&
-        prevProps.enableHeader === nextProps.enableHeader &&
-        prevProps.startRowIndex === nextProps.startRowIndex
-    );
-});
 
 const DefaultRowIndexColumn = (props: ItemTableListInnerColumn) => {
     const {
@@ -125,30 +113,28 @@ const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
     );
 };
 
-const InnerQueueSongRowIndexColumn = memo(
+const InnerQueueSongRowIndexColumn = (
-    (
+    props: ItemTableListInnerColumn & {
-        props: ItemTableListInnerColumn & {
+        adjustedRowIndex: number;
-            adjustedRowIndex: number;
+        isActive: boolean;
-            isActive: boolean;
+        isPlaying: boolean;
-            isPlaying: boolean;
-        },
-    ) => {
-        return (
-            <TableColumnTextContainer {...props}>
-                {props.isActive ? (
-                    props.isPlaying ? (
-                        <Flex>
-                            <Icon fill="primary" icon="mediaPlay" />
-                        </Flex>
-                    ) : (
-                        <Flex>
-                            <Icon fill="primary" icon="mediaPause" />
-                        </Flex>
-                    )
-                ) : (
-                    props.adjustedRowIndex
-                )}
-            </TableColumnTextContainer>
-        );
     },
-);
+) => {
+    return (
+        <TableColumnTextContainer {...props}>
+            {props.isActive ? (
+                props.isPlaying ? (
+                    <Flex>
+                        <Icon fill="primary" icon="mediaPlay" />
+                    </Flex>
+                ) : (
+                    <Flex>
+                        <Icon fill="primary" icon="mediaPause" />
+                    </Flex>
+                )
+            ) : (
+                props.adjustedRowIndex
+            )}
+        </TableColumnTextContainer>
+    );
+};

src/renderer/components/item-list/item-table-list/columns/size-column.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import {
     ColumnNullFallback,
@@ -27,11 +27,4 @@ const SizeColumnBase = (props: ItemTableListInnerColumn) => {
     return <ColumnSkeletonFixed {...props} />;
 };
 
-export const SizeColumn = memo(SizeColumnBase, (prevProps, nextProps) => {
+export const SizeColumn = SizeColumnBase;
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns
-    );
-});

src/renderer/components/item-list/item-table-list/columns/text-column.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import { memo } from 'react';
 
 import styles from './text-column.module.css';
 
@@ -10,7 +9,7 @@ import {
     TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 
-const TextColumnBase = (props: ItemTableListInnerColumn) => {
+export const TextColumn = (props: ItemTableListInnerColumn) => {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];
     const row: string | undefined = (rowItem as any)?.[props.columns[props.columnIndex].id];
 
@@ -34,13 +33,3 @@ const TextColumnBase = (props: ItemTableListInnerColumn) => {
 
     return <ColumnSkeletonVariable {...props} />;
 };
-
-export const TextColumn = memo(TextColumnBase, (prevProps, nextProps) => {
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.size === nextProps.size
-    );
-});

src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { CSSProperties, memo } from 'react';
+import { CSSProperties } from 'react';
 import { Link } from 'react-router';
 
 import styles from './title-artist-column.module.css';
@@ -208,17 +208,4 @@ const TitleArtistColumnBase = (props: ItemTableListInnerColumn) => {
     }
 };
 
-export const TitleArtistColumn = memo(TitleArtistColumnBase, (prevProps, nextProps) => {
+export const TitleArtistColumn = TitleArtistColumnBase;
-    const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
-    const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
-
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.itemType === nextProps.itemType &&
-        prevProps.size === nextProps.size &&
-        prevItem === nextItem
-    );
-});

src/renderer/components/item-list/item-table-list/columns/title-column.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-import { memo } from 'react';
 import { Link } from 'react-router';
 
 import styles from './title-column.module.css';
@@ -29,20 +28,7 @@ const TitleColumnBase = (props: ItemTableListInnerColumn) => {
     }
 };
 
-export const TitleColumn = memo(TitleColumnBase, (prevProps, nextProps) => {
+export const TitleColumn = TitleColumnBase;
-    const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
-    const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
-
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.itemType === nextProps.itemType &&
-        prevProps.size === nextProps.size &&
-        prevItem === nextItem
-    );
-});
 
 function DefaultTitleColumn(props: ItemTableListInnerColumn) {
     const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex];

src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx

@@ -361,8 +361,6 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
     return <ColumnSkeletonVariable {...props} />;
 };
 
-import { memo } from 'react';
-
 const TitleCombinedColumnBase = (props: ItemTableListInnerColumn) => {
     const { itemType } = props;
 
@@ -377,17 +375,4 @@ const TitleCombinedColumnBase = (props: ItemTableListInnerColumn) => {
     }
 };
 
-export const TitleCombinedColumn = memo(TitleCombinedColumnBase, (prevProps, nextProps) => {
+export const TitleCombinedColumn = TitleCombinedColumnBase;
-    const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
-    const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
-
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevProps.itemType === nextProps.itemType &&
-        prevProps.size === nextProps.size &&
-        prevItem === nextItem
-    );
-});

src/renderer/components/item-list/item-table-list/columns/year-column.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import {
     ColumnNullFallback,
@@ -42,15 +42,4 @@ const YearColumnBase = (props: ItemTableListInnerColumn) => {
     return <ColumnSkeletonFixed {...props} />;
 };
 
-export const YearColumn = memo(YearColumnBase, (prevProps, nextProps) => {
+export const YearColumn = YearColumnBase;
-    const prevItem = prevProps.getRowItem?.(prevProps.rowIndex);
-    const nextItem = nextProps.getRowItem?.(nextProps.rowIndex);
-
-    return (
-        prevProps.rowIndex === nextProps.rowIndex &&
-        prevProps.columnIndex === nextProps.columnIndex &&
-        prevProps.data === nextProps.data &&
-        prevProps.columns === nextProps.columns &&
-        prevItem === nextItem
-    );
-});

src/renderer/components/item-list/item-table-list/item-table-list.tsx

@@ -446,14 +446,16 @@ const VirtualizedTableGrid = ({
                 />
             );
         },
-        [pinnedLeftColumnCount, CellComponent],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [pinnedLeftColumnCount, CellComponent, featureFlags, calculatedColumnWidths],
     );
 
     const PinnedColumnCell = useCallback(
         (cellProps: CellComponentProps & TableItemProps) => {
             return <CellComponent {...cellProps} rowIndex={cellProps.rowIndex + pinnedRowCount} />;
         },
-        [pinnedRowCount, CellComponent],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [pinnedRowCount, CellComponent, featureFlags, calculatedColumnWidths],
     );
 
     const PinnedRightColumnCell = useCallback(
@@ -466,7 +468,15 @@ const VirtualizedTableGrid = ({
                 />
             );
         },
-        [pinnedLeftColumnCount, pinnedRowCount, totalColumnCount, CellComponent],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+            pinnedLeftColumnCount,
+            pinnedRowCount,
+            totalColumnCount,
+            CellComponent,
+            featureFlags,
+            calculatedColumnWidths,
+        ],
     );
 
     const PinnedRightIntersectionCell = useCallback(
@@ -478,7 +488,14 @@ const VirtualizedTableGrid = ({
                 />
             );
         },
-        [pinnedLeftColumnCount, totalColumnCount, CellComponent],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+            pinnedLeftColumnCount,
+            totalColumnCount,
+            CellComponent,
+            featureFlags,
+            calculatedColumnWidths,
+        ],
     );
 
     const RowCell = useCallback(
@@ -491,7 +508,14 @@ const VirtualizedTableGrid = ({
                 />
             );
         },
-        [pinnedLeftColumnCount, pinnedRowCount, CellComponent],
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+            pinnedLeftColumnCount,
+            pinnedRowCount,
+            CellComponent,
+            featureFlags,
+            calculatedColumnWidths,
+        ],
     );
 
     const handleOnCellsRendered = useCallback(