diff --git a/frontend/antd/anchor/Index.svelte b/frontend/antd/anchor/Index.svelte
index 61293226..fda27a02 100644
--- a/frontend/antd/anchor/Index.svelte
+++ b/frontend/antd/anchor/Index.svelte
@@ -11,8 +11,6 @@
   import cls from 'classnames';
   import { writable } from 'svelte/store';
 
-  import { getItems } from './context';
-
   const AwaitedAnchor = importComponent(() => import('./anchor'));
 
   export let gradio: Gradio;
@@ -53,7 +51,6 @@
     as_item,
     restProps: $$restProps,
   });
-  const { items, default: children } = getItems(['items', 'default']);
 </script>
 
 {#if $mergedProps.visible}
@@ -66,7 +63,6 @@
       {...$mergedProps.props}
       {...bindEvents($mergedProps)}
       slots={$slots}
-      slotItems={$items.length > 0 ? $items : $children}
     >
       <slot></slot>
     </Anchor>
diff --git a/frontend/antd/anchor/anchor.tsx b/frontend/antd/anchor/anchor.tsx
index 860369f4..1bd4c23e 100644
--- a/frontend/antd/anchor/anchor.tsx
+++ b/frontend/antd/anchor/anchor.tsx
@@ -4,47 +4,42 @@ import { useFunction } from '@utils/hooks/useFunction';
 import { renderItems } from '@utils/renderItems';
 import { Anchor as AAnchor, type GetProps } from 'antd';
 
-import { type Item } from './context';
+import { useItems, withItemsContextProvider } from './context';
 
 type AnchorProps = GetProps<typeof AAnchor>;
-export const Anchor = sveltify<
-  AnchorProps & {
-    slotItems: Item[];
-  }
->(
-  ({
-    getContainer,
-    getCurrentAnchor,
-    children,
-    items,
-    slotItems,
-    ...props
-  }) => {
-    const getContainerFunction = useFunction(getContainer);
-    const getCurrentAnchorFunction = useFunction(getCurrentAnchor);
-    return (
-      <>
-        {children}
-        <AAnchor
-          {...props}
-          items={useMemo(() => {
-            // ["title"]
-            return (
-              items ||
-              renderItems<NonNullable<AnchorProps['items']>[number]>(
-                slotItems,
-                {
-                  clone: true,
-                }
-              )
-            );
-          }, [items, slotItems])}
-          getContainer={getContainerFunction}
-          getCurrentAnchor={getCurrentAnchorFunction}
-        />
-      </>
-    );
-  }
+export const Anchor = sveltify<AnchorProps>(
+  withItemsContextProvider(
+    ['items', 'default'],
+    ({ getContainer, getCurrentAnchor, children, items, ...props }) => {
+      const getContainerFunction = useFunction(getContainer);
+      const getCurrentAnchorFunction = useFunction(getCurrentAnchor);
+      const { items: slotItems } = useItems<['items', 'default']>();
+      const resolvedSlotItems =
+        slotItems.items.length > 0 ? slotItems.items : slotItems.default;
+      return (
+        <>
+          <div style={{ display: 'none' }}>{children}</div>
+          <AAnchor
+            {...props}
+            items={useMemo(() => {
+              // ["title"]
+              return (
+                items ||
+                renderItems<NonNullable<AnchorProps['items']>[number]>(
+                  resolvedSlotItems,
+                  {
+                    clone: true,
+                  }
+                )
+              );
+            }, [items, resolvedSlotItems])}
+            getContainer={getContainerFunction}
+            getCurrentAnchor={getCurrentAnchorFunction}
+          />
+        </>
+      );
+    }
+  )
 );
 
 export default Anchor;
diff --git a/frontend/antd/anchor/context.ts b/frontend/antd/anchor/context.ts
index 5512087d..d6ab7440 100644
--- a/frontend/antd/anchor/context.ts
+++ b/frontend/antd/anchor/context.ts
@@ -1,6 +1,6 @@
-import { createItemsContext } from '@utils/createItemsContext';
+import { createItemsContext } from '@utils/createItemsContext2';
 
-const { getItems, getSetItemFn } = createItemsContext('anchor');
+export const { useItems, withItemsContextProvider, ItemHandler } =
+  createItemsContext();
 
-export { getItems, getSetItemFn };
-export * from '@utils/createItemsContext';
+export * from '@utils/createItemsContext2';
diff --git a/frontend/antd/anchor/item/Index.svelte b/frontend/antd/anchor/item/Index.svelte
index 29f06320..2ca6c1a8 100644
--- a/frontend/antd/anchor/item/Index.svelte
+++ b/frontend/antd/anchor/item/Index.svelte
@@ -1,7 +1,10 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-  import { bindEvents } from '@svelte-preprocess-react/component';
+  import {
+    bindEvents,
+    importComponent,
+  } from '@svelte-preprocess-react/component';
   import {
     getSlotContext,
     getSlotKey,
@@ -12,7 +15,7 @@
   import cls from 'classnames';
   import { writable } from 'svelte/store';
 
-  import { getItems, getSetItemFn } from '../context';
+  const AwaitedAnchorItem = importComponent(() => import('./anchor.item'));
 
   export let gradio: Gradio;
   export let props: Record<string, any> = {};
@@ -59,28 +62,22 @@
     as_item,
     restProps: $$restProps,
   });
-  const setItem = getSetItemFn();
-  const { default: items } = getItems();
-  $: setItem($slotKey, $mergedProps._internal.index || 0, {
-    props: {
-      style: $mergedProps.elem_style,
-      className: cls($mergedProps.elem_classes, 'ms-gr-antd-anchor-item'),
-      id: $mergedProps.elem_id,
-      ...$mergedProps.restProps,
-      ...$mergedProps.props,
-      ...bindEvents($mergedProps),
-    },
-    slots: $slots,
-    children: $items.length > 0 ? $items : undefined,
-  });
 </script>
 
 {#if $mergedProps.visible}
-  <slot></slot>
+  {#await AwaitedAnchorItem then AnchorItem}
+    <AnchorItem
+      style={$mergedProps.elem_style}
+      className={cls($mergedProps.elem_classes, 'ms-gr-antd-anchor-item')}
+      id={$mergedProps.elem_id}
+      {...$mergedProps.restProps}
+      {...$mergedProps.props}
+      {...bindEvents($mergedProps)}
+      slots={$slots}
+      itemIndex={$mergedProps._internal.index || 0}
+      itemSlotKey={$slotKey}
+    >
+      <slot></slot>
+    </AnchorItem>
+  {/await}
 {/if}
-
-<style>
-  :global(.ms-gr-antd-noop-class) {
-    display: none;
-  }
-</style>
diff --git a/frontend/antd/anchor/item/anchor.item.tsx b/frontend/antd/anchor/item/anchor.item.tsx
new file mode 100644
index 00000000..a3a36533
--- /dev/null
+++ b/frontend/antd/anchor/item/anchor.item.tsx
@@ -0,0 +1,23 @@
+import { sveltify } from '@svelte-preprocess-react';
+import React from 'react';
+import type { AnchorLinkItemProps } from 'antd/es/anchor/Anchor';
+
+import { ItemHandler, type ItemHandlerProps } from '../context';
+
+export const AnchorItem = sveltify<AnchorLinkItemProps & ItemHandlerProps>(
+  (props) => {
+    return (
+      <>
+        <ItemHandler<['default']>
+          {...props}
+          allowedSlots={['default']}
+          itemChildren={(items) => {
+            return items.default.length > 0 ? items.default : undefined;
+          }}
+        />
+      </>
+    );
+  }
+);
+
+export default AnchorItem;
diff --git a/frontend/antd/grid/col/Index.svelte b/frontend/antd/grid/col/Index.svelte
index 733959c9..9337e142 100644
--- a/frontend/antd/grid/col/Index.svelte
+++ b/frontend/antd/grid/col/Index.svelte
@@ -68,11 +68,12 @@
       itemSlotKey={$slotKey}
       itemElement={$slot}
       slots={{}}
-    />
+    >
+      <svelte-slot bind:this={$slot}>
+        <slot></slot>
+      </svelte-slot>
+    </Col>
   {/await}
-  <svelte-slot bind:this={$slot}>
-    <slot></slot>
-  </svelte-slot>
 {/if}
 
 <style>
diff --git a/frontend/antd/grid/col/col.tsx b/frontend/antd/grid/col/col.tsx
index 66ba99cf..9ae0923b 100644
--- a/frontend/antd/grid/col/col.tsx
+++ b/frontend/antd/grid/col/col.tsx
@@ -1,34 +1,13 @@
 import { sveltify } from '@svelte-preprocess-react';
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import { type Col as ACol, type GetProps } from 'antd';
-import { isEqual } from 'lodash-es';
 
-import { type Item, useItems } from '../context';
+import { ItemHandler, type ItemHandlerProps } from '../context';
 
-export const Col = sveltify<
-  GetProps<typeof ACol> & {
-    itemIndex: number;
-    itemSlotKey?: string;
-    itemElement?: HTMLElement;
-  },
-  ['children']
->(({ itemIndex, itemSlotKey, itemElement, slots, ...props }) => {
-  const prevValueRef = useRef<Item>();
-  const { setItem } = useItems();
-  useEffect(() => {
-    if (itemElement) {
-      const value: Item = {
-        el: itemElement,
-        props,
-        slots,
-      };
-      if (!isEqual(prevValueRef.current, value)) {
-        prevValueRef.current = value;
-        setItem(itemSlotKey, itemIndex, value);
-      }
-    }
-  }, [itemIndex, itemSlotKey, itemElement, props, setItem, slots]);
-  return <span />;
-});
+export const Col = sveltify<GetProps<typeof ACol> & ItemHandlerProps>(
+  (props) => {
+    return <ItemHandler {...props} />;
+  }
+);
 
 export default Col;
diff --git a/frontend/antd/grid/context.ts b/frontend/antd/grid/context.ts
index a2e82bb9..157b9c8e 100644
--- a/frontend/antd/grid/context.ts
+++ b/frontend/antd/grid/context.ts
@@ -1,5 +1,6 @@
 import { createItemsContext } from '@utils/createItemsContext2';
 
-export const { withItemsContext, useItems } = createItemsContext();
+export const { withItemsContextProvider, useItems, ItemHandler } =
+  createItemsContext();
 
 export * from '@utils/createItemsContext2';
diff --git a/frontend/antd/grid/row/row.tsx b/frontend/antd/grid/row/row.tsx
index fd1f00aa..71c7db02 100644
--- a/frontend/antd/grid/row/row.tsx
+++ b/frontend/antd/grid/row/row.tsx
@@ -2,10 +2,10 @@ import { sveltify } from '@svelte-preprocess-react';
 import { ReactSlot } from '@svelte-preprocess-react/react-slot';
 import { Col as ACol, type GetProps, Row as ARow } from 'antd';
 
-import { useItems, withItemsContext } from '../context';
+import { useItems, withItemsContextProvider } from '../context';
 
 export const Row = sveltify<GetProps<typeof ARow>>(
-  withItemsContext(['default'], ({ children, ...props }) => {
+  withItemsContextProvider(['default'], ({ children, ...props }) => {
     const {
       items: { default: cols },
     } = useItems<['default']>();
diff --git a/frontend/utils/createItemsContext2.tsx b/frontend/utils/createItemsContext2.tsx
index b962092a..0373546c 100644
--- a/frontend/utils/createItemsContext2.tsx
+++ b/frontend/utils/createItemsContext2.tsx
@@ -2,10 +2,15 @@ import {
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
-import { noop } from 'lodash-es';
+import { isEqual, noop } from 'lodash-es';
+
+import { useMemoizedEqualValue } from './hooks/useMemoizedEqualValue';
+import { useMemoizedFn } from './hooks/useMemoizedFn';
 
 export type Item<T extends string = 'children'> =
   | ({
@@ -27,83 +32,172 @@ export type Item<T extends string = 'children'> =
     })
   | undefined;
 
-export interface ItemsContextValue<T extends string[] = []> {
+export interface ItemsContextValue<
+  T extends ('default' | (string & {}))[] = string[],
+> {
   items: {
     [key in T[number]]: Item[];
   };
   setItem: (slotKey: string | undefined, index: number, item: Item) => void;
+  initial: boolean;
 }
 
+export interface ItemHandlerProps<
+  S extends ('default' | (string & {}))[] = [],
+> {
+  itemIndex: number;
+  itemSlotKey?: string;
+  itemElement?: HTMLElement;
+  slots: Record<string, HTMLElement>;
+  children?: React.ReactNode;
+  // subItem
+  itemChildren?: (items: { [key in S[number]]: Item[] }) => Item[] | undefined;
+  allowedSlots?: S;
+}
+export interface ItemsContextProviderProps<
+  S extends ('default' | (string & {}))[],
+> {
+  children?: React.ReactNode;
+  allowedSlots?: S;
+  onChange?: (items: { [key in S[number]]: Item[] }) => void;
+}
 export const createItemsContext = () => {
   const ItemsContext = createContext<ItemsContextValue>({
     items: {},
     setItem: noop,
+    initial: false,
   });
-
-  const withItemsContext = <S extends ('default' | (string & {}))[], T>(
-    allowedSlots: S,
-    Component: React.ComponentType<T>
-  ) => {
-    const ItemsContextWrapper: React.FC<T> = (props) => {
-      const [items, setItems] = useState<ItemsContextValue['items']>(() =>
+  const ItemsContextProvider = <S extends ('default' | (string & {}))[]>({
+    children,
+    allowedSlots: allowedSlotsProp = [] as unknown as S,
+    onChange,
+  }: ItemsContextProviderProps<S>) => {
+    const allowedSlots = useMemoizedEqualValue(allowedSlotsProp);
+    const onChangeMemoized = useMemoizedFn(onChange);
+    const [items, setItems] = useState<ItemsContextValue<S>['items']>(
+      () =>
         allowedSlots.reduce((acc, slotKey) => {
           acc[slotKey] = [];
           return acc;
-        }, {})
-      );
-      const setItem: ItemsContextValue['setItem'] = useCallback(
-        (slotKey, index, value) => {
-          if (slotKey) {
+        }, {}) as ItemsContextValue<S>['items']
+    );
+    const setItem: ItemsContextValue['setItem'] = useCallback(
+      (slotKey, index, value) => {
+        if (slotKey) {
+          setItems((prev) => {
+            const newValue = [...prev[slotKey]];
+            if (allowedSlots.includes(slotKey)) {
+              newValue[index] = value;
+            } else {
+              newValue[index] = undefined;
+            }
+            return {
+              ...prev,
+              [slotKey]: newValue,
+            };
+          });
+        } else {
+          if (allowedSlots.includes('default')) {
             setItems((prev) => {
-              const newValue = [...prev[slotKey]];
-              if (allowedSlots.includes(slotKey)) {
-                newValue[index] = value;
-              } else {
-                newValue[index] = undefined;
-              }
+              const newValue = [...prev['default']];
+              newValue[index] = value;
               return {
                 ...prev,
-                [slotKey]: newValue,
+                default: newValue,
               };
             });
-          } else {
-            if (allowedSlots.includes('default')) {
-              setItems((prev) => {
-                const newValue = [...prev['default']];
-                newValue[index] = value;
-                return {
-                  ...prev,
-                  default: newValue,
-                };
-              });
-            }
           }
-        },
-        []
-      );
+        }
+      },
+      [allowedSlots]
+    );
+    useEffect(() => {
+      onChangeMemoized?.(items);
+    }, [onChangeMemoized, items]);
+    return (
+      <ItemsContext.Provider
+        value={useMemo(() => {
+          return {
+            items,
+            setItem,
+            initial: true,
+          };
+        }, [items, setItem])}
+      >
+        {children}
+      </ItemsContext.Provider>
+    );
+  };
+  const withItemsContextProvider = <S extends ('default' | (string & {}))[], T>(
+    allowedSlots: S,
+    Component: React.ComponentType<T>
+  ) => {
+    const ItemsContextWrapper: React.FC<T> = (props) => {
       return (
-        <ItemsContext.Provider
-          value={useMemo(() => {
-            return {
-              items,
-              setItem,
-            };
-          }, [items, setItem])}
-        >
+        <ItemsContextProvider allowedSlots={allowedSlots}>
           <Component {...(props as any)} />
-        </ItemsContext.Provider>
+        </ItemsContextProvider>
       );
     };
 
     return ItemsContextWrapper;
   };
 
-  const useItems = <T extends string[] = ['default']>() => {
-    return useContext(ItemsContext) as ItemsContextValue<T>;
+  const useItems = <S extends ('default' | (string & {}))[]>() => {
+    return useContext(ItemsContext) as ItemsContextValue<S>;
+  };
+
+  const ItemHandler = <S extends ('default' | (string & {}))[]>({
+    itemIndex,
+    itemSlotKey,
+    itemElement,
+    itemChildren,
+    slots,
+    allowedSlots,
+    children,
+    ...props
+  }: ItemHandlerProps<S>) => {
+    const prevValueRef = useRef<Item>();
+    const [subItems, setSubItems] = useState<ItemsContextValue<S>['items']>(
+      () =>
+        (allowedSlots || []).reduce((acc, slotKey) => {
+          acc[slotKey] = [];
+          return acc;
+        }, {}) as ItemsContextValue<S>['items']
+    );
+    const { setItem } = useItems();
+    useEffect(() => {
+      const value: Item = {
+        el: itemElement,
+        props,
+        slots,
+        children: itemChildren ? itemChildren(subItems) : undefined,
+      };
+
+      if (!isEqual(prevValueRef.current, value)) {
+        prevValueRef.current = value;
+        setItem(itemSlotKey, itemIndex, value);
+      }
+    }, [
+      itemChildren,
+      itemElement,
+      itemIndex,
+      itemSlotKey,
+      props,
+      setItem,
+      slots,
+      subItems,
+    ]);
+    return (
+      <ItemsContextProvider allowedSlots={allowedSlots} onChange={setSubItems}>
+        {children || <span />}
+      </ItemsContextProvider>
+    );
   };
 
   return {
-    withItemsContext,
+    withItemsContextProvider,
     useItems,
+    ItemHandler,
   };
 };
diff --git a/frontend/utils/hooks/useMemoizedEqualValue.ts b/frontend/utils/hooks/useMemoizedEqualValue.ts
new file mode 100644
index 00000000..7c2ac5a4
--- /dev/null
+++ b/frontend/utils/hooks/useMemoizedEqualValue.ts
@@ -0,0 +1,13 @@
+import { useMemo, useRef } from 'react';
+import { isEqual } from 'lodash-es';
+
+export function useMemoizedEqualValue<T>(prop: T): T {
+  const propRef = useRef<T>();
+  return useMemo(() => {
+    if (isEqual(prop, propRef.current)) {
+      return propRef.current as T;
+    }
+    propRef.current = prop;
+    return prop;
+  }, [prop]);
+}