Remove the useMemo for components.

apps/studio/components/grid/components/header/filter/FilterPopover.tsx

@@ -28,19 +28,6 @@ const FilterPopover = ({ table, filters, setParams }: FilterPopoverProps) => {
   const [open, setOpen] = useState(false)
   const snap = useTableEditorStateSnapshot()
 
-  const btnText = useMemo(() => {
-    return (
-      <RuleSetButtonText
-        rules={filters}
-        type="filter"
-        renderRule={(filter) => {
-          const [column, operator, value] = filter.split(':')
-          return { column, operator, value }
-        }}
-      />
-    )
-  }, [filters])
-
   const onApplyFilters = (appliedFilters: Filter[]) => {
     snap.setEnforceExactCount(false)
     setParams((prevParams) => {
@@ -67,7 +54,14 @@ const FilterPopover = ({ table, filters, setParams }: FilterPopoverProps) => {
           icon={!hasFilters && <PlusCircle strokeWidth={1.5} />}
           className={cn('rounded-full', hasFilters && filters.length <= 2 && 'pr-0.5')}
         >
-          {btnText}
+          <RuleSetButtonText
+            rules={filters}
+            type="filter"
+            renderRule={(filter) => {
+              const [column, operator, value] = filter.split(':')
+              return { column, operator, value }
+            }}
+          />
         </Button>
       </PopoverTrigger_Shadcn_>
       <PopoverContent_Shadcn_ className="p-0 w-96" side="bottom" align="start">

apps/studio/components/grid/components/header/sort/SortPopover.tsx

@@ -27,18 +27,6 @@ const SortPopover = ({ table, sorts, setParams }: SortPopoverProps) => {
   const [open, setOpen] = useState(false)
 
   const hasSorts = (sorts || []).length > 0
-  const btnText = useMemo(() => {
-    return (
-      <RuleSetButtonText
-        rules={sorts}
-        type="sort"
-        renderRule={(sort) => {
-          const [column, direction] = sort.split(':')
-          return { column, value: direction }
-        }}
-      />
-    )
-  }, [sorts])
 
   const onApplySorts = (appliedSorts: Sort[]) => {
     setParams((prevParams) => {
@@ -58,7 +46,14 @@ const SortPopover = ({ table, sorts, setParams }: SortPopoverProps) => {
           className={cn('rounded-full', hasSorts && sorts.length <= 2 && 'pr-0.5')}
           data-testid="table-editor-sort-button"
         >
-          {btnText}
+          <RuleSetButtonText
+            rules={sorts}
+            type="sort"
+            renderRule={(sort) => {
+              const [column, direction] = sort.split(':')
+              return { column, value: direction }
+            }}
+          />
         </Button>
       </PopoverTrigger_Shadcn_>
       <PopoverContent_Shadcn_ className="p-0 w-96" side="bottom" align="start">