diff --git a/src/components/ResultCard.tsx b/src/components/ResultCard.tsx
index ac6bde27..94e7296d 100644
--- a/src/components/ResultCard.tsx
+++ b/src/components/ResultCard.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react'
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
@@ -6,7 +7,7 @@ import ButtonGroup from '@mui/material/ButtonGroup';
import Typography from '@mui/material/Typography';
import { modalities } from '../utils/constants';
-function ResultCard({
+const ResultCard = memo(({
nodeName,
datasetUUID,
datasetName,
@@ -24,8 +25,7 @@ function ResultCard({
imageModals: string[];
checked: boolean;
onCheckboxChange: (id: string) => void;
-}) {
- return (
+}) => (
@@ -59,7 +59,6 @@ function ResultCard({
- );
-}
+ ));
export default ResultCard;
diff --git a/src/components/ResultContainer.tsx b/src/components/ResultContainer.tsx
index a5af19be..9cabd965 100644
--- a/src/components/ResultContainer.tsx
+++ b/src/components/ResultContainer.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
import { Button, FormControlLabel, Checkbox, Typography } from '@mui/material';
import ResultCard from './ResultCard';
import { Result } from '../utils/types';
@@ -31,14 +31,14 @@ function ResultContainer({ result }: { result: Result[] | null }) {
* @param id - The uuid of the dataset to be added or removed from the download list
* @returns void
*/
- function updateDownload(id: string) {
+ const updateDownload = useCallback((id: string) => {
setDownload((currDownload) => {
const newDownload = !currDownload.includes(id)
? [...currDownload, id]
: currDownload.filter((downloadID) => downloadID !== id);
return newDownload;
});
- }
+ }, []);
function handleSelectAll(checked: boolean) {
if (result) {
@@ -170,6 +170,7 @@ function ResultContainer({ result }: { result: Result[] | null }) {
);
}
+
return (
<>
@@ -200,7 +201,7 @@ function ResultContainer({ result }: { result: Result[] | null }) {
numMatchingSubjects={item.num_matching_subjects}
imageModals={item.image_modals}
checked={download.includes(item.dataset_uuid)}
- onCheckboxChange={(id) => updateDownload(id)}
+ onCheckboxChange={updateDownload}
/>
))}