diff --git a/.changeset/stale-dryers-speak.md b/.changeset/stale-dryers-speak.md
new file mode 100644
index 000000000..04530b41e
--- /dev/null
+++ b/.changeset/stale-dryers-speak.md
@@ -0,0 +1,5 @@
+---
+'@vapor-ui/core': patch
+---
+
+Change createSlot to memoize
diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx
index af34a9aa0..c69b991ac 100644
--- a/packages/core/src/components/breadcrumb/breadcrumb.tsx
+++ b/packages/core/src/components/breadcrumb/breadcrumb.tsx
@@ -6,8 +6,8 @@ import { useRender } from '@base-ui-components/react';
 import { MoreCommonOutlineIcon, SlashOutlineIcon } from '@vapor-ui/icons';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { resolveStyles } from '~/utils/resolve-styles';
 import type { VComponentProps } from '~/utils/types';
@@ -152,7 +152,7 @@ export const BreadcrumbSeparator = forwardRef<HTMLLIElement, BreadcrumbSeparator
         const { render, className, children, ...componentProps } = resolveStyles(props);
 
         const { size } = useBreadcrumbContext();
-        const IconElement = createSlot(children || <SlashOutlineIcon size="100%" />);
+        const IconElement = useSlot(children, <SlashOutlineIcon size="100%" />);
 
         return useRender({
             ref,
@@ -180,7 +180,7 @@ export const BreadcrumbEllipsisPrimitive = forwardRef<
     const { render, className, children, ...componentProps } = resolveStyles(props);
 
     const { size } = useBreadcrumbContext();
-    const IconElement = createSlot(children || <MoreCommonOutlineIcon size="100%" />);
+    const IconElement = useSlot(children, <MoreCommonOutlineIcon size="100%" />);
 
     return useRender({
         ref,
diff --git a/packages/core/src/components/checkbox/checkbox.tsx b/packages/core/src/components/checkbox/checkbox.tsx
index 9889f6340..97d2a0629 100644
--- a/packages/core/src/components/checkbox/checkbox.tsx
+++ b/packages/core/src/components/checkbox/checkbox.tsx
@@ -6,8 +6,8 @@ import { forwardRef } from 'react';
 import { Checkbox as BaseCheckbox } from '@base-ui-components/react/checkbox';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { createDataAttributes } from '~/utils/data-attributes';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -40,7 +40,7 @@ export const CheckboxRoot = forwardRef<HTMLButtonElement, CheckboxRoot.Props>((p
     const { size, invalid, indeterminate } = variantProps;
     const dataAttrs = createDataAttributes({ invalid });
 
-    const IndicatorElement = createSlot(children || <CheckboxIndicatorPrimitive />);
+    const IndicatorElement = useSlot(children, <CheckboxIndicatorPrimitive />);
 
     return (
         <CheckboxProvider value={{ size, indeterminate }}>
diff --git a/packages/core/src/components/dialog/dialog.tsx b/packages/core/src/components/dialog/dialog.tsx
index 10f7dbd5f..972514a47 100644
--- a/packages/core/src/components/dialog/dialog.tsx
+++ b/packages/core/src/components/dialog/dialog.tsx
@@ -7,8 +7,8 @@ import { Dialog as BaseDialog } from '@base-ui-components/react/dialog';
 import { useRender } from '@base-ui-components/react/use-render';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { resolveStyles } from '~/utils/resolve-styles';
 import type { VComponentProps } from '~/utils/types';
 
@@ -92,8 +92,8 @@ DialogPopupPrimitive.displayName = 'Dialog.PopupPrimitive';
 export const DialogPopup = forwardRef<HTMLDivElement, DialogPopup.Props>((props, ref) => {
     const { portalElement, overlayElement, ...componentProps } = resolveStyles(props);
 
-    const PortalElement = createSlot(portalElement || <DialogPortalPrimitive />);
-    const DialogOverlayPrimitiveElement = createSlot(overlayElement || <DialogOverlayPrimitive />);
+    const PortalElement = useSlot(portalElement, <DialogPortalPrimitive />);
+    const DialogOverlayPrimitiveElement = useSlot(overlayElement, <DialogOverlayPrimitive />);
 
     return (
         <PortalElement>
diff --git a/packages/core/src/components/icon-button/icon-button.tsx b/packages/core/src/components/icon-button/icon-button.tsx
index 254ad41b7..d850e91e5 100644
--- a/packages/core/src/components/icon-button/icon-button.tsx
+++ b/packages/core/src/components/icon-button/icon-button.tsx
@@ -1,8 +1,8 @@
-import { forwardRef, useMemo } from 'react';
+import { forwardRef } from 'react';
 
 import clsx from 'clsx';
 
-import { createSlot } from '~/libs/create-slot';
+import { useSlot } from '~/hooks/use-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { resolveStyles } from '~/utils/resolve-styles';
 import type { VComponentProps } from '~/utils/types';
@@ -25,7 +25,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButton.Props>((props
 
     const { size } = otherProps;
 
-    const IconElement = useMemo(() => createSlot(children), [children]);
+    const IconElement = useSlot(children);
 
     return (
         <Button
diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx
index 3427cd963..3a505fa5a 100644
--- a/packages/core/src/components/menu/menu.tsx
+++ b/packages/core/src/components/menu/menu.tsx
@@ -7,8 +7,8 @@ import { Menu as BaseMenu } from '@base-ui-components/react';
 import { ChevronRightOutlineIcon, ConfirmOutlineIcon } from '@vapor-ui/icons';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { composeRefs } from '~/utils/compose-refs';
 import { resolveStyles } from '~/utils/resolve-styles';
 import type { VComponentProps } from '~/utils/types';
@@ -104,8 +104,8 @@ MenuPopupPrimitive.displayName = 'Menu.PopupPrimitive';
 
 export const MenuPopup = forwardRef<HTMLDivElement, MenuPopup.Props>(
     ({ portalElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <MenuPortalPrimitive />);
-        const PositionerElement = createSlot(positionerElement || <MenuPositionerPrimitive />);
+        const PortalElement = useSlot(portalElement, <MenuPortalPrimitive />);
+        const PositionerElement = useSlot(positionerElement, <MenuPositionerPrimitive />);
 
         return (
             <PortalElement>
@@ -270,9 +270,10 @@ MenuSubmenuPopupPrimitive.displayName = 'Menu.SubmenuPopupPrimitive';
 
 export const MenuSubmenuPopup = forwardRef<HTMLDivElement, MenuSubmenuPopup.Props>(
     ({ portalElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <MenuPortalPrimitive />);
-        const PositionerElement = createSlot(
-            positionerElement || <MenuPositionerPrimitive side="right" sideOffset={0} />,
+        const PortalElement = useSlot(portalElement, <MenuPortalPrimitive />);
+        const PositionerElement = useSlot(
+            positionerElement,
+            <MenuPositionerPrimitive side="right" sideOffset={0} />,
         );
 
         return (
diff --git a/packages/core/src/components/multi-select/multi-select.tsx b/packages/core/src/components/multi-select/multi-select.tsx
index 72c8378a3..5e5c6db8f 100644
--- a/packages/core/src/components/multi-select/multi-select.tsx
+++ b/packages/core/src/components/multi-select/multi-select.tsx
@@ -7,8 +7,8 @@ import { Select as BaseSelect } from '@base-ui-components/react';
 import { ChevronDownOutlineIcon, ConfirmOutlineIcon } from '@vapor-ui/icons';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { createDataAttributes } from '~/utils/data-attributes';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -181,7 +181,7 @@ export const MultiSelectTriggerIconPrimitive = forwardRef<
     const { className, children, ...componentProps } = resolveStyles(props);
 
     const { size } = useMultiSelectContext();
-    const IconElement = createSlot(children || <ChevronDownOutlineIcon size="100%" />);
+    const IconElement = useSlot(children, <ChevronDownOutlineIcon size="100%" />);
 
     return (
         <BaseSelect.Icon
@@ -273,10 +273,8 @@ MultiSelectPopupPrimitive.displayName = 'MultiSelect.PopupPrimitive';
 
 export const MultiSelectPopup = forwardRef<HTMLDivElement, MultiSelectPopup.Props>(
     ({ portalElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <MultiSelectPortalPrimitive />);
-        const PositionerElement = createSlot(
-            positionerElement || <MultiSelectPositionerPrimitive />,
-        );
+        const PortalElement = useSlot(portalElement, <MultiSelectPortalPrimitive />);
+        const PositionerElement = useSlot(positionerElement, <MultiSelectPositionerPrimitive />);
 
         return (
             <PortalElement>
@@ -318,7 +316,7 @@ export const MultiSelectItemIndicatorPrimitive = forwardRef<
 >((props, ref) => {
     const { className, children, ...componentProps } = resolveStyles(props);
 
-    const IconElement = createSlot(children || <ConfirmOutlineIcon size="100%" />);
+    const IconElement = useSlot(children, <ConfirmOutlineIcon size="100%" />);
 
     return (
         <BaseSelect.ItemIndicator
diff --git a/packages/core/src/components/navigation-menu/navigation-menu.tsx b/packages/core/src/components/navigation-menu/navigation-menu.tsx
index 8bff3913d..237ca8138 100644
--- a/packages/core/src/components/navigation-menu/navigation-menu.tsx
+++ b/packages/core/src/components/navigation-menu/navigation-menu.tsx
@@ -8,8 +8,8 @@ import { ChevronDownOutlineIcon } from '@vapor-ui/icons';
 import clsx from 'clsx';
 
 import { useMutationObserver } from '~/hooks/use-mutation-observer';
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { vars } from '~/styles/themes.css';
 import { composeRefs } from '~/utils/compose-refs';
 import { createSplitProps } from '~/utils/create-split-props';
@@ -167,7 +167,7 @@ export const NavigationMenuTriggerIndicatorPrimitive = forwardRef<
 >((props, ref) => {
     const { className, children, ...componentProps } = resolveStyles(props);
 
-    const IconElement = createSlot(children || <ChevronDownOutlineIcon />);
+    const IconElement = useSlot(children, <ChevronDownOutlineIcon />);
 
     return (
         <BaseNavigationMenu.Icon
@@ -403,11 +403,9 @@ NavigationMenuViewportPrimitive.displayName = 'NavigationMenu.ViewportPrimitive'
 
 export const NavigationMenuViewport = forwardRef<HTMLDivElement, NavigationMenuViewport.Props>(
     ({ portalElement, positionerElement, popupElement, className, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement ?? <NavigationMenuPortalPrimitive />);
-        const PopupElement = createSlot(popupElement ?? <NavigationMenuPopupPrimitive />);
-        const PositionerElement = createSlot(
-            positionerElement ?? <NavigationMenuPositionerPrimitive />,
-        );
+        const PortalElement = useSlot(portalElement, <NavigationMenuPortalPrimitive />);
+        const PopupElement = useSlot(popupElement, <NavigationMenuPopupPrimitive />);
+        const PositionerElement = useSlot(positionerElement, <NavigationMenuPositionerPrimitive />);
 
         return (
             <PortalElement>
diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx
index 1ec00fc25..85ce6f774 100644
--- a/packages/core/src/components/popover/popover.tsx
+++ b/packages/core/src/components/popover/popover.tsx
@@ -7,7 +7,7 @@ import { Popover as BasePopover } from '@base-ui-components/react/popover';
 import clsx from 'clsx';
 
 import { useMutationObserver } from '~/hooks/use-mutation-observer';
-import { createSlot } from '~/libs/create-slot';
+import { useSlot } from '~/hooks/use-slot';
 import { vars } from '~/styles/themes.css';
 import { composeRefs } from '~/utils/compose-refs';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -157,8 +157,8 @@ const extractPositions = (dataset: DOMStringMap) => {
 
 export const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopup.Props>(
     ({ portalElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <PopoverPortalPrimitive />);
-        const PositionerElement = createSlot(positionerElement || <PopoverPositionerPrimitive />);
+        const PortalElement = useSlot(portalElement, <PopoverPortalPrimitive />);
+        const PositionerElement = useSlot(positionerElement, <PopoverPositionerPrimitive />);
 
         return (
             <PortalElement>
diff --git a/packages/core/src/components/radio/radio.tsx b/packages/core/src/components/radio/radio.tsx
index f897c58d2..f724a9950 100644
--- a/packages/core/src/components/radio/radio.tsx
+++ b/packages/core/src/components/radio/radio.tsx
@@ -5,7 +5,7 @@ import { forwardRef } from 'react';
 import { Radio as BaseRadio } from '@base-ui-components/react';
 import clsx from 'clsx';
 
-import { createSlot } from '~/libs/create-slot';
+import { useSlot } from '~/hooks/use-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { createDataAttributes } from '~/utils/data-attributes';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -36,7 +36,7 @@ export const RadioRoot = forwardRef<HTMLButtonElement, RadioRoot.Props>((props,
 
     const dataAttrs = createDataAttributes({ invalid });
 
-    const IndicatorElement = createSlot(children || <RadioIndicatorPrimitive />);
+    const IndicatorElement = useSlot(children, <RadioIndicatorPrimitive />);
 
     return (
         <BaseRadio.Root
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
index 2d56cef0f..b3c0f54f9 100644
--- a/packages/core/src/components/select/select.tsx
+++ b/packages/core/src/components/select/select.tsx
@@ -7,8 +7,8 @@ import { Select as BaseSelect } from '@base-ui-components/react';
 import { ChevronDownOutlineIcon, ConfirmOutlineIcon } from '@vapor-ui/icons';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { createDataAttributes } from '~/utils/data-attributes';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -153,7 +153,7 @@ export const SelectTriggerIconPrimitive = forwardRef<
 
     const { size } = useSelectContext();
 
-    const IconElement = createSlot(children || <ChevronDownOutlineIcon size="100%" />);
+    const IconElement = useSlot(children, <ChevronDownOutlineIcon size="100%" />);
 
     return (
         <BaseSelect.Icon
@@ -247,8 +247,8 @@ SelectPopupPrimitive.displayName = 'Select.PopupPrimitive';
 
 export const SelectPopup = forwardRef<HTMLDivElement, SelectPopup.Props>(
     ({ portalElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <SelectPortalPrimitive />);
-        const PositionerElement = createSlot(positionerElement || <SelectPositionerPrimitive />);
+        const PortalElement = useSlot(portalElement, <SelectPortalPrimitive />);
+        const PositionerElement = useSlot(positionerElement, <SelectPositionerPrimitive />);
 
         return (
             <PortalElement>
@@ -289,7 +289,7 @@ export const SelectItemIndicatorPrimitive = forwardRef<
     SelectItemIndicatorPrimitive.Props
 >((props, ref) => {
     const { className, children, ...componentProps } = resolveStyles(props);
-    const IconElement = createSlot(children || <ConfirmOutlineIcon />);
+    const IconElement = useSlot(children, <ConfirmOutlineIcon />);
 
     return (
         <BaseSelect.ItemIndicator
diff --git a/packages/core/src/components/sheet/sheet.test.tsx b/packages/core/src/components/sheet/sheet.test.tsx
index d57a3553f..d3dcbde60 100644
--- a/packages/core/src/components/sheet/sheet.test.tsx
+++ b/packages/core/src/components/sheet/sheet.test.tsx
@@ -1,8 +1,11 @@
+import { useState } from 'react';
+
 import { cleanup, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'vitest-axe';
 
 import { Sheet } from '.';
+import { Tabs } from '../tabs';
 
 describe('Sheet', () => {
     const consoleWarnMockFunction = vi.spyOn(console, 'warn').mockImplementation(vi.fn());
@@ -154,6 +157,22 @@ describe('Sheet', () => {
         expect(popup).toBeInTheDocument();
         expect(popup).not.toBeVisible();
     });
+
+    it('should keeping value tab in sheet when rerender', async () => {
+        const rendered = render(<RerenderSheetTest />);
+        const trigger = rendered.getByText(TRIGGER_TEXT);
+
+        // Open Sheet
+        await userEvent.click(trigger);
+        const packageTab = rendered.getByRole('tab', { name: 'Package' });
+
+        // Switch to Package tab
+        await userEvent.click(packageTab);
+        const packagePanel = rendered.getByTestId('package-panel');
+        expect(packagePanel).toBeVisible();
+        await userEvent.click(rendered.getByTestId('package-button'));
+        expect(packagePanel).toBeVisible();
+    });
 });
 
 const TRIGGER_TEXT = 'Trigger';
@@ -199,3 +218,33 @@ const UndefinedDescriptionSheetTest = (props: Sheet.Root.Props) => {
         </Sheet.Root>
     );
 };
+
+const RerenderSheetTest = (props: Sheet.Root.Props) => {
+    const [, rerender] = useState({});
+    return (
+        <Sheet.Root {...props}>
+            <Sheet.Trigger>{TRIGGER_TEXT}</Sheet.Trigger>
+            <Sheet.Popup>
+                <Sheet.Body>
+                    <Tabs.Root defaultValue={'sort'}>
+                        <Tabs.List>
+                            <Tabs.Trigger value="sort">Sort</Tabs.Trigger>
+                            <Tabs.Trigger value="package">Package</Tabs.Trigger>
+                            <Tabs.Trigger value="status">Status</Tabs.Trigger>
+                            <Tabs.Trigger value="tag">Tag</Tabs.Trigger>
+                            <Tabs.Indicator />
+                        </Tabs.List>
+                        <Tabs.Panel value="sort">1</Tabs.Panel>
+                        <Tabs.Panel value="package" data-testid="package-panel">
+                            <button data-testid="package-button" onClick={() => rerender({})}>
+                                rerender
+                            </button>
+                        </Tabs.Panel>
+                        <Tabs.Panel value="status">3</Tabs.Panel>
+                        <Tabs.Panel value="tag">4</Tabs.Panel>
+                    </Tabs.Root>
+                </Sheet.Body>
+            </Sheet.Popup>
+        </Sheet.Root>
+    );
+};
diff --git a/packages/core/src/components/sheet/sheet.tsx b/packages/core/src/components/sheet/sheet.tsx
index 4d292e65f..830bdde31 100644
--- a/packages/core/src/components/sheet/sheet.tsx
+++ b/packages/core/src/components/sheet/sheet.tsx
@@ -9,10 +9,10 @@ import { useEventCallback } from '@base-ui-components/utils/useEventCallback';
 import clsx from 'clsx';
 
 import { useOpenChangeComplete } from '~/hooks/use-open-change-complete';
+import { useSlot } from '~/hooks/use-slot';
 import type { TransitionStatus } from '~/hooks/use-transition-status';
 import { useTransitionStatus } from '~/hooks/use-transition-status';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { composeRefs } from '~/utils/compose-refs';
 import { createSplitProps } from '~/utils/create-split-props';
 import { createDataAttributes } from '~/utils/data-attributes';
@@ -190,9 +190,9 @@ SheetPopupPrimitive.displayName = 'Sheet.PopupPrimitive';
 
 export const SheetPopup = forwardRef<HTMLDivElement, SheetPopup.Props>(
     ({ portalElement, overlayElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <SheetPortalPrimitive />);
-        const OverlayElement = createSlot(overlayElement || <SheetOverlayPrimitive />);
-        const PositionerElement = createSlot(positionerElement || <SheetPositionerPrimitive />);
+        const PortalElement = useSlot(portalElement, <SheetPortalPrimitive />);
+        const OverlayElement = useSlot(overlayElement, <SheetOverlayPrimitive />);
+        const PositionerElement = useSlot(positionerElement, <SheetPositionerPrimitive />);
 
         return (
             <PortalElement>
diff --git a/packages/core/src/components/switch/switch.tsx b/packages/core/src/components/switch/switch.tsx
index 318451eb7..da7deb46f 100644
--- a/packages/core/src/components/switch/switch.tsx
+++ b/packages/core/src/components/switch/switch.tsx
@@ -5,8 +5,8 @@ import { forwardRef, useMemo } from 'react';
 import { Switch as BaseSwitch } from '@base-ui-components/react';
 import clsx from 'clsx';
 
+import { useSlot } from '~/hooks/use-slot';
 import { createContext } from '~/libs/create-context';
-import { createSlot } from '~/libs/create-slot';
 import { createSplitProps } from '~/utils/create-split-props';
 import { createDataAttributes } from '~/utils/data-attributes';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -40,7 +40,7 @@ export const SwitchRoot = forwardRef<HTMLButtonElement, SwitchRoot.Props>((props
 
     const dataAttrs = createDataAttributes({ invalid });
 
-    const ThumbElement = useMemo(() => createSlot(<SwitchThumbPrimitive />), []);
+    const ThumbElement = useSlot(useMemo(() => <SwitchThumbPrimitive />, []));
     const children = childrenProp || <ThumbElement />;
 
     return (
diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx
index 37435027a..f192959c3 100644
--- a/packages/core/src/components/tooltip/tooltip.tsx
+++ b/packages/core/src/components/tooltip/tooltip.tsx
@@ -7,7 +7,7 @@ import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
 import clsx from 'clsx';
 
 import { useMutationObserver } from '~/hooks/use-mutation-observer';
-import { createSlot } from '~/libs/create-slot';
+import { useSlot } from '~/hooks/use-slot';
 import { vars } from '~/styles/themes.css';
 import { composeRefs } from '~/utils/compose-refs';
 import { resolveStyles } from '~/utils/resolve-styles';
@@ -155,9 +155,10 @@ const extractPositions = (dataset: DOMStringMap) => {
 
 export const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopup.Props>(
     ({ portalElement, positionerElement, ...props }, ref) => {
-        const PortalElement = createSlot(portalElement || <TooltipPortalPrimitive />);
-        const PositionerElement = createSlot(
-            positionerElement || <TooltipPositionerPrimitive side="top" align="center" />,
+        const PortalElement = useSlot(portalElement, <TooltipPortalPrimitive />);
+        const PositionerElement = useSlot(
+            positionerElement,
+            <TooltipPositionerPrimitive side="top" align="center" />,
         );
 
         return (
diff --git a/packages/core/src/hooks/use-slot.ts b/packages/core/src/hooks/use-slot.ts
new file mode 100644
index 000000000..9fae19e7a
--- /dev/null
+++ b/packages/core/src/hooks/use-slot.ts
@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { Children, Fragment, cloneElement, forwardRef, isValidElement, useMemo } from 'react';
+
+import { composeRefs } from '~/utils/compose-refs';
+import { getElementRef } from '~/utils/get-element-ref';
+import { mergeProps } from '~/utils/merge-props';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Any = any;
+
+interface SlotProps extends HTMLAttributes<HTMLElement> {}
+
+export const useSlot = <Element extends Any, Props extends SlotProps>(
+    _children: ReactNode,
+    fallback?: ReactNode,
+) => {
+    const Slot = useMemo(
+        () =>
+            forwardRef<Element, Props>((slotProps, forwardedRef) => {
+                const children = _children || fallback;
+                if (!isValidElement(children)) {
+                    return Children.count(children) > 1 ? Children.only(null) : null;
+                }
+
+                const childrenRef = getElementRef(children);
+                const props = mergeProps(slotProps || {}, children.props);
+
+                if (children.type !== Fragment && children.props.ref) {
+                    props.ref = composeRefs(forwardedRef, childrenRef);
+                }
+
+                return cloneElement(children, props);
+            }),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [_children],
+    );
+
+    return Slot;
+};
diff --git a/packages/core/src/libs/create-slot.ts b/packages/core/src/libs/create-slot.ts
deleted file mode 100644
index 862d6d893..000000000
--- a/packages/core/src/libs/create-slot.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import { Children, Fragment, cloneElement, forwardRef, isValidElement } from 'react';
-
-import { composeRefs } from '~/utils/compose-refs';
-import { getElementRef } from '~/utils/get-element-ref';
-import { mergeProps } from '~/utils/merge-props';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Any = any;
-
-interface SlotProps extends HTMLAttributes<HTMLElement> {}
-
-export const createSlot = <Element extends Any, Props extends SlotProps>(children: ReactNode) => {
-    const Slot = forwardRef<Element, Props>((slotProps, forwardedRef) => {
-        if (!isValidElement(children)) {
-            return Children.count(children) > 1 ? Children.only(null) : null;
-        }
-
-        const childrenRef = getElementRef(children);
-        const props = mergeProps(slotProps || {}, children.props);
-
-        if (children.type !== Fragment && children.props.ref) {
-            props.ref = composeRefs(forwardedRef, childrenRef);
-        }
-
-        return cloneElement(children, props);
-    });
-
-    return Slot;
-};