refactor: reduced redundant calls to column.getIsSorted()

Author: thevuong

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @codefixlabs/ui
 
+## 0.1.28
+
+### Patch Changes
+
+- Reduced redundant calls to `column.getIsSorted()`
+
 ## 0.1.27
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codefixlabs/ui",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "license": "MIT",
   "exports": {
     "./package.json": "./package.json",

packages/ui/src/react/data-table.tsx

@@ -32,7 +32,7 @@ import {
 } from 'lucide-react';
 import pluralize from 'pluralize';
 import * as React from 'react';
-import { useId, useMemo } from 'react';
+import { useId } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useDebouncedCallback } from 'use-debounce';
 import { Badge } from '@/react/badge';
@@ -104,24 +104,24 @@ export function DataTableColumnHeader<TData, TValue>({
   column: Column<TData, TValue>;
   title: string;
 }): React.JSX.Element {
-  const endIcon = useMemo(() => {
-    if (column.getIsSorted() === 'desc') {
-      return <ArrowDownIcon className="h-4 w-4" />;
-    }
+  const endIcon = (): React.JSX.Element => {
+    const isSorted = column.getIsSorted();
 
-    if (column.getIsSorted() === 'asc') {
+    if (isSorted === 'desc') {
+      return <ArrowDownIcon className="h-4 w-4" />;
+    } else if (isSorted === 'asc') {
       return <ArrowUpIcon className="h-4 w-4" />;
     }
 
     return <ChevronsUpDownIcon className="h-4 w-4" />;
-  }, [column]);
+  };
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button
           className="data-state-open:bg-accent -ml-4"
-          endIcon={endIcon}
+          endIcon={endIcon()}
           size="sm"
           variant="ghost"
         >