diff --git a/src/renderer/components/item-list/item-table-list/columns/actions-column.tsx b/src/renderer/components/item-list/item-table-list/columns/actions-column.tsx index 29ddef595..c6aa14fb8 100644 --- a/src/renderer/components/item-list/item-table-list/columns/actions-column.tsx +++ b/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) => { @@ -53,16 +51,3 @@ const ActionsColumnBase = (props: ItemTableListInnerColumn) => { return  ; }; - -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 - ); -}); diff --git a/src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx b/src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx index 527bbc93a..f690a2037 100644 --- a/src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx +++ b/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 ; }; -export const AlbumArtistsColumnMemo = memo(AlbumArtistsColumn, (prevProps, nextProps) => { - 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 }; +export { AlbumArtistsColumn }; diff --git a/src/renderer/components/item-list/item-table-list/columns/album-column.tsx b/src/renderer/components/item-list/item-table-list/columns/album-column.tsx index abdf4a36c..1464c19be 100644 --- a/src/renderer/components/item-list/item-table-list/columns/album-column.tsx +++ b/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 ; }; -export const AlbumColumnMemo = memo(AlbumColumn, (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 { AlbumColumnMemo as AlbumColumn }; +export { AlbumColumn }; diff --git a/src/renderer/components/item-list/item-table-list/columns/artists-column.tsx b/src/renderer/components/item-list/item-table-list/columns/artists-column.tsx index 97df53460..1b77443ba 100644 --- a/src/renderer/components/item-list/item-table-list/columns/artists-column.tsx +++ b/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) => { - 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 }; +export { BaseArtistsColumn as ArtistsColumn }; diff --git a/src/renderer/components/item-list/item-table-list/columns/composer-column.tsx b/src/renderer/components/item-list/item-table-list/columns/composer-column.tsx index 9cf40577a..9c307f799 100644 --- a/src/renderer/components/item-list/item-table-list/columns/composer-column.tsx +++ b/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 ; }; - -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 }; diff --git a/src/renderer/components/item-list/item-table-list/columns/date-column.tsx b/src/renderer/components/item-list/item-table-list/columns/date-column.tsx index b57a90c87..00407ef87 100644 --- a/src/renderer/components/item-list/item-table-list/columns/date-column.tsx +++ b/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 ; }; -export const DateColumn = memo(DateColumnBase, (prevProps, nextProps) => { - return ( - prevProps.rowIndex === nextProps.rowIndex && - prevProps.columnIndex === nextProps.columnIndex && - prevProps.data === nextProps.data && - prevProps.columns === nextProps.columns - ); -}); +export const DateColumn = DateColumnBase; 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 ; }; -export const AbsoluteDateColumn = memo(AbsoluteDateColumnBase, (prevProps, nextProps) => { - return ( - prevProps.rowIndex === nextProps.rowIndex && - prevProps.columnIndex === nextProps.columnIndex && - prevProps.data === nextProps.data && - prevProps.columns === nextProps.columns && - prevProps.type === nextProps.type - ); -}); +export const AbsoluteDateColumn = AbsoluteDateColumnBase; 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 ; }; -export const RelativeDateColumn = memo(RelativeDateColumnBase, (prevProps, nextProps) => { - return ( - prevProps.rowIndex === nextProps.rowIndex && - prevProps.columnIndex === nextProps.columnIndex && - prevProps.data === nextProps.data && - prevProps.columns === nextProps.columns - ); -}); +export const RelativeDateColumn = RelativeDateColumnBase; diff --git a/src/renderer/components/item-list/item-table-list/columns/default-column.tsx b/src/renderer/components/item-list/item-table-list/columns/default-column.tsx index d84a232d2..cf5cbcb62 100644 --- a/src/renderer/components/item-list/item-table-list/columns/default-column.tsx +++ b/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 ; }; - -export const DefaultColumn = memo(DefaultColumnBase, (prevProps, nextProps) => { - return ( - prevProps.rowIndex === nextProps.rowIndex && - prevProps.columnIndex === nextProps.columnIndex && - prevProps.data === nextProps.data && - prevProps.columns === nextProps.columns - ); -}); diff --git a/src/renderer/components/item-list/item-table-list/columns/duration-column.tsx b/src/renderer/components/item-list/item-table-list/columns/duration-column.tsx index 4e79f6941..06d4c33b7 100644 --- a/src/renderer/components/item-list/item-table-list/columns/duration-column.tsx +++ b/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 ; }; -export const DurationColumn = React.memo(DurationColumnBase, (prevProps, nextProps) => { - return ( - prevProps.rowIndex === nextProps.rowIndex && - prevProps.columnIndex === nextProps.columnIndex && - prevProps.data === nextProps.data && - prevProps.columns === nextProps.columns - ); -}); +export const DurationColumn = DurationColumnBase; diff --git a/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx b/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx index f8bcf5152..783a96414 100644 --- a/src/renderer/components/item-list/item-table-list/columns/favorite-column.tsx +++ b/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  ; }; - -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 - ); -}); diff --git a/src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx b/src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx index 5965dd340..48d3984b8 100644 --- a/src/renderer/components/item-list/item-table-list/columns/genre-badge-column.tsx +++ b/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 ; }; -export const GenreColumnMemo = memo(GenreBadgeColumn, (prevProps, nextProps) => { - return ( - prevProps.rowIndex === nextProps.rowIndex && - prevProps.columnIndex === nextProps.columnIndex && - prevProps.data === nextProps.data && - prevProps.columns === nextProps.columns - ); -}); - -export { GenreColumnMemo as GenreBadgeColumn }; +export { GenreBadgeColumn }; diff --git a/src/renderer/components/item-list/item-table-list/columns/genre-column.tsx b/src/renderer/components/item-list/item-table-list/columns/genre-column.tsx index a5ca61643..dacaab19a 100644 --- a/src/renderer/components/item-list/item-table-list/columns/genre-column.tsx +++ b/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 ; }; -export const GenreColumnMemo = memo(GenreColumn, (prevProps, nextProps) => { - 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 }; +export { GenreColumn }; diff --git a/src/renderer/components/item-list/item-table-list/columns/image-column.tsx b/src/renderer/components/item-list/item-table-list/columns/image-column.tsx index 80802e907..a89306825 100644 --- a/src/renderer/components/item-list/item-table-list/columns/image-column.tsx +++ b/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) => { - 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 - ); -}); +export const ImageColumn = ImageColumnBase; diff --git a/src/renderer/components/item-list/item-table-list/columns/numeric-column.tsx b/src/renderer/components/item-list/item-table-list/columns/numeric-column.tsx index 31150386f..b8c6b601c 100644 --- a/src/renderer/components/item-list/item-table-list/columns/numeric-column.tsx +++ b/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 ; }; - -export const NumericColumn = memo(NumericColumnBase, (prevProps, nextProps) => { - return ( - prevProps.rowIndex === nextProps.rowIndex && - prevProps.columnIndex === nextProps.columnIndex && - prevProps.data === nextProps.data && - prevProps.columns === nextProps.columns - ); -}); diff --git a/src/renderer/components/item-list/item-table-list/columns/path-column.tsx b/src/renderer/components/item-list/item-table-list/columns/path-column.tsx index 24e28a8dd..52f5ef289 100644 --- a/src/renderer/components/item-list/item-table-list/columns/path-column.tsx +++ b/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 ; }; - -export const PathColumn = memo(PathColumnBase, (prevProps, nextProps) => { - return ( - prevProps.rowIndex === nextProps.rowIndex && - prevProps.columnIndex === nextProps.columnIndex && - prevProps.data === nextProps.data && - prevProps.columns === nextProps.columns - ); -}); diff --git a/src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.tsx b/src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.tsx index 7c7072763..cf01ccc52 100644 --- a/src/renderer/components/item-list/item-table-list/columns/playlist-reorder-column.tsx +++ b/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) => { - 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 - ); -}); +export const PlaylistReorderColumn = PlaylistReorderColumnBase; diff --git a/src/renderer/components/item-list/item-table-list/columns/rating-column.tsx b/src/renderer/components/item-list/item-table-list/columns/rating-column.tsx index 237523202..c03a7cb94 100644 --- a/src/renderer/components/item-list/item-table-list/columns/rating-column.tsx +++ b/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  ; }; - -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 - ); -}); diff --git a/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx b/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx index 93fa6630c..6f788979a 100644 --- a/src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx +++ b/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) => { - 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 - ); -}); +export const RowIndexColumn = RowIndexColumnBase; const DefaultRowIndexColumn = (props: ItemTableListInnerColumn) => { const { @@ -125,30 +113,28 @@ const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => { ); }; -const InnerQueueSongRowIndexColumn = memo( - ( - props: ItemTableListInnerColumn & { - adjustedRowIndex: number; - isActive: boolean; - isPlaying: boolean; - }, - ) => { - return ( - - {props.isActive ? ( - props.isPlaying ? ( - - - - ) : ( - - - - ) - ) : ( - props.adjustedRowIndex - )} - - ); +const InnerQueueSongRowIndexColumn = ( + props: ItemTableListInnerColumn & { + adjustedRowIndex: number; + isActive: boolean; + isPlaying: boolean; }, -); +) => { + return ( + + {props.isActive ? ( + props.isPlaying ? ( + + + + ) : ( + + + + ) + ) : ( + props.adjustedRowIndex + )} + + ); +}; diff --git a/src/renderer/components/item-list/item-table-list/columns/size-column.tsx b/src/renderer/components/item-list/item-table-list/columns/size-column.tsx index 5448b9ebb..dad2f1b33 100644 --- a/src/renderer/components/item-list/item-table-list/columns/size-column.tsx +++ b/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 ; }; -export const SizeColumn = memo(SizeColumnBase, (prevProps, nextProps) => { - return ( - prevProps.rowIndex === nextProps.rowIndex && - prevProps.columnIndex === nextProps.columnIndex && - prevProps.data === nextProps.data && - prevProps.columns === nextProps.columns - ); -}); +export const SizeColumn = SizeColumnBase; diff --git a/src/renderer/components/item-list/item-table-list/columns/text-column.tsx b/src/renderer/components/item-list/item-table-list/columns/text-column.tsx index 499d94569..fc2cc35ff 100644 --- a/src/renderer/components/item-list/item-table-list/columns/text-column.tsx +++ b/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 ; }; - -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 - ); -}); diff --git a/src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx index 1a78c1865..9fd6c4a23 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-artist-column.tsx +++ b/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) => { - 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 - ); -}); +export const TitleArtistColumn = TitleArtistColumnBase; diff --git a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-column.tsx index e11fa2fef..0daaca0b9 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-column.tsx +++ b/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) => { - 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 - ); -}); +export const TitleColumn = TitleColumnBase; function DefaultTitleColumn(props: ItemTableListInnerColumn) { const rowItem = props.getRowItem?.(props.rowIndex) ?? (props.data as any[])[props.rowIndex]; diff --git a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx index 816d9c89a..9dfb51ab3 100644 --- a/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx +++ b/src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx @@ -361,8 +361,6 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) => return ; }; -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) => { - 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 - ); -}); +export const TitleCombinedColumn = TitleCombinedColumnBase; diff --git a/src/renderer/components/item-list/item-table-list/columns/year-column.tsx b/src/renderer/components/item-list/item-table-list/columns/year-column.tsx index 4ddcafbb0..47ab985af 100644 --- a/src/renderer/components/item-list/item-table-list/columns/year-column.tsx +++ b/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 ; }; -export const YearColumn = memo(YearColumnBase, (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 - ); -}); +export const YearColumn = YearColumnBase; diff --git a/src/renderer/components/item-list/item-table-list/item-table-list.tsx b/src/renderer/components/item-list/item-table-list/item-table-list.tsx index e354e5a36..8c4847870 100644 --- a/src/renderer/components/item-list/item-table-list/item-table-list.tsx +++ b/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 ; }, - [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(