diff --git a/public/app/core/components/RolePicker/TeamRolePicker.tsx b/public/app/core/components/RolePicker/TeamRolePicker.tsx
index e7f7d6cbd5c..3c35a342b82 100644
--- a/public/app/core/components/RolePicker/TeamRolePicker.tsx
+++ b/public/app/core/components/RolePicker/TeamRolePicker.tsx
@@ -1,5 +1,5 @@
-import React, { FC, useState } from 'react';
-import { useAsync } from 'react-use';
+import React, { FC, useEffect } from 'react';
+import { useAsyncFn } from 'react-use';
 import { Role } from 'app/types';
 import { RolePicker } from './RolePicker';
 import { fetchTeamRoles, updateTeamRoles } from './api';
@@ -13,21 +13,28 @@ export interface Props {
 }
 
 export const TeamRolePicker: FC<Props> = ({ teamId, orgId, roleOptions, disabled, builtinRolesDisabled }) => {
-  const [appliedRoles, setAppliedRoles] = useState<Role[]>([]);
-
-  const { loading } = useAsync(async () => {
+  const [{ loading, value: appliedRoles = [] }, getTeamRoles] = useAsyncFn(async () => {
     try {
-      const teamRoles = await fetchTeamRoles(teamId, orgId);
-      setAppliedRoles(teamRoles);
+      return await fetchTeamRoles(teamId, orgId);
     } catch (e) {
       // TODO handle error
       console.error('Error loading options');
     }
+    return [];
   }, [orgId, teamId]);
 
+  useEffect(() => {
+    getTeamRoles();
+  }, [orgId, teamId, getTeamRoles]);
+
+  const onRolesChange = async (roles: string[]) => {
+    await updateTeamRoles(roles, teamId, orgId);
+    await getTeamRoles();
+  };
+
   return (
     <RolePicker
-      onRolesChange={(roles) => updateTeamRoles(roles, teamId, orgId)}
+      onRolesChange={onRolesChange}
       roleOptions={roleOptions}
       appliedRoles={appliedRoles}
       isLoading={loading}
diff --git a/public/app/core/components/RolePicker/UserRolePicker.tsx b/public/app/core/components/RolePicker/UserRolePicker.tsx
index 0d63c078f21..5e5e1d2ffeb 100644
--- a/public/app/core/components/RolePicker/UserRolePicker.tsx
+++ b/public/app/core/components/RolePicker/UserRolePicker.tsx
@@ -1,5 +1,5 @@
-import React, { FC, useState } from 'react';
-import { useAsync } from 'react-use';
+import React, { FC, useEffect } from 'react';
+import { useAsyncFn } from 'react-use';
 import { contextSrv } from 'app/core/core';
 import { Role, OrgRole, AccessControlAction } from 'app/types';
 import { RolePicker } from './RolePicker';
@@ -26,26 +26,31 @@ export const UserRolePicker: FC<Props> = ({
   disabled,
   builtinRolesDisabled,
 }) => {
-  const [appliedRoles, setAppliedRoles] = useState<Role[]>([]);
-
-  const { loading } = useAsync(async () => {
+  const [{ loading, value: appliedRoles = [] }, getUserRoles] = useAsyncFn(async () => {
     try {
       if (contextSrv.hasPermission(AccessControlAction.ActionUserRolesList)) {
-        const userRoles = await fetchUserRoles(userId, orgId);
-        setAppliedRoles(userRoles);
-      } else {
-        setAppliedRoles([]);
+        return await fetchUserRoles(userId, orgId);
       }
     } catch (e) {
       // TODO handle error
       console.error('Error loading options');
     }
+    return [];
   }, [orgId, userId]);
 
+  useEffect(() => {
+    getUserRoles();
+  }, [orgId, userId, getUserRoles]);
+
+  const onRolesChange = async (roles: string[]) => {
+    await updateUserRoles(roles, userId, orgId);
+    await getUserRoles();
+  };
+
   return (
     <RolePicker
       builtInRole={builtInRole}
-      onRolesChange={(roles) => updateUserRoles(roles, userId, orgId)}
+      onRolesChange={onRolesChange}
       onBuiltinRoleChange={onBuiltinRoleChange}
       roleOptions={roleOptions}
       appliedRoles={appliedRoles}