UI: Optimize performance

.changeset/weak-flowers-compete.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Optimize performance

.idea/prettier.xml

@@ -3,6 +3,6 @@
   <component name="PrettierConfiguration">
     <option name="myConfigurationMode" value="AUTOMATIC" />
     <option name="myRunOnSave" value="true" />
-    <option name="myFilesPattern" value="**/*.{js,ts,jsx,tsx,vue,astro,mdx,md}" />
+    <option name="myFilesPattern" value="**/*" />
   </component>
 </project>

apps/docs/components/search.tsx

@@ -19,13 +19,11 @@ const index = client.initIndex(indexName);
 export default function CustomSearchDialog(
   props: SharedProps,
 ): React.ReactElement {
-  const defaultTag = useMode() ?? 'headless';
-
   return (
     <SearchDialog
       index={index}
       {...props}
-      defaultTag={defaultTag}
+      defaultTag={useMode() ?? 'headless'}
       tags={modes.map((mode) => ({
         name: mode.name,
         value: mode.param,

packages/ui/src/components/accordion.tsx

@@ -21,7 +21,7 @@ export const Accordions = forwardRef<
   | Omit<AccordionSingleProps, 'value' | 'onValueChange'>
   | Omit<AccordionMultipleProps, 'value' | 'onValueChange'>
 >(({ type = 'single', className, defaultValue, ...props }, ref) => {
-  const [value, setValue] = useState(
+  const [value, setValue] = useState<string | string[]>(
     type === 'single' ? defaultValue ?? '' : defaultValue ?? [],
   );
 
@@ -30,11 +30,9 @@ export const Accordions = forwardRef<
 
     if (id.length > 0)
       setValue((prev) => {
-        return type === 'single'
-          ? id
-          : [id, ...(Array.isArray(prev) ? prev : [])];
+        return typeof prev === 'string' ? id : [id, ...prev];
       });
-  }, [type]);
+  }, []);
 
   return (
     // @ts-expect-error -- Multiple types

packages/ui/src/components/dialog/search-algolia.tsx

@@ -6,6 +6,7 @@ import {
   useAlgoliaSearch,
 } from 'fumadocs-core/search-algolia/client';
 import { type ReactNode, useState } from 'react';
+import { useOnChange } from '@/utils/use-on-change';
 import {
   SearchDialog,
   type SharedProps,
@@ -37,7 +38,7 @@ export default function AlgoliaSearchDialog({
   showAlgolia = false,
   ...props
 }: AlgoliaSearchDialogProps): React.ReactElement {
-  const [tag, setTag] = useState<string>();
+  const [tag, setTag] = useState(defaultTag);
   let filters = searchOptions?.filters;
 
   if (tag) {
@@ -49,6 +50,10 @@ export default function AlgoliaSearchDialog({
     filters,
   });
 
+  useOnChange(defaultTag, (v) => {
+    setTag(v);
+  });
+
   return (
     <SearchDialog
       search={search}
@@ -58,7 +63,7 @@ export default function AlgoliaSearchDialog({
       footer={
         <>
           {tags ? (
-            <TagsList tag={tag ?? defaultTag} onTagChange={setTag} items={tags}>
+            <TagsList tag={tag} onTagChange={setTag} items={tags}>
               {showAlgolia ? <AlgoliaTitle /> : null}
             </TagsList>
           ) : null}

packages/ui/src/components/dialog/search-default.tsx

@@ -3,6 +3,7 @@
 import { useDocsSearch } from 'fumadocs-core/search/client';
 import { type ReactNode, useState } from 'react';
 import { useI18n } from '@/contexts/i18n';
+import { useOnChange } from '@/utils/use-on-change';
 import {
   SearchDialog,
   type SharedProps,
@@ -42,9 +43,13 @@ export default function DefaultSearchDialog({
   ...props
 }: DefaultSearchDialogProps): React.ReactElement {
   const { locale } = useI18n();
-  const [tag, setTag] = useState<string>();
+  const [tag, setTag] = useState(defaultTag);
   const { search, setSearch, query } = useDocsSearch(locale, tag, api, delayMs);
 
+  useOnChange(defaultTag, (v) => {
+    setTag(v);
+  });
+
   return (
     <SearchDialog
       search={search}
@@ -54,11 +59,7 @@ export default function DefaultSearchDialog({
       footer={
         <>
           {tags ? (
-            <TagsList
-              tag={tag ?? defaultTag}
-              onTagChange={setTag}
-              items={tags}
-            />
+            <TagsList tag={tag} onTagChange={setTag} items={tags} />
           ) : null}
           {props.footer}
         </>

packages/ui/src/components/layout/link-item.tsx

@@ -2,7 +2,7 @@ import Link from 'fumadocs-core/link';
 import { ChevronDown } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { cva } from 'class-variance-authority';
-import { type ReactNode, useEffect, useState } from 'react';
+import { type ReactNode, useState } from 'react';
 import { cn } from '@/utils/cn';
 import { isActive } from '@/utils/shared';
 import { buttonVariants, itemVariants } from '@/theme/variants';
@@ -16,6 +16,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
+import { useOnChange } from '@/utils/use-on-change';
 
 const linkItemVariants = cva(
   '-m-2 inline-flex items-center gap-1 p-2 text-muted-foreground transition-colors [&_svg]:size-4',
@@ -228,9 +229,9 @@ export function LinksMenu({
   const [open, setOpen] = useState(false);
   const pathname = usePathname();
 
-  useEffect(() => {
+  useOnChange(pathname, () => {
     setOpen(false);
-  }, [pathname]);
+  });
 
   return (
     <Popover open={open} onOpenChange={setOpen}>

packages/ui/src/components/layout/sidebar.tsx

@@ -7,7 +7,6 @@ import {
   type HTMLAttributes,
   useCallback,
   useContext,
-  useEffect,
   useMemo,
   useState,
 } from 'react';
@@ -18,9 +17,9 @@ import { ScrollArea, ScrollViewport } from '@/components/ui/scroll-area';
 import { hasActive, isActive } from '@/utils/shared';
 import { LinkItem, type LinkItemType } from '@/components/layout/link-item';
 import { LargeSearchToggle } from '@/components/layout/search-toggle';
-import { useSidebar } from '@/contexts/sidebar';
 import { useSearchContext } from '@/contexts/search';
 import { itemVariants } from '@/theme/variants';
+import { useOnChange } from '@/utils/use-on-change';
 import {
   Collapsible,
   CollapsibleContent,
@@ -222,7 +221,6 @@ function FolderNode({
 }): React.ReactElement {
   const { defaultOpenLevel } = useContext(Context);
   const pathname = usePathname();
-
   const active = index !== undefined && isActive(index.url, pathname, false);
   const childActive = useMemo(
     () => hasActive(children, pathname),
@@ -231,16 +229,20 @@ function FolderNode({
 
   const shouldExtend =
     active || childActive || defaultOpenLevel >= level || defaultOpen;
-  const [extend, setExtend] = useState(shouldExtend);
+  const [open, setOpen] = useState(shouldExtend);
 
-  useEffect(() => {
-    if (shouldExtend) setExtend(true);
-  }, [shouldExtend]);
+  useOnChange(shouldExtend, (v) => {
+    if (v) setOpen(v);
+  });
 
   const onClick: React.MouseEventHandler = useCallback(
     (e) => {
-      if (e.target !== e.currentTarget || active) {
-        setExtend((prev) => !prev);
+      if (
+        // clicking on icon
+        (e.target as HTMLElement).hasAttribute('data-icon') ||
+        active
+      ) {
+        setOpen((prev) => !prev);
         e.preventDefault();
       }
     },
@@ -252,13 +254,14 @@ function FolderNode({
       {icon}
       {name}
       <ChevronDown
-        className={cn('ms-auto transition-transform', !extend && '-rotate-90')}
+        data-icon
+        className={cn('ms-auto transition-transform', !open && '-rotate-90')}
       />
     </>
   );
 
   return (
-    <Collapsible open={extend} onOpenChange={setExtend}>
+    <Collapsible open={open} onOpenChange={setOpen}>
       {index ? (
         <Link
           className={cn(itemVariants({ active }))}

packages/ui/src/components/tabs.tsx

@@ -2,11 +2,11 @@
 
 import type { TabsContentProps } from '@radix-ui/react-tabs';
 import {
-  useEffect,
   useMemo,
   useState,
   type ReactNode,
   useCallback,
+  useLayoutEffect,
 } from 'react';
 import { cn } from '@/utils/cn';
 import * as Primitive from './ui/tabs';
@@ -67,7 +67,7 @@ export function Tabs({
   const values = useMemo(() => items.map((item) => toValue(item)), [items]);
   const [value, setValue] = useState(values[defaultIndex]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!id) return;
 
     const onUpdate: ChangeListener = (v) => {

packages/ui/src/contexts/sidebar.tsx

@@ -5,10 +5,10 @@ import {
   useMemo,
   useRef,
   type MutableRefObject,
-  useEffect,
 } from 'react';
 import { usePathname } from 'next/navigation';
 import { SidebarProvider as BaseProvider } from 'fumadocs-core/sidebar';
+import { useOnChange } from '@/utils/use-on-change';
 
 interface SidebarContext {
   open: boolean;
@@ -41,12 +41,12 @@ export function SidebarProvider({
 
   const pathname = usePathname();
 
-  useEffect(() => {
+  useOnChange(pathname, () => {
     if (closeOnRedirect.current) {
       setOpen(false);
     }
     closeOnRedirect.current = true;
-  }, [pathname]);
+  });
 
   return (
     <SidebarContext.Provider

packages/ui/src/utils/use-on-change.ts

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+export function useOnChange<T>(
+  value: T,
+  onChange: (current: T, previous: T) => void,
+): void {
+  const [prev, setPrev] = useState<T>(value);
+
+  if (prev !== value) {
+    onChange(value, prev);
+    setPrev(value);
+  }
+}