fix: lint

2026-02-18 06:47:02 +08:00 · 2026-02-17 11:50:23 +08:00
parent 562eb5c309
commit 980da594ab
13 changed files with 280 additions and 196 deletions
--- a/packages/frontend/admin/src/components/ui/carousel.tsx
+++ b/packages/frontend/admin/src/components/ui/carousel.tsx
@@ -4,7 +4,15 @@ import useEmblaCarousel, {
  type UseEmblaCarouselType,
 } from 'embla-carousel-react';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
-import * as React from 'react';
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';

 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -27,10 +35,10 @@ type CarouselContextProps = {
  canScrollNext: boolean;
 } & CarouselProps;

-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+const CarouselContext = createContext<CarouselContextProps | null>(null);

 function useCarousel() {
-  const context = React.useContext(CarouselContext);
+  const context = useContext(CarouselContext);

  if (!context) {
    throw new Error('useCarousel must be used within a <Carousel />');
@@ -39,7 +47,7 @@ function useCarousel() {
  return context;
 }

-const Carousel = React.forwardRef<
+const Carousel = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
 >(
@@ -62,10 +70,10 @@ const Carousel = React.forwardRef<
      },
      plugins
    );
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    const [canScrollPrev, setCanScrollPrev] = useState(false);
+    const [canScrollNext, setCanScrollNext] = useState(false);

-    const onSelect = React.useCallback((api: CarouselApi) => {
+    const onSelect = useCallback((api: CarouselApi) => {
      if (!api) {
        return;
      }
@@ -74,15 +82,15 @@ const Carousel = React.forwardRef<
      setCanScrollNext(api.canScrollNext());
    }, []);

-    const scrollPrev = React.useCallback(() => {
+    const scrollPrev = useCallback(() => {
      api?.scrollPrev();
    }, [api]);

-    const scrollNext = React.useCallback(() => {
+    const scrollNext = useCallback(() => {
      api?.scrollNext();
    }, [api]);

-    const handleKeyDown = React.useCallback(
+    const handleKeyDown = useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === 'ArrowLeft') {
          event.preventDefault();
@@ -95,7 +103,7 @@ const Carousel = React.forwardRef<
      [scrollPrev, scrollNext]
    );

-    React.useEffect(() => {
+    useEffect(() => {
      if (!api || !setApi) {
        return;
      }
@@ -103,7 +111,7 @@ const Carousel = React.forwardRef<
      setApi(api);
    }, [api, setApi]);

-    React.useEffect(() => {
+    useEffect(() => {
      if (!api) {
        return;
      }
@@ -117,20 +125,33 @@ const Carousel = React.forwardRef<
      };
    }, [api, onSelect]);

+    const resolvedOrientation =
+      orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal');
+    const carouselContextValue = useMemo(
+      () => ({
+        carouselRef,
+        api,
+        opts,
+        orientation: resolvedOrientation,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }),
+      [
+        api,
+        canScrollNext,
+        canScrollPrev,
+        carouselRef,
+        opts,
+        resolvedOrientation,
+        scrollNext,
+        scrollPrev,
+      ]
+    );
+
    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
+      <CarouselContext.Provider value={carouselContextValue}>
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
@@ -147,7 +168,7 @@ const Carousel = React.forwardRef<
 );
 Carousel.displayName = 'Carousel';

-const CarouselContent = React.forwardRef<
+const CarouselContent = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
@@ -169,7 +190,7 @@ const CarouselContent = React.forwardRef<
 });
 CarouselContent.displayName = 'CarouselContent';

-const CarouselItem = React.forwardRef<
+const CarouselItem = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
@@ -191,7 +212,7 @@ const CarouselItem = React.forwardRef<
 });
 CarouselItem.displayName = 'CarouselItem';

-const CarouselPrevious = React.forwardRef<
+const CarouselPrevious = forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
 >(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
@@ -220,7 +241,7 @@ const CarouselPrevious = React.forwardRef<
 });
 CarouselPrevious.displayName = 'CarouselPrevious';

-const CarouselNext = React.forwardRef<
+const CarouselNext = forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
 >(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
--- a/packages/frontend/admin/src/components/ui/chart.tsx
+++ b/packages/frontend/admin/src/components/ui/chart.tsx
@@ -1,5 +1,5 @@
 import { cn } from '@affine/admin/utils';
-import * as React from 'react';
+import { createContext, forwardRef, useContext, useId, useMemo } from 'react';
 import type { TooltipProps } from 'recharts';
 import { ResponsiveContainer, Tooltip as RechartsTooltip } from 'recharts';

@@ -18,10 +18,10 @@ type ChartContextValue = {
  config: ChartConfig;
 };

-const ChartContext = React.createContext<ChartContextValue | null>(null);
+const ChartContext = createContext<ChartContextValue | null>(null);

 function useChart() {
-  const value = React.useContext(ChartContext);
+  const value = useContext(ChartContext);
  if (!value) {
    throw new Error('useChart must be used within <ChartContainer />');
  }
@@ -75,13 +75,14 @@ type ChartContainerProps = React.ComponentProps<'div'> & {
  children: React.ComponentProps<typeof ResponsiveContainer>['children'];
 };

-const ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(
+const ChartContainer = forwardRef<HTMLDivElement, ChartContainerProps>(
  ({ id, className, children, config, ...props }, ref) => {
-    const uniqueId = React.useId();
+    const uniqueId = useId();
    const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;
+    const chartContextValue = useMemo(() => ({ config }), [config]);

    return (
-      <ChartContext.Provider value={{ config }}>
+      <ChartContext.Provider value={chartContextValue}>
        <div
          ref={ref}
          data-chart={chartId}
@@ -113,61 +114,60 @@ type TooltipContentProps = {
  valueFormatter?: (value: number, key: string) => React.ReactNode;
 };

-const ChartTooltipContent = React.forwardRef<
-  HTMLDivElement,
-  TooltipContentProps
->(({ active, payload, label, labelFormatter, valueFormatter }, ref) => {
-  const { config } = useChart();
+const ChartTooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
+  ({ active, payload, label, labelFormatter, valueFormatter }, ref) => {
+    const { config } = useChart();

-  if (!active || !payload?.length) {
-    return null;
-  }
+    if (!active || !payload?.length) {
+      return null;
+    }

-  const title = labelFormatter ? labelFormatter(label ?? '', payload) : label;
+    const title = labelFormatter ? labelFormatter(label ?? '', payload) : label;

-  return (
-    <div
-      ref={ref}
-      className="min-w-44 rounded-md border bg-popover px-3 py-2 text-xs text-popover-foreground shadow-md"
-    >
-      {title ? (
-        <div className="mb-2 font-medium text-foreground/90">{title}</div>
-      ) : null}
-      <div className="space-y-1">
-        {payload.map((item, index) => {
-          const dataKey = String(item.dataKey ?? item.name ?? index);
-          const itemConfig = config[dataKey];
-          const labelText = itemConfig?.label ?? item.name ?? dataKey;
-          const numericValue =
-            typeof item.value === 'number'
-              ? item.value
-              : Number(item.value ?? 0);
-          const valueText = valueFormatter
-            ? valueFormatter(numericValue, dataKey)
-            : numericValue;
-          const color = item.color ?? `var(--color-${dataKey})`;
+    return (
+      <div
+        ref={ref}
+        className="min-w-44 rounded-md border bg-popover px-3 py-2 text-xs text-popover-foreground shadow-md"
+      >
+        {title ? (
+          <div className="mb-2 font-medium text-foreground/90">{title}</div>
+        ) : null}
+        <div className="space-y-1">
+          {payload.map((item, index) => {
+            const dataKey = String(item.dataKey ?? item.name ?? index);
+            const itemConfig = config[dataKey];
+            const labelText = itemConfig?.label ?? item.name ?? dataKey;
+            const numericValue =
+              typeof item.value === 'number'
+                ? item.value
+                : Number(item.value ?? 0);
+            const valueText = valueFormatter
+              ? valueFormatter(numericValue, dataKey)
+              : numericValue;
+            const color = item.color ?? `var(--color-${dataKey})`;

-          return (
-            <div
-              key={`${dataKey}-${index}`}
-              className="flex items-center gap-2"
-            >
-              <span
-                className="h-2 w-2 rounded-full"
-                style={{ backgroundColor: color }}
-                aria-hidden="true"
-              />
-              <span className="text-muted-foreground">{labelText}</span>
-              <span className="ml-auto font-medium tabular-nums">
-                {valueText}
-              </span>
-            </div>
-          );
-        })}
+            return (
+              <div
+                key={`${dataKey}-${index}`}
+                className="flex items-center gap-2"
+              >
+                <span
+                  className="h-2 w-2 rounded-full"
+                  style={{ backgroundColor: color }}
+                  aria-hidden="true"
+                />
+                <span className="text-muted-foreground">{labelText}</span>
+                <span className="ml-auto font-medium tabular-nums">
+                  {valueText}
+                </span>
+              </div>
+            );
+          })}
+        </div>
      </div>
-    </div>
-  );
-});
+    );
+  }
+);
 ChartTooltipContent.displayName = 'ChartTooltipContent';

 export { ChartContainer, ChartTooltip, ChartTooltipContent };
--- a/packages/frontend/admin/src/components/ui/form.tsx
+++ b/packages/frontend/admin/src/components/ui/form.tsx
@@ -2,7 +2,7 @@ import { Label } from '@affine/admin/components/ui/label';
 import { cn } from '@affine/admin/utils';
 import type * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
-import * as React from 'react';
+import { createContext, forwardRef, useContext, useId, useMemo } from 'react';
 import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import { Controller, FormProvider, useFormContext } from 'react-hook-form';

@@ -15,7 +15,7 @@ type FormFieldContextValue<
  name: TName;
 };

-const FormFieldContext = React.createContext<FormFieldContextValue>(
+const FormFieldContext = createContext<FormFieldContextValue>(
  {} as FormFieldContextValue
 );

@@ -25,16 +25,21 @@ const FormField = <
 >({
  ...props
 }: ControllerProps<TFieldValues, TName>) => {
+  const formFieldContextValue = useMemo(
+    () => ({ name: props.name }),
+    [props.name]
+  );
+
  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
+    <FormFieldContext.Provider value={formFieldContextValue}>
      <Controller {...props} />
    </FormFieldContext.Provider>
  );
 };

 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
+  const fieldContext = useContext(FormFieldContext);
+  const itemContext = useContext(FormItemContext);
  const { getFieldState, formState } = useFormContext();

  const fieldState = getFieldState(fieldContext.name, formState);
@@ -59,26 +64,27 @@ type FormItemContextValue = {
  id: string;
 };

-const FormItemContext = React.createContext<FormItemContextValue>(
+const FormItemContext = createContext<FormItemContextValue>(
  {} as FormItemContextValue
 );

-const FormItem = React.forwardRef<
+const FormItem = forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId();
+  const id = useId();
+  const formItemContextValue = useMemo(() => ({ id }), [id]);

  return (
-    <FormItemContext.Provider value={{ id }}>
+    <FormItemContext.Provider value={formItemContextValue}>
      <div ref={ref} className={cn('space-y-2', className)} {...props} />
    </FormItemContext.Provider>
  );
 });
 FormItem.displayName = 'FormItem';

-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
+const FormLabel = forwardRef<
+  React.ComponentRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
  const { error, formItemId } = useFormField();
@@ -94,8 +100,8 @@ const FormLabel = React.forwardRef<
 });
 FormLabel.displayName = 'FormLabel';

-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
+const FormControl = forwardRef<
+  React.ComponentRef<typeof Slot>,
  React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
  const { error, formItemId, formDescriptionId, formMessageId } =
@@ -117,7 +123,7 @@ const FormControl = React.forwardRef<
 });
 FormControl.displayName = 'FormControl';

-const FormDescription = React.forwardRef<
+const FormDescription = forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
@@ -134,7 +140,7 @@ const FormDescription = React.forwardRef<
 });
 FormDescription.displayName = 'FormDescription';

-const FormMessage = React.forwardRef<
+const FormMessage = forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
--- a/packages/frontend/admin/src/components/ui/toggle-group.tsx
+++ b/packages/frontend/admin/src/components/ui/toggle-group.tsx
@@ -2,39 +2,44 @@ import { toggleVariants } from '@affine/admin/components/ui/toggle';
 import { cn } from '@affine/admin/utils';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import type { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
+import { createContext, forwardRef, useContext, useMemo } from 'react';

-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
+const ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({
  size: 'default',
  variant: 'default',
 });

-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+const ToggleGroup = forwardRef<
+  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
    VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn('flex items-center justify-center gap-1', className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-));
+>(({ className, variant, size, children, ...props }, ref) => {
+  const toggleGroupContextValue = useMemo(
+    () => ({ variant, size }),
+    [size, variant]
+  );
+
+  return (
+    <ToggleGroupPrimitive.Root
+      ref={ref}
+      className={cn('flex items-center justify-center gap-1', className)}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={toggleGroupContextValue}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+});

 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;

-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+const ToggleGroupItem = forwardRef<
+  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
    VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
+  const context = useContext(ToggleGroupContext);

  return (
    <ToggleGroupPrimitive.Item
--- a/packages/frontend/admin/src/modules/layout.tsx
+++ b/packages/frontend/admin/src/modules/layout.tsx
@@ -7,7 +7,7 @@ import { TooltipProvider } from '@affine/admin/components/ui/tooltip';
 import { cn } from '@affine/admin/utils';
 import { AlignJustifyIcon } from 'lucide-react';
 import type { PropsWithChildren, ReactNode, RefObject } from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { ImperativePanelHandle } from 'react-resizable-panels';
 import { useLocation } from 'react-router-dom';

@@ -121,30 +121,47 @@ export function Layout({ children }: PropsWithChildren) {
    handleSetRightPanelContent(null);
    closeRightPanel();
  }, [location.pathname, closeRightPanel, handleSetRightPanelContent]);
+  const panelContextValue = useMemo(
+    () => ({
+      leftPanel: {
+        isOpen: leftOpen,
+        panelContent: leftPanelContent,
+        setPanelContent: setLeftPanelContent,
+        togglePanel: toggleLeftPanel,
+        openPanel: openLeftPanel,
+        closePanel: closeLeftPanel,
+      },
+      rightPanel: {
+        isOpen: rightOpen,
+        panelContent: rightPanelContent,
+        setPanelContent: handleSetRightPanelContent,
+        togglePanel: toggleRightPanel,
+        openPanel: openRightPanel,
+        closePanel: closeRightPanel,
+        hasDirtyChanges: rightPanelHasDirtyChanges,
+        setHasDirtyChanges: setRightPanelHasDirtyChanges,
+      },
+    }),
+    [
+      closeLeftPanel,
+      closeRightPanel,
+      handleSetRightPanelContent,
+      leftOpen,
+      leftPanelContent,
+      openLeftPanel,
+      openRightPanel,
+      rightOpen,
+      rightPanelContent,
+      rightPanelHasDirtyChanges,
+      setLeftPanelContent,
+      setRightPanelHasDirtyChanges,
+      toggleLeftPanel,
+      toggleRightPanel,
+    ]
+  );

  return (
-    <PanelContext.Provider
-      value={{
-        leftPanel: {
-          isOpen: leftOpen,
-          panelContent: leftPanelContent,
-          setPanelContent: setLeftPanelContent,
-          togglePanel: toggleLeftPanel,
-          openPanel: openLeftPanel,
-          closePanel: closeLeftPanel,
-        },
-        rightPanel: {
-          isOpen: rightOpen,
-          panelContent: rightPanelContent,
-          setPanelContent: handleSetRightPanelContent,
-          togglePanel: toggleRightPanel,
-          openPanel: openRightPanel,
-          closePanel: closeRightPanel,
-          hasDirtyChanges: rightPanelHasDirtyChanges,
-          setHasDirtyChanges: setRightPanelHasDirtyChanges,
-        },
-      }}
-    >
+    <PanelContext.Provider value={panelContextValue}>
      <TooltipProvider delayDuration={0}>
        <div className="flex h-dvh w-full overflow-hidden">
          <ResizablePanelGroup direction="horizontal">
--- a/packages/frontend/apps/ios/src/modal-config.tsx
+++ b/packages/frontend/apps/ios/src/modal-config.tsx
@@ -2,9 +2,9 @@ import { ModalConfigContext } from '@affine/component';
 import { NavigationGestureService } from '@affine/core/mobile/modules/navigation-gesture';
 import { globalVars } from '@affine/core/mobile/styles/variables.css';
 import { useService } from '@toeverything/infra';
-import { type PropsWithChildren, useCallback } from 'react';
+import { useCallback, useMemo } from 'react';

-export const ModalConfigProvider = ({ children }: PropsWithChildren) => {
+export const ModalConfigProvider = ({ children }: React.PropsWithChildren) => {
  const navigationGesture = useService(NavigationGestureService);

  const onOpen = useCallback(() => {
@@ -17,11 +17,13 @@ export const ModalConfigProvider = ({ children }: PropsWithChildren) => {
    }
    return;
  }, [navigationGesture]);
+  const modalConfigValue = useMemo(
+    () => ({ onOpen, dynamicKeyboardHeight: globalVars.appKeyboardHeight }),
+    [onOpen]
+  );

  return (
-    <ModalConfigContext.Provider
-      value={{ onOpen, dynamicKeyboardHeight: globalVars.appKeyboardHeight }}
-    >
+    <ModalConfigContext.Provider value={modalConfigValue}>
      {children}
    </ModalConfigContext.Provider>
  );
--- a/packages/frontend/component/src/ui/menu/mobile/root.tsx
+++ b/packages/frontend/component/src/ui/menu/mobile/root.tsx
@@ -7,6 +7,7 @@ import {
  useContext,
  useEffect,
  useImperativeHandle,
+  useMemo,
  useState,
 } from 'react';

@@ -44,11 +45,14 @@ export const MobileMenu = ({
 }: MenuProps) => {
  const [subMenus, setSubMenus] = useState<SubMenuContent[]>([]);
  const [open, setOpen] = useState(false);
-  const mobileContextValue = {
-    subMenus,
-    setSubMenus,
-    setOpen,
-  };
+  const mobileContextValue = useMemo(
+    () => ({
+      subMenus,
+      setSubMenus,
+      setOpen,
+    }),
+    [subMenus]
+  );

  const { removeSubMenu, removeAllSubMenus } =
    useMobileSubMenuHelper(mobileContextValue);
@@ -95,6 +99,10 @@ export const MobileMenu = ({
    },
    [onInteractOutside, onPointerDownOutside, removeAllSubMenus, rootOptions]
  );
+  const mobileMenuContextValue = useMemo(
+    () => ({ subMenus, setSubMenus, setOpen: onOpenChange }),
+    [onOpenChange, subMenus]
+  );

  useImperativeHandle(
    ref,
@@ -139,9 +147,7 @@ export const MobileMenu = ({
  return (
    <>
      <Slot onClick={onItemClick}>{children}</Slot>
-      <MobileMenuContext.Provider
-        value={{ subMenus, setSubMenus, setOpen: onOpenChange }}
-      >
+      <MobileMenuContext.Provider value={mobileMenuContextValue}>
        <Modal
          open={finalOpen}
          onOpenChange={onOpenChange}
--- a/packages/frontend/component/src/ui/modal/confirm-modal.tsx
+++ b/packages/frontend/component/src/ui/modal/confirm-modal.tsx
@@ -1,7 +1,12 @@
 import { DialogTrigger } from '@radix-ui/react-dialog';
 import clsx from 'clsx';
-import type { PropsWithChildren } from 'react';
-import { createContext, useCallback, useContext, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';

 import type { ButtonProps } from '../button';
 import { Button } from '../button';
@@ -151,7 +156,7 @@ const ConfirmModalContext = createContext<ConfirmModalContextProps>({
  openConfirmModal: () => {},
  closeConfirmModal: () => {},
 });
-export const ConfirmModalProvider = ({ children }: PropsWithChildren) => {
+export const ConfirmModalProvider = ({ children }: React.PropsWithChildren) => {
  const [modalProps, setModalProps] = useState<ConfirmModalProps>({
    open: false,
  });
@@ -200,11 +205,13 @@ export const ConfirmModalProvider = ({ children }: PropsWithChildren) => {
    },
    [modalProps]
  );
+  const confirmModalContextValue = useMemo(
+    () => ({ openConfirmModal, closeConfirmModal, modalProps }),
+    [closeConfirmModal, modalProps, openConfirmModal]
+  );

  return (
-    <ConfirmModalContext.Provider
-      value={{ openConfirmModal, closeConfirmModal, modalProps }}
-    >
+    <ConfirmModalContext.Provider value={confirmModalContextValue}>
      {children}
      {/* TODO(@catsjuice): multi-instance support(unnecessary for now) */}
      <ConfirmModal {...modalProps} onOpenChange={onOpenChange} />
--- a/packages/frontend/component/src/ui/modal/prompt-modal.tsx
+++ b/packages/frontend/component/src/ui/modal/prompt-modal.tsx
@@ -1,7 +1,13 @@
 import { DialogTrigger } from '@radix-ui/react-dialog';
 import clsx from 'clsx';
 import type { PropsWithChildren } from 'react';
-import { createContext, useCallback, useContext, useState } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';

 import type { ButtonProps } from '../button';
 import { Button } from '../button';
@@ -205,15 +211,17 @@ export const PromptModalProvider = ({ children }: PropsWithChildren) => {
    },
    [modalProps]
  );
+  const promptModalContextValue = useMemo(
+    () => ({
+      openPromptModal,
+      closePromptModal,
+      modalProps,
+    }),
+    [closePromptModal, modalProps, openPromptModal]
+  );

  return (
-    <PromptModalContext.Provider
-      value={{
-        openPromptModal: openPromptModal,
-        closePromptModal: closePromptModal,
-        modalProps,
-      }}
-    >
+    <PromptModalContext.Provider value={promptModalContextValue}>
      {children}
      {/* TODO(@catsjuice): multi-instance support(unnecessary for now) */}
      <PromptModal {...modalProps} onOpenChange={onOpenChange} />
--- a/packages/frontend/core/src/mobile/components/navigation/nodes/tag/dialog.tsx
+++ b/packages/frontend/core/src/mobile/components/navigation/nodes/tag/dialog.tsx
@@ -105,11 +105,13 @@ const TagRenameContent = ({
    },
    [color, onConfirm]
  );
+  const tagColorContextValue = useMemo(
+    () => ({ colors, color, setColor, show, setShow, enableAnimation }),
+    [color, colors, enableAnimation, show]
+  );

  return (
-    <TagColorContext.Provider
-      value={{ colors, color, setColor, show, setShow, enableAnimation }}
-    >
+    <TagColorContext.Provider value={tagColorContextValue}>
      <RenameContent
        inputPrefixRenderer={ColorPickerTrigger}
        inputBelowRenderer={ColorPickerSelect}
--- a/packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.tsx
+++ b/packages/frontend/core/src/mobile/dialogs/setting/swipe-dialog.tsx
@@ -9,11 +9,10 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import { animate } from 'animejs';
 import {
  createContext,
-  type PropsWithChildren,
-  type RefObject,
  useCallback,
  useContext,
  useEffect,
+  useMemo,
  useRef,
 } from 'react';
 import { createPortal } from 'react-dom';
@@ -21,7 +20,7 @@ import { createPortal } from 'react-dom';
 import { SwipeHelper } from '../../utils';
 import * as styles from './swipe-dialog.css';

-export interface SwipeDialogProps extends PropsWithChildren {
+export interface SwipeDialogProps extends React.PropsWithChildren {
  triggerSize?: number;
  title?: string;
  open?: boolean;
@@ -142,7 +141,7 @@ const close = (
 };

 const SwipeDialogContext = createContext<{
-  stack: Array<RefObject<HTMLElement | null>>;
+  stack: Array<React.RefObject<HTMLElement | null>>;
 }>({
  stack: [],
 });
@@ -162,6 +161,10 @@ export const SwipeDialog = ({

  const { stack } = useContext(SwipeDialogContext);
  const prev = stack[stack.length - 1]?.current;
+  const swipeDialogContextValue = useMemo(
+    () => ({ stack: [...stack, dialogRef] }),
+    [stack]
+  );

  const handleClose = useCallback(() => {
    onOpenChange?.(false);
@@ -222,7 +225,7 @@ export const SwipeDialog = ({
  if (!open) return null;

  return (
-    <SwipeDialogContext.Provider value={{ stack: [...stack, dialogRef] }}>
+    <SwipeDialogContext.Provider value={swipeDialogContextValue}>
      <InsideModalContext.Provider value={insideModal + 1}>
        {createPortal(
          <div className={styles.root}>
--- a/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/index.tsx
+++ b/packages/frontend/core/src/mobile/pages/workspace/detail/journal-date-picker/index.tsx
@@ -1,4 +1,10 @@
-import { type HTMLAttributes, useCallback, useEffect, useState } from 'react';
+import {
+  type HTMLAttributes,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';

 import { JournalDatePickerContext } from './context';
 import { ResizeViewport } from './viewport';
@@ -31,18 +37,21 @@ export const JournalDatePicker = ({
    },
    [onChange]
  );
+  const width = window.innerWidth;
+  const journalDatePickerContextValue = useMemo(
+    () => ({
+      selected,
+      onSelect,
+      cursor,
+      setCursor,
+      width,
+      withDotDates,
+    }),
+    [cursor, onSelect, selected, width, withDotDates]
+  );

  return (
-    <JournalDatePickerContext.Provider
-      value={{
-        selected,
-        onSelect,
-        cursor,
-        setCursor,
-        width: window.innerWidth,
-        withDotDates,
-      }}
-    >
+    <JournalDatePickerContext.Provider value={journalDatePickerContextValue}>
      <ResizeViewport {...attrs} />
    </JournalDatePickerContext.Provider>
  );
--- a/packages/frontend/core/src/modules/workbench/view/view-root.tsx
+++ b/packages/frontend/core/src/modules/workbench/view/view-root.tsx
@@ -18,6 +18,10 @@ export const ViewRoot = ({
  routes: RouteObject[];
 }) => {
  const viewRouter = useMemo(() => createMemoryRouter(routes), [routes]);
+  const routeContextValue = useMemo(
+    () => ({ outlet: null, matches: [], isDataRoute: false }),
+    []
+  );

  const location = useLiveData(view.location$);

@@ -31,13 +35,7 @@ export const ViewRoot = ({
  return (
    <FrameworkScope scope={view.scope}>
      <UNSAFE_LocationContext.Provider value={null as any}>
-        <UNSAFE_RouteContext.Provider
-          value={{
-            outlet: null,
-            matches: [],
-            isDataRoute: false,
-          }}
-        >
+        <UNSAFE_RouteContext.Provider value={routeContextValue}>
          <RouterProvider router={viewRouter} />
        </UNSAFE_RouteContext.Provider>
      </UNSAFE_LocationContext.Provider>