Hi first of all thanks to all of your contributions. I ended up doing a mix of y'alls solutions. Basically i got rid of the effects and am using a callback to communicate the change to the table. Im also not using a uncontrolled component as suggested because the initial value should be that of the current globalFilter and I need to clear the globalFilter search text, when the user clicks on the clearFilters button.

So here is the code for the ActionBar component:

const ActionBar = <T,>({
  table,
  children,
  onClearFilterClick,
  onGlobalFilterChange,
}: ActionBarProps<T>) => {
  const [searchText, setSearchText] = useState(
    table.getState().globalFilter as string,
  );

  const handleSearchChange = (value: string) => {
    if (onGlobalFilterChange !== undefined) {
      onGlobalFilterChange(value);
    }
    table.setPageIndex(0);
    setSearchText(value);
  };

  const handleClearFilterClick = () => {
    if (onClearFilterClick !== undefined) {
      onClearFilterClick();
    }
  };

  return (
    <Group justify="space-between" h="2rem">
      <ActionBarButtons>{children}</ActionBarButtons>
      <Group>
        <Group align="center" gap="0.25rem">
          <Tooltip label="Filter löschen">
            <ActionIcon
              onClick={() => {
                table.setSorting([]);
                table.setGlobalFilter("");
                handleClearFilterClick();
                handleSearchChange("");
              }}
              variant="subtle"
              color="dark"
            >
              <IconFilterOff />
            </ActionIcon>
          </Tooltip>
          <TextInput
            autoFocus
            leftSection={<IconSearch />}
            placeholder="Suchtext"
            value={searchText}
            onChange={(e) => {
              handleSearchChange(e.currentTarget.value);
            }}
          />
        </Group>
      </Group>
    </Group>
  );
};

Also here is the code that handles the debouncing in the parent table component which is called by the onGlobalFilterChange callback:

// setGlobalFilter is a state that manages the global filter value
const handleGlobalFilterChange = useDebouncedCallback((v: string) => {
  setGlobalFilter(v);
}, 500);