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} /> ))}