[Chore/Refactor] Implement lazy initialization for useState calls to prevent re-computation (#26252)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: asukaminato0721 <30024051+asukaminato0721@users.noreply.github.com>

web/app/components/workflow/nodes/_base/hooks/use-resize-panel.ts

@@ -33,7 +33,7 @@ export const useResizePanel = (params?: UseResizePanelParams) => {
   const initContainerWidthRef = useRef(0)
   const initContainerHeightRef = useRef(0)
   const isResizingRef = useRef(false)
-  const [prevUserSelectStyle, setPrevUserSelectStyle] = useState(getComputedStyle(document.body).userSelect)
+  const [prevUserSelectStyle, setPrevUserSelectStyle] = useState(() => getComputedStyle(document.body).userSelect)
 
   const handleStartResize = useCallback((e: MouseEvent) => {
     initXRef.current = e.clientX

web/app/components/workflow/nodes/http/hooks/use-key-value-list.ts

@@ -16,7 +16,7 @@ const strToKeyValueList = (value: string) => {
 }
 
 const useKeyValueList = (value: string, onChange: (value: string) => void, noFilter?: boolean) => {
-  const [list, doSetList] = useState<KeyValue[]>(value ? strToKeyValueList(value) : [])
+  const [list, doSetList] = useState<KeyValue[]>(() => value ? strToKeyValueList(value) : [])
   const setList = (l: KeyValue[]) => {
     doSetList(l.map((item) => {
       return {

web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-config.tsx

@@ -55,7 +55,7 @@ const JsonSchemaConfig: FC<JsonSchemaConfigProps> = ({
   const docLink = useDocLink()
   const [currentTab, setCurrentTab] = useState(SchemaView.VisualEditor)
   const [jsonSchema, setJsonSchema] = useState(defaultSchema || DEFAULT_SCHEMA)
-  const [json, setJson] = useState(JSON.stringify(jsonSchema, null, 2))
+  const [json, setJson] = useState(() => JSON.stringify(jsonSchema, null, 2))
   const [btnWidth, setBtnWidth] = useState(0)
   const [parseError, setParseError] = useState<Error | null>(null)
   const [validationError, setValidationError] = useState<string>('')

web/app/components/workflow/nodes/question-classifier/components/class-item.tsx

@@ -34,7 +34,7 @@ const ClassItem: FC<Props> = ({
   filterVar,
 }) => {
   const { t } = useTranslation()
-  const [instanceId, setInstanceId] = useState(uniqueId())
+  const [instanceId, setInstanceId] = useState(() => uniqueId())
 
   useEffect(() => {
     setInstanceId(`${nodeId}-${uniqueId()}`)

web/app/components/workflow/variable-inspect/value-content.tsx

@@ -69,7 +69,7 @@ const ValueContent = ({
   const [json, setJson] = useState('')
   const [parseError, setParseError] = useState<Error | null>(null)
   const [validationError, setValidationError] = useState<string>('')
-  const [fileValue, setFileValue] = useState<any>(formatFileValue(currentVar))
+  const [fileValue, setFileValue] = useState<any>(() => formatFileValue(currentVar))
 
   const { run: debounceValueChange } = useDebounceFn(handleValueChange, { wait: 500 })
 

web/app/components/workflow/workflow-preview/index.tsx

@@ -68,8 +68,8 @@ const WorkflowPreview = ({
   viewport,
   className,
 }: WorkflowPreviewProps) => {
-  const [nodesData, setNodesData] = useState(initialNodes(nodes, edges))
-  const [edgesData, setEdgesData] = useState(initialEdges(edges, nodes))
+  const [nodesData, setNodesData] = useState(() => initialNodes(nodes, edges))
+  const [edgesData, setEdgesData] = useState(() => initialEdges(edges, nodes))
 
   const onNodesChange = useCallback(
     (changes: NodeChange[]) => setNodesData(nds => applyNodeChanges(changes, nds)),