Less table row rerenders

package.json

@@ -16,6 +16,7 @@
     "classnames": "^2.5.1",
     "date-fns": "^4.4.0",
     "dompurify": "^3.4.14",
+    "fast-deep-equal": "^3.1.3",
     "focus-trap-react": "^12.0.3",
     "formik": "^2.4.9",
     "http-proxy-middleware": "^4.2.0",

src/components/shared/Table.tsx

@@ -331,7 +331,7 @@ const TableRows = <T extends Row, >({ templateMap }: { templateMap: TemplateMap<
 	return (
 		<>
 			{rowKeys.map(rowKey => (
-				<TableRow
+				<MemoizedTableRow
 					key={rowKey}
 					rowKey={rowKey}
 					templateMap={templateMap}
@@ -410,6 +410,9 @@ const TableRow = <T extends Row, >({ rowKey, templateMap }: { rowKey: string, te
 	);
 };
 
+// Rows are only re-rendered if their data changed, not whenever the table is updated
+const MemoizedTableRow = React.memo(TableRow) as typeof TableRow;
+
 // Apply a column template and render corresponding components
 const ColumnTemplate = <T extends Row, >({ row, column, templateMap }: {row: T, column: TableColumn, templateMap: TemplateMap<T>}) => {
 	if (!column.template) {

src/components/shared/modals/Modal.tsx

@@ -37,8 +37,6 @@ export const Modal = forwardRef<ModalHandle, PropsWithChildren<ModalProps>>(
     { open = false, closeCallback, header, classId, className, children },
     ref,
   ) => {
-    const { t } = useTranslation();
-
     const [isOpen, setOpen] = useState(open);
     const close = useCallback(() => {
       if (closeCallback !== undefined && !closeCallback()) {
@@ -58,48 +56,74 @@ export const Modal = forwardRef<ModalHandle, PropsWithChildren<ModalProps>>(
       [close, isOpen],
     );
 
-    useHotkeys(
-      availableHotkeys.general.CLOSE_MODAL.sequence,
-      close,
-      {
-        description:
-          t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined,
-      },
-      [ref],
-    );
-
 	return ReactDOM.createPortal(
 		isOpen &&
-			<FocusTrap>
-				<div>
-					<div className="modal-animation modal-overlay" />
-					<section
-						id={classId}
-						className={className ? className : "modal modal-animation"}
-					>
-						<header>
-							<ButtonLikeAnchor
-								className="close-modal"
-								onClick={close}
-								tabIndex={0}
-							>
-								<LuX />
-							</ButtonLikeAnchor>
-							<h2>
-								{header}
-							</h2>
-						</header>
-						<ErrorBoundary fallback={
-							<div className="about">
-								Something went wrong. Please close the modal and try again.
-							</div>
-						}>
-							{children}
-						</ErrorBoundary>
-					</section>
-				</div>
-			</FocusTrap>,
+			<ModalContent
+				close={close}
+				header={header}
+				classId={classId}
+				className={className}
+			>
+				{children}
+			</ModalContent>,
 		document.body,
 	);
 
 });
+
+const ModalContent = ({
+	close,
+	header,
+	classId,
+	className,
+	children,
+}: PropsWithChildren<{
+	close: () => void,
+	header: string,
+	classId: string,
+	className?: string,
+}>) => {
+	const { t } = useTranslation();
+
+	useHotkeys(
+		availableHotkeys.general.CLOSE_MODAL.sequence,
+		close,
+		{
+			description:
+				t(availableHotkeys.general.CLOSE_MODAL.description) ?? undefined,
+		},
+		[close],
+	);
+
+	return (
+		<FocusTrap>
+			<div>
+				<div className="modal-animation modal-overlay" />
+				<section
+					id={classId}
+					className={className ? className : "modal modal-animation"}
+				>
+					<header>
+						<ButtonLikeAnchor
+							className="close-modal"
+							onClick={close}
+							tabIndex={0}
+						>
+							<LuX />
+						</ButtonLikeAnchor>
+						<h2>
+							{header}
+						</h2>
+					</header>
+					<ErrorBoundary fallback={
+						<div className="about">
+							Something went wrong. Please close the modal and try again.
+						</div>
+					}>
+						{children}
+					</ErrorBoundary>
+				</section>
+			</div>
+		</FocusTrap>
+	);
+};

src/slices/tableSlice.ts

@@ -1,4 +1,5 @@
-import { EntityState, PayloadAction, SerializedError, createEntityAdapter, createSlice, nanoid } from "@reduxjs/toolkit";
+import { EntityState, PayloadAction, SerializedError, createEntityAdapter, createSlice, nanoid, original } from "@reduxjs/toolkit";
+import isEqual from "fast-deep-equal";
 import { aclsTableConfig, TableConfig } from "../configs/tableConfigs/aclsTableConfig";
 import { Server } from "./serverSlice";
 import { Recording } from "./recordingSlice";
@@ -237,15 +238,21 @@ const tableSlice = createSlice({
 
 			// Entity Adapter preparations
 			const rows: Row[] = [];
+			// Rows as they were before this update
+			const previousRows = original(state.rows)?.entities ?? {};
 
 			action.payload.rows.forEach(row => {
 				const rowId = getRowKey(row);                // new stable id
 
 				// @ts-expect-error: Id will not be number
-				rows.push({
+				const newRow: Row = {
 					...row,
 					id: rowId,
-				});
+				};
+
+				// Keep the previous object if the row did not change, so it is not re-rendered
+				const previousRow = previousRows[rowId];
+				rows.push(previousRow && isEqual(previousRow, newRow) ? previousRow : newRow);
 			});
 
 			// Replace state with the fetched entities