From 6719eb810bc81e4c089603bfb96ded6d5b625756 Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Sun, 5 May 2024 23:44:24 +0200
Subject: [PATCH] use state to handle rerenders

---
 src/frontend/src/pages/Index/Scan.tsx | 51 +++++++++++++++------------
 1 file changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/frontend/src/pages/Index/Scan.tsx b/src/frontend/src/pages/Index/Scan.tsx
index 82c1e23637..cb3e9bfb7b 100644
--- a/src/frontend/src/pages/Index/Scan.tsx
+++ b/src/frontend/src/pages/Index/Scan.tsx
@@ -42,7 +42,7 @@ import {
 } from '@tabler/icons-react';
 import { Html5Qrcode } from 'html5-qrcode';
 import { CameraDevice } from 'html5-qrcode/camera/core';
-import { useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 
 import { api } from '../../App';
 import { DocInfo } from '../../components/items/DocInfo';
@@ -398,30 +398,35 @@ function HistoryTable({
     setSelection((current) =>
       current.length === data.length ? [] : data.map((item) => item.id)
     );
+  const [rows, setRows] = useState<ReactNode>();
 
-  const rows = data.map((item) => {
-    return (
-      <tr key={item.id}>
-        <td>
-          <Checkbox
-            checked={selection.includes(item.id)}
-            onChange={() => toggleRow(item.id)}
-            transitionDuration={0}
-          />
-        </td>
-        <td>
-          {item.pk && item.model && item.instance ? (
-            <RenderInstance model={item.model} instance={item.instance} />
-          ) : (
-            item.ref
-          )}
-        </td>
-        <td>{item.model}</td>
-        <td>{item.source}</td>
-        <td>{item.timestamp?.toString()}</td>
-      </tr>
+  useEffect(() => {
+    setRows(
+      data.map((item) => {
+        return (
+          <tr key={item.id}>
+            <td>
+              <Checkbox
+                checked={selection.includes(item.id)}
+                onChange={() => toggleRow(item.id)}
+                transitionDuration={0}
+              />
+            </td>
+            <td>
+              {item.pk && item.model && item.instance ? (
+                <RenderInstance model={item.model} instance={item.instance} />
+              ) : (
+                item.ref
+              )}
+            </td>
+            <td>{item.model}</td>
+            <td>{item.source}</td>
+            <td>{item.timestamp?.toString()}</td>
+          </tr>
+        );
+      })
     );
-  });
+  }, [data, selection]);
 
   // rendering
   if (data.length === 0)