diff --git a/packages/runtime/src/components/chakra-ui/List.tsx b/packages/runtime/src/components/chakra-ui/List.tsx
index 239786f0..85fcf54f 100644
--- a/packages/runtime/src/components/chakra-ui/List.tsx
+++ b/packages/runtime/src/components/chakra-ui/List.tsx
@@ -38,10 +38,16 @@ const List: ComponentImplementation<{
   if (!listData) {
     return null;
   }
-
+  const itemElementMemo = useRef(new Map());
   const parsedtemplete = template.map(parseTypeComponents);
 
   const listItems = listData.map((listItem, i) => {
+    if (itemElementMemo.current.has(listItem.id)) {
+      if (itemElementMemo.current.get(listItem.id).value === listItem) {
+        return itemElementMemo.current.get(listItem.id).ele;
+      }
+    }
+
     const evaledTemplate = mapValuesDeep(
       { parsedtemplete },
       ({ value, key }) => {
@@ -69,11 +75,17 @@ const List: ComponentImplementation<{
       );
     });
 
-    return (
+    const listItemEle = (
       <BaseListItem key={listItem.id} spacing={3}>
         {componentElements}
       </BaseListItem>
     );
+
+    itemElementMemo.current.set(listItem.id, {
+      value: listItem,
+      ele: listItemEle,
+    });
+    return listItemEle;
   });
 
   return <BaseList>{listItems}</BaseList>;