refactor: memoize icons on export

components/sidebar/search-bar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useSetSearchText } from "@/contexts/search-text";
 
@@ -40,13 +40,6 @@ export function SearchBar() {
     inputRef.current?.focus();
   };
 
-  const clearIcon = useMemo(() => <icons.X className="p-1 text-muted-foreground" />, []);
-
-  const searchIcon = useMemo(
-    () => <icons.Search className="-scale-x-100 p-1 text-muted-foreground" />,
-    []
-  );
-
   return (
     <div className="relative flex w-full items-center">
       <Input
@@ -59,11 +52,11 @@ export function SearchBar() {
       />
       <div className="absolute right-1 flex gap-1">
         <Button className={cn("h-6 p-0", !text && "hidden")} variant="ghost" onClick={clearText}>
-          {clearIcon}
+          <icons.X className="p-1 text-muted-foreground" />
           <span className="sr-only">Clear search text</span>
         </Button>
         <Button className="h-6 p-0" variant="ghost" onClick={search} aria-label="search">
-          {searchIcon}
+          <icons.Search className="-scale-x-100 p-1 text-muted-foreground" />
           <span className="sr-only">Search tools</span>
         </Button>
       </div>

components/sidebar/tool-group.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo, useRef } from "react";
+import { useCallback, useRef } from "react";
 import { usePathname } from "next/navigation";
 import * as Accordion from "@radix-ui/react-accordion";
 
@@ -20,11 +20,6 @@ export function ToolGroup({ Icon, title, href, tools, isOpend }: Props) {
 
   const onClick = useCallback(() => triggerRef.current?.click(), []);
 
-  const chevronIcon = useMemo(
-    () => <icons.ChevronDown className="h-4 w-4 transition-transform duration-200" />,
-    []
-  );
-
   return (
     <Accordion.AccordionItem value={href}>
       <Accordion.Header asChild>
@@ -46,7 +41,7 @@ export function ToolGroup({ Icon, title, href, tools, isOpend }: Props) {
             className="absolute right-0 flex h-10 w-10 items-center justify-center rounded transition-all duration-0 hover:bg-accent [&[data-state=open]>svg]:rotate-180"
             aria-label="toggle open/close state of the tool group"
           >
-            {chevronIcon}
+            <icons.ChevronDown className="h-4 w-4 transition-transform duration-200" />
           </Accordion.Trigger>
         </div>
       </Accordion.Header>

components/sidebar/tool-link.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo, useMemo } from "react";
+import { memo } from "react";
 import Link, { LinkProps } from "next/link";
 
 import { Tool } from "@/config/tools";
@@ -13,8 +13,6 @@ type Props = Pick<Tool, "Icon" | "shortTitle"> &
   };
 
 function RawToolLink({ Icon, shortTitle: title, href, onClick, className, highlight }: Props) {
-  const icon = useMemo(() => <Icon size={16} />, [Icon]);
-
   return (
     <Link
       className={cn(
@@ -28,7 +26,7 @@ function RawToolLink({ Icon, shortTitle: title, href, onClick, className, highli
         <Indicator />
       </span>
       <span className="flex select-none items-center">
-        {icon}
+        <Icon size={16} />
         <span className="ml-4">{title}</span>
       </span>
     </Link>