From 51dcdf94fb1a7aef4587b34520a185756c37e22d Mon Sep 17 00:00:00 2001 From: icarus Date: Fri, 17 Oct 2025 00:05:07 +0800 Subject: [PATCH] refactor(TraceTree): replace useEffect with useMemo for usedTime calculation Use useMemo to optimize performance by avoiding unnecessary recalculations and state updates fix: Error: Calling setState synchronously within an effect can trigger cascading renders --- src/renderer/src/trace/pages/TraceTree.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/renderer/src/trace/pages/TraceTree.tsx b/src/renderer/src/trace/pages/TraceTree.tsx index 01384bc9cc..d46f24f90c 100644 --- a/src/renderer/src/trace/pages/TraceTree.tsx +++ b/src/renderer/src/trace/pages/TraceTree.tsx @@ -1,7 +1,8 @@ import { TraceModal } from '@renderer/trace/pages/TraceModel' import { Divider } from 'antd/lib' +import dayjs from 'dayjs' import * as React from 'react' -import { useEffect, useState } from 'react' +import { useMemo, useState } from 'react' import { Box, GridItem, HStack, IconButton, SimpleGrid, Text } from './Component' import { ProgressBar } from './ProgressBar' @@ -38,12 +39,10 @@ export const convertTime = (time: number | null): string => { const TreeNode: React.FC = ({ node, handleClick, treeData, paddingLeft = 2 }) => { const [isOpen, setIsOpen] = useState(true) const hasChildren = node.children && node.children.length > 0 - const [usedTime, setUsedTime] = useState('--') - // 只在 endTime 或 node 变化时更新 usedTime - useEffect(() => { - const endTime = node.endTime || Date.now() - setUsedTime(convertTime(endTime - node.startTime)) + const usedTime = useMemo(() => { + const endTime = node.endTime || dayjs().valueOf() + return convertTime(endTime - node.startTime) }, [node]) return (