[DataEntry] Prevent RecentEntry re-renders when typing in NewEntry (#…

…2752)
sillsdev · Nov 2, 2023 · b9252e2 · b9252e2
1 parent 21787af
commit b9252e2
Show file tree

Hide file tree

Showing 4 changed files with 234 additions and 205 deletions.
diff --git a/src/components/DataEntry/DataEntryTable/RecentEntry.tsx b/src/components/DataEntry/DataEntryTable/RecentEntry.tsx
@@ -1,5 +1,5 @@
 import { Grid } from "@mui/material";
-import { ReactElement, useState } from "react";
+import { ReactElement, memo, useState } from "react";
 
 import { Word, WritingSystem } from "api/models";
 import {
@@ -19,10 +19,10 @@ export interface RecentEntryProps {
   rowIndex: number;
   entry: Word;
   senseGuid: string;
-  updateGloss: (gloss: string) => void;
-  updateNote: (newText: string) => Promise<void>;
-  updateVern: (newVernacular: string, targetWordId?: string) => void;
-  removeEntry: () => void;
+  updateGloss: (index: number, gloss: string) => void;
+  updateNote: (index: number, newText: string) => Promise<void>;
+  updateVern: (index: number, newVern: string, targetWordId?: string) => void;
+  removeEntry: (index: number) => void;
   addAudioToWord: (wordId: string, audioFile: File) => void;
   deleteAudioFromWord: (wordId: string, fileName: string) => void;
   focusNewEntry: () => void;
@@ -34,7 +34,7 @@ export interface RecentEntryProps {
 /**
  * Displays a recently entered word that a user can still edit
  */
-export default function RecentEntry(props: RecentEntryProps): ReactElement {
+export function RecentEntry(props: RecentEntryProps): ReactElement {
   const sense = props.entry.senses.find((s) => s.guid === props.senseGuid)!;
   if (sense.glosses.length < 1) {
     sense.glosses.push(newGloss("", props.analysisLang.bcp47));
@@ -44,20 +44,24 @@ export default function RecentEntry(props: RecentEntryProps): ReactElement {
 
   function conditionallyUpdateGloss(): void {
     if (firstGlossText(sense) !== gloss) {
-      props.updateGloss(gloss);
+      props.updateGloss(props.rowIndex, gloss);
     }
   }
 
   function conditionallyUpdateVern(): void {
     if (vernacular.trim()) {
       if (props.entry.vernacular !== vernacular) {
-        props.updateVern(vernacular);
+        props.updateVern(props.rowIndex, vernacular);
       }
     } else {
       setVernacular(props.entry.vernacular);
     }
   }
 
+  const handleRemoveEntry = (): void => props.removeEntry(props.rowIndex);
+  const handleUpdateNote = (noteText: string): Promise<void> =>
+    props.updateNote(props.rowIndex, noteText);
+
   return (
     <Grid alignItems="center" container id={`${idAffix}-${props.rowIndex}`}>
       <Grid
@@ -114,7 +118,7 @@ export default function RecentEntry(props: RecentEntryProps): ReactElement {
         {!props.disabled && (
           <EntryNote
             noteText={props.entry.note.text}
-            updateNote={props.updateNote}
+            updateNote={handleUpdateNote}
             buttonId={`${idAffix}-${props.rowIndex}-note`}
           />
         )}
@@ -152,7 +156,7 @@ export default function RecentEntry(props: RecentEntryProps): ReactElement {
       >
         {!props.disabled && (
           <DeleteEntry
-            removeEntry={() => props.removeEntry()}
+            removeEntry={handleRemoveEntry}
             buttonId={`${idAffix}-${props.rowIndex}-delete`}
             confirmId={"addWords.deleteRowWarning"}
             wordId={props.entry.id}
@@ -162,3 +166,5 @@ export default function RecentEntry(props: RecentEntryProps): ReactElement {
     </Grid>
   );
 }
+
+export default memo(RecentEntry);