diff --git a/src/components/table-toolbar/KeycloakDataTable.tsx b/src/components/table-toolbar/KeycloakDataTable.tsx
index 60bec32546..95a4aeb564 100644
--- a/src/components/table-toolbar/KeycloakDataTable.tsx
+++ b/src/components/table-toolbar/KeycloakDataTable.tsx
@@ -85,7 +85,6 @@ export type DataListProps<T> = {
   isPaginated?: boolean;
   ariaLabelKey: string;
   searchPlaceholderKey: string;
-  setRefresher?: (refresher: () => void) => void;
   columns: Field<T>[];
   actions?: Action<T>[];
   actionResolver?: IActionsResolver;
@@ -121,7 +120,6 @@ export function KeycloakDataTable<T>({
   searchPlaceholderKey,
   isPaginated = false,
   onSelect,
-  setRefresher,
   canSelectAll = false,
   loader,
   columns,
@@ -144,10 +142,6 @@ export function KeycloakDataTable<T>({
   const refresh = () => setKey(new Date().getTime());
   const handleError = useErrorHandler();
 
-  useEffect(() => {
-    setRefresher && setRefresher(refresh);
-  }, []);
-
   useEffect(() => {
     return asyncStateFetch(
       async () => {
diff --git a/src/realm-roles/AssociatedRolesTab.tsx b/src/realm-roles/AssociatedRolesTab.tsx
index 6eb2f046eb..fbf9eb5f24 100644
--- a/src/realm-roles/AssociatedRolesTab.tsx
+++ b/src/realm-roles/AssociatedRolesTab.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useHistory, useParams, useRouteMatch } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import {
@@ -36,7 +36,8 @@ export const AssociatedRolesTab = ({
   const history = useHistory();
   const { addAlert } = useAlerts();
   const { url } = useRouteMatch();
-  const tableRefresher = React.useRef<() => void>();
+  const [key, setKey] = useState(0);
+  const refresh = () => setKey(new Date().getTime());
 
   const [selectedRows, setSelectedRows] = useState<RoleRepresentation[]>([]);
   const [open, setOpen] = useState(false);
@@ -48,8 +49,8 @@ export const AssociatedRolesTab = ({
     return Promise.resolve(additionalRoles);
   };
 
-  React.useEffect(() => {
-    tableRefresher.current && tableRefresher.current();
+  useEffect(() => {
+    refresh();
   }, [additionalRoles]);
 
   const RoleName = (role: RoleRepresentation) => <>{role.name}</>;
@@ -99,10 +100,6 @@ export const AssociatedRolesTab = ({
     },
   });
 
-  const setRefresher = (refresher: () => void) => {
-    tableRefresher.current = refresher;
-  };
-
   const goToCreate = () => history.push(`${url}/add-role`);
   return (
     <>
@@ -116,6 +113,7 @@ export const AssociatedRolesTab = ({
           toggleDialog={() => setOpen(!open)}
         />
         <KeycloakDataTable
+          key={key}
           loader={loader}
           ariaLabelKey="roles:roleList"
           searchPlaceholderKey="roles:searchFor"
@@ -124,7 +122,6 @@ export const AssociatedRolesTab = ({
             setSelectedRows([...rows]);
           }}
           isPaginated
-          setRefresher={setRefresher}
           toolbarItem={
             <>
               <Checkbox