fix: Optimize Select Component for Improved Performance Update index.tsx

base-org · Dec 29, 2024 · e438b11 · e438b11
1 parent a355227
commit e438b11
Showing 1 changed file with 16 additions and 40 deletions.
diff --git a/libs/base-ui/Select/index.tsx b/libs/base-ui/Select/index.tsx
@@ -3,22 +3,28 @@ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons
 import * as SelectPrimitive from '@radix-ui/react-select';
 import classnames from 'classnames';
 
-const SelectItem = forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => {
-  return (
+const SelectItem = React.memo(forwardRef(
+  ({ className, children, ...props }, ref) => (
     <SelectPrimitive.Item className={classnames('SelectItem', className)} {...props} ref={ref}>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
       <SelectPrimitive.ItemIndicator className="SelectItemIndicator">
         <CheckIcon />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
-  );
-});
+  )
+));
+
+const FruitOptions = () => (
+  <SelectPrimitive.Group>
+    <SelectPrimitive.Label className="SelectLabel">Fruits</SelectPrimitive.Label>
+    <SelectItem value="apple">Apple</SelectItem>
+    <SelectItem value="banana">Banana</SelectItem>
+    <SelectItem value="blueberry">Blueberry</SelectItem>
+    <SelectItem value="grapes">Grapes</SelectItem>
+    <SelectItem value="pineapple">Pineapple</SelectItem>
+  </SelectPrimitive.Group>
+);
 
-// POC select to test if base-ui works for apps/bridge and apps/web
-// will be removed in the next PR
 function Select() {
   return (
     <SelectPrimitive.Root>
@@ -34,37 +40,7 @@ function Select() {
             <ChevronUpIcon />
           </SelectPrimitive.ScrollUpButton>
           <SelectPrimitive.Viewport className="SelectViewport">
-            <SelectPrimitive.Group>
-              <SelectPrimitive.Label className="SelectLabel">Fruits</SelectPrimitive.Label>
-              <SelectItem value="apple">Apple</SelectItem>
-              <SelectItem value="banana">Banana</SelectItem>
-              <SelectItem value="blueberry">Blueberry</SelectItem>
-              <SelectItem value="grapes">Grapes</SelectItem>
-              <SelectItem value="pineapple">Pineapple</SelectItem>
-            </SelectPrimitive.Group>
-
-            <SelectPrimitive.Separator className="SelectSeparator" />
-
-            <SelectPrimitive.Group>
-              <SelectPrimitive.Label className="SelectLabel">Vegetables</SelectPrimitive.Label>
-              <SelectItem value="aubergine">Aubergine</SelectItem>
-              <SelectItem value="broccoli">Broccoli</SelectItem>
-              <SelectItem value="carrot" disabled>
-                Carrot
-              </SelectItem>
-              <SelectItem value="courgette">Courgette</SelectItem>
-              <SelectItem value="leek">Leek</SelectItem>
-            </SelectPrimitive.Group>
-
-            <SelectPrimitive.Separator className="SelectSeparator" />
-
-            <SelectPrimitive.Group>
-              <SelectPrimitive.Label className="SelectLabel">Meat</SelectPrimitive.Label>
-              <SelectItem value="beef">Beef</SelectItem>
-              <SelectItem value="chicken">Chicken</SelectItem>
-              <SelectItem value="lamb">Lamb</SelectItem>
-              <SelectItem value="pork">Pork</SelectItem>
-            </SelectPrimitive.Group>
+            <FruitOptions />
           </SelectPrimitive.Viewport>
           <SelectPrimitive.ScrollDownButton className="SelectScrollButton">
             <ChevronDownIcon />