only update state when component is mounted (#266)

* only update state when component is mounted

* removed unused import

* `useFetch` function to update state when mounted

src/client-scopes/add/RoleMappingForm.tsx

@@ -24,7 +24,7 @@ import ClientRepresentation from "keycloak-admin/lib/defs/clientRepresentation";
 import ProtocolMapperRepresentation from "keycloak-admin/lib/defs/protocolMapperRepresentation";
 import { useAlerts } from "../../components/alert/Alerts";
 import { RealmContext } from "../../context/realm-context/RealmContext";
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 
 import { ViewHeader } from "../../components/view-header/ViewHeader";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
@@ -47,7 +47,8 @@ export const RoleMappingForm = () => {
   const [clientRoles, setClientRoles] = useState<RoleRepresentation[]>([]);
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
+      async () => {
         const clients = await adminClient.clients.find();
 
         const asyncFilter = async (
@@ -68,19 +69,27 @@ export const RoleMappingForm = () => {
               return this.clientId!;
             })
         );
-      setClients(filteredClients);
+        return filteredClients;
-    })();
+      },
+      (filteredClients) => setClients(filteredClients)
+    );
   }, []);
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
+      async () => {
         const client = selectedClient as ClientRepresentation;
         if (client && client.name !== "realmRoles") {
-        setClientRoles(await adminClient.clients.listRoles({ id: client.id! }));
+          const clientRoles = await adminClient.clients.listRoles({
+            id: client.id!,
+          });
+          return clientRoles;
         } else {
-        setClientRoles(await adminClient.roles.find());
+          return await adminClient.roles.find();
         }
-    })();
+      },
+      (clientRoles) => setClientRoles(clientRoles)
+    );
   }, [selectedClient]);
 
   const save = async (mapping: ProtocolMapperRepresentation) => {

src/client-scopes/details/MappingDetails.tsx

@@ -24,7 +24,7 @@ import { ConfigPropertyRepresentation } from "keycloak-admin/lib/defs/configProp
 import ProtocolMapperRepresentation from "keycloak-admin/lib/defs/protocolMapperRepresentation";
 
 import { ViewHeader } from "../../components/view-header/ViewHeader";
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { Controller, useForm } from "react-hook-form";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { useAlerts } from "../../components/alert/Alerts";
@@ -55,8 +55,9 @@ export const MappingDetails = () => {
   const isGuid = /^[{]?[0-9a-fA-F]{8}-([0-9a-fA-F]{4}-){3}[0-9a-fA-F]{12}[}]?$/;
 
   useEffect(() => {
+    return useFetch(
+      async () => {
         if (id.match(isGuid)) {
-      (async () => {
           const data = await adminClient.clientScopes.findProtocolMapper({
             id: scopeId,
             mapperId: id,
@@ -70,16 +71,23 @@ export const MappingDetails = () => {
           const properties = mapperTypes.find(
             (type) => type.id === data!.protocolMapper
           )?.properties!;
-        setConfigProperties(properties);
 
-        setMapping(data);
+          return {
-      })();
+            configProperties: properties,
+            mapping: data,
+          };
         } else {
-      (async () => {
           const scope = await adminClient.clientScopes.findOne({ id: scopeId });
-        setMapping({ protocol: scope.protocol, protocolMapper: id });
+          return {
-      })();
+            mapping: { protocol: scope.protocol, protocolMapper: id },
+          };
         }
+      },
+      (result) => {
+        setConfigProperties(result.configProperties);
+        setMapping(result.mapping);
+      }
+    );
   }, []);
 
   const [toggleDeleteDialog, DeleteConfirm] = useConfirmDialog({

src/client-scopes/form/ClientScopeForm.tsx

@@ -22,7 +22,7 @@ import { Controller, useForm } from "react-hook-form";
 import ClientScopeRepresentation from "keycloak-admin/lib/defs/clientScopeRepresentation";
 
 import { HelpItem } from "../../components/help-enabler/HelpItem";
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useAlerts } from "../../components/alert/Alerts";
 import { useLoginProviders } from "../../context/server-info/ServerInfoProvider";
 import { ViewHeader } from "../../components/view-header/ViewHeader";
@@ -45,7 +45,12 @@ export const ClientScopeForm = () => {
   const [open, isOpen] = useState(false);
   const { addAlert } = useAlerts();
 
-  const load = async () => {
+  const [key, setKey] = useState(0);
+  const refresh = () => setKey(new Date().getTime());
+
+  useEffect(() => {
+    return useFetch(
+      async () => {
         if (id) {
           const data = await adminClient.clientScopes.findOne({ id });
           if (data) {
@@ -57,13 +62,12 @@ export const ClientScopeForm = () => {
             });
           }
 
-      setClientScope(data);
+          return data;
         }
-  };
+      },
-
+      (data) => setClientScope(data)
-  useEffect(() => {
+    );
-    load();
+  }, [key]);
-  }, []);
 
   const save = async (clientScopes: ClientScopeRepresentation) => {
     try {
@@ -305,7 +309,7 @@ export const ClientScopeForm = () => {
           </Tab>
           <Tab eventKey={1} title={<TabTitleText>{t("mappers")}</TabTitleText>}>
             {clientScope && (
-              <MapperList clientScope={clientScope} refresh={load} />
+              <MapperList clientScope={clientScope} refresh={refresh} />
             )}
           </Tab>
         </Tabs>

src/clients/ClientDetails.tsx

@@ -19,7 +19,7 @@ import { useAlerts } from "../components/alert/Alerts";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { useDownloadDialog } from "../components/download-dialog/DownloadDialog";
 import { ViewHeader } from "../components/view-header/ViewHeader";
-import { useAdminClient } from "../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { Credentials } from "./credentials/Credentials";
 import {
   convertFormValuesToObject,
@@ -144,13 +144,13 @@ export const ClientDetails = () => {
   };
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
-      const fetchedClient = await adminClient.clients.findOne({ id });
+      () => adminClient.clients.findOne({ id }),
-      if (fetchedClient) {
+      (fetchedClient) => {
         setClient(fetchedClient);
         setupForm(fetchedClient);
       }
-    })();
+    );
   }, []);
 
   const save = async () => {

src/clients/credentials/Credentials.tsx

@@ -22,7 +22,7 @@ import { useAlerts } from "../../components/alert/Alerts";
 import { useConfirmDialog } from "../../components/confirm-dialog/ConfirmDialog";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { ClientSecret } from "./ClientSecret";
 import { SignedJWT } from "./SignedJWT";
 import { X509 } from "./X509";
@@ -64,17 +64,25 @@ export const Credentials = ({ clientId, form, save }: CredentialsProps) => {
   const [open, isOpen] = useState(false);
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
+      async () => {
         const providers = await adminClient.authenticationManagement.getClientAuthenticatorProviders(
           { id: clientId }
         );
-      setProviders(providers);
 
         const secret = await adminClient.clients.getClientSecret({
           id: clientId,
         });
-      setSecret(secret.value!);
+        return {
-    })();
+          providers,
+          secret: secret.value!,
+        };
+      },
+      ({ providers, secret }) => {
+        setProviders(providers);
+        setSecret(secret);
+      }
+    );
   }, []);
 
   async function regenerate<T>(

src/clients/scopes/ClientScopes.tsx

@@ -23,7 +23,7 @@ import { FilterIcon } from "@patternfly/react-icons";
 import ClientScopeRepresentation from "keycloak-admin/lib/defs/clientScopeRepresentation";
 import KeycloakAdminClient from "keycloak-admin";
 
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { TableToolbar } from "../../components/table-toolbar/TableToolbar";
 import { ListEmptyState } from "../../components/list-empty-state/ListEmptyState";
 import { AddScopeDialog } from "./AddScopeDialog";
@@ -133,7 +133,12 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
   const [rows, setRows] = useState<TableRow[]>();
   const [rest, setRest] = useState<ClientScopeRepresentation[]>();
 
-  const loader = async () => {
+  const [key, setKey] = useState(0);
+  const refresh = () => setKey(new Date().getTime());
+
+  useEffect(() => {
+    return useFetch(
+      async () => {
         const defaultClientScopes = await adminClient.clients.listDefaultClientScopes(
           { id: clientId }
         );
@@ -165,20 +170,20 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
           };
         });
 
-    const data = [...optional, ...defaultScopes];
+        const rows = [...optional, ...defaultScopes];
-    setRows(data);
+        const names = rows.map((row) => row.cells[0]);
-    const names = data.map((row) => row.cells[0]);
 
-    setRest(
+        const rest = clientScopes
-      clientScopes
           .filter((scope) => !names.includes(scope.name))
-        .filter((scope) => scope.protocol === protocol)
+          .filter((scope) => scope.protocol === protocol);
+        return { rows, rest };
+      },
+      ({ rows, rest }) => {
+        setRows(rows);
+        setRest(rest);
+      }
     );
-  };
+  }, [key]);
-
-  useEffect(() => {
-    loader();
-  }, []);
 
   const dropdown = (): IFormatter => (data?: IFormatterValueType) => {
     if (!data) {
@@ -199,7 +204,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
               value
             );
             addAlert(t("clientScopeSuccess"), AlertVariant.success);
-            await loader();
+            await refresh();
           } catch (error) {
             addAlert(t("clientScopeError", { error }), AlertVariant.danger);
           }
@@ -237,7 +242,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
                 )
               );
               addAlert(t("clientScopeSuccess"), AlertVariant.success);
-              loader();
+              refresh();
             } catch (error) {
               addAlert(t("clientScopeError", { error }), AlertVariant.danger);
             }
@@ -316,7 +321,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
                         })
                       );
                       setAddToggle(false);
-                      await loader();
+                      await refresh();
                       addAlert(t("clientScopeSuccess"), AlertVariant.success);
                     } catch (error) {
                       addAlert(
@@ -363,7 +368,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
                             t("clientScopeRemoveSuccess"),
                             AlertVariant.success
                           );
-                          loader();
+                          refresh();
                         } catch (error) {
                           addAlert(
                             t("clientScopeRemoveError", { error }),
@@ -416,7 +421,7 @@ export const ClientScopes = ({ clientId, protocol }: ClientScopesProps) => {
                       t("clientScopeRemoveSuccess"),
                       AlertVariant.success
                     );
-                    loader();
+                    refresh();
                   } catch (error) {
                     addAlert(
                       t("clientScopeRemoveError", { error }),

src/components/data-loader/DataLoader.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Spinner } from "@patternfly/react-core";
+import { useFetch } from "../../context/auth/AdminClient";
 
 type DataLoaderProps<T> = {
   loader: () => Promise<T>;
@@ -14,20 +15,22 @@ type Result<T> = {
 
 export function DataLoader<T>(props: DataLoaderProps<T>) {
   const [data, setData] = useState<{ result: T } | undefined>(undefined);
-  const loadData = async () => {
+
-    const result = await props.loader();
+  const [key, setKey] = useState(0);
-    setData({ result });
+  const refresh = () => setKey(new Date().getTime());
-  };
+
   useEffect(() => {
-    setData(undefined);
+    return useFetch(
-    loadData();
+      () => props.loader(),
-  }, [props]);
+      (result) => setData({ result })
+    );
+  }, [key]);
 
   if (data) {
     if (props.children instanceof Function) {
       return props.children({
         data: data.result,
-        refresh: () => loadData(),
+        refresh: refresh,
       });
     }
     return props.children;

src/components/download-dialog/DownloadDialog.tsx

@@ -18,7 +18,7 @@ import { ConfirmDialogModal } from "../confirm-dialog/ConfirmDialog";
 import { HelpItem } from "../help-enabler/HelpItem";
 import { useTranslation } from "react-i18next";
 import { useServerInfo } from "../../context/server-info/ServerInfoProvider";
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { HelpContext } from "../help-enabler/HelpHeader";
 
 export type DownloadDialogProps = {
@@ -65,23 +65,20 @@ export const DownloadDialog = ({
   const [openType, setOpenType] = useState(false);
 
   useEffect(() => {
-    let isMounted = true;
+    return useFetch(
-    (async () => {
+      async () => {
         const snippet = await adminClient.clients.getInstallationProviders({
           id,
           providerId: selected,
         });
-      if (isMounted) {
         if (typeof snippet === "string") {
-          setSnippet(snippet);
+          return snippet;
         } else {
-          setSnippet(JSON.stringify(snippet, undefined, 3));
+          return JSON.stringify(snippet, undefined, 3);
         }
-      }
+      },
-    })();
+      (snippet) => setSnippet(snippet)
-    return () => {
+    );
-      isMounted = false;
-    };
   }, [selected]);
   return (
     <ConfirmDialogModal

src/components/scroll-form/ScrollForm.tsx

@@ -1,4 +1,4 @@
-import React, { Children, useState } from "react";
+import React, { Children } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Grid,
@@ -19,14 +19,24 @@ type ScrollFormProps = {
 // This must match the page id created in App.tsx unless another page section has been given hasScrollableContent
 const mainPageContentId = "#kc-main-content-page-container";
 
-let spacesToHyphens = (string: string): string => {
+const spacesToHyphens = (string: string): string => {
   return string.replace(/\s+/g, "-");
 };
 
 export const ScrollForm = ({ sections, children }: ScrollFormProps) => {
   const { t } = useTranslation("common");
 
-  const Nav = () => (
+  const nodes = Children.toArray(children);
+  return (
+    <Grid hasGutter>
+      <GridItem span={8}>
+        {sections.map((cat, index) => (
+          <FormPanel scrollId={spacesToHyphens(cat)} key={cat} title={cat}>
+            {nodes[index]}
+          </FormPanel>
+        ))}
+      </GridItem>
+      <GridItem span={4}>
         <PageSection className="kc-scroll-form--sticky">
           <JumpLinks
             isVertical
@@ -38,25 +48,12 @@ export const ScrollForm = ({ sections, children }: ScrollFormProps) => {
           >
             {sections.map((cat) => (
               // note that JumpLinks currently does not work with spaces in the href
-          <JumpLinksItem href={`#${spacesToHyphens(cat)}`}>{cat}</JumpLinksItem>
+              <JumpLinksItem key={cat} href={`#${spacesToHyphens(cat)}`}>
+                {cat}
+              </JumpLinksItem>
             ))}
           </JumpLinks>
         </PageSection>
-  );
-
-  const nodes = Children.toArray(children);
-  return (
-    <Grid hasGutter>
-      <GridItem span={8}>
-        {sections.map((cat, index) => (
-          <FormPanel scrollId={spacesToHyphens(cat)} key={cat} title={cat}>
-            {/* <FormPanel scrollId={cat.replace(/\s+/g, "-")} key={cat} title={cat}> */}
-            {nodes[index]}
-          </FormPanel>
-        ))}
-      </GridItem>
-      <GridItem span={4}>
-        <Nav />
       </GridItem>
     </Grid>
   );

src/components/table-toolbar/KeycloakDataTable.tsx

@@ -14,6 +14,7 @@ import _ from "lodash";
 
 import { PaginatingTableToolbar } from "./PaginatingTableToolbar";
 import { TableToolbar } from "./TableToolbar";
+import { useFetch } from "../../context/auth/AdminClient";
 
 type Row<T> = {
   data: T;
@@ -127,12 +128,16 @@ export function KeycloakDataTable<T>({
   const [first, setFirst] = useState(0);
   const [search, setSearch] = useState("");
 
-  const load = async () => {
+  const [key, setKey] = useState(0);
+  const refresh = () => setKey(new Date().getTime());
+
+  useEffect(() => {
+    return useFetch(
+      async () => {
         setLoading(true);
         const data = await loader(first, max, search);
 
-    setRows(
+        const result = data!.map((value) => {
-      data!.map((value) => {
           return {
             data: value,
             selected: false,
@@ -143,14 +148,15 @@ export function KeycloakDataTable<T>({
               return (value as any)[col.name];
             }),
           };
-      })
+        });
-    );
+        return result;
+      },
+      (result) => {
+        setRows(result);
         setLoading(false);
-  };
+      }
-
+    );
-  useEffect(() => {
+  }, [key, first, max]);
-    load();
-  }, [first, max]);
 
   const getNodeText = (node: keyof T | JSX.Element): string => {
     if (["string", "number"].includes(typeof node)) {
@@ -184,7 +190,7 @@ export function KeycloakDataTable<T>({
       action.onClick = async (_, rowIndex) => {
         const result = await actions[index].onRowClick!(rows![rowIndex].data);
         if (result) {
-          load();
+          refresh();
         }
       };
       return action;
@@ -235,7 +241,7 @@ export function KeycloakDataTable<T>({
           }}
           inputGroupName={`${ariaLabelKey}input`}
           inputGroupOnChange={searchOnChange}
-          inputGroupOnClick={load}
+          inputGroupOnClick={refresh}
           inputGroupPlaceholder={t(searchPlaceholderKey)}
           toolbarItem={toolbarItem}
         >

src/context/auth/AdminClient.tsx

@@ -16,3 +16,20 @@ export const useAdminClient = () => {
 
   return adminClient;
 };
+
+export function useFetch<T>(
+  adminClientCall: () => Promise<T>,
+  callback: (param: T) => void
+) {
+  let canceled = false;
+
+  adminClientCall().then((result) => {
+    if (!canceled) {
+      callback(result);
+    }
+  });
+
+  return () => {
+    canceled = true;
+  };
+}

src/realm-roles/RealmRoleForm.tsx

@@ -24,7 +24,7 @@ import { FormAccess } from "../components/form-access/FormAccess";
 import { useAlerts } from "../components/alert/Alerts";
 import { ViewHeader } from "../components/view-header/ViewHeader";
 
-import { useAdminClient } from "../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import { RoleAttributes } from "./RoleAttributes";
 
@@ -110,15 +110,22 @@ export const RealmRolesForm = () => {
   const [activeTab, setActiveTab] = useState(0);
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
+      async () => {
         if (id) {
-        const fetchedRole = await adminClient.roles.findOneById({ id });
+          const role = await adminClient.roles.findOneById({ id });
-        setName(fetchedRole.name!);
+          return { role, name: role.name };
-        setupForm(fetchedRole);
         } else {
-        setName(t("createRole"));
+          return { name: t("createRole") };
         }
-    })();
+      },
+      ({ role, name }) => {
+        setName(name!);
+        if (role) {
+          setupForm(role);
+        }
+      }
+    );
   }, []);
 
   const setupForm = (role: RoleRepresentation) => {

src/realm-roles/RealmRoleTabs.tsx

@@ -17,7 +17,7 @@ import { Controller, useForm } from "react-hook-form";
 import { FormAccess } from "../components/form-access/FormAccess";
 
 import { useAlerts } from "../components/alert/Alerts";
-import { useAdminClient } from "../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation";
 import { RoleAttributes } from "./RoleAttributes";
 import "./RealmRolesSection.css";
@@ -35,11 +35,13 @@ export const RolesTabs = () => {
   const { addAlert } = useAlerts();
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
-      const fetchedRole = await adminClient.roles.findOneById({ id });
+      () => adminClient.roles.findOneById({ id }),
+      (fetchedRole) => {
         setName(fetchedRole.name!);
         setupForm(fetchedRole);
-    })();
+      }
+    );
   }, []);
 
   const setupForm = (role: RoleRepresentation) => {

src/realm-roles/RoleAttributes.tsx

@@ -5,7 +5,7 @@ import { useParams } from "react-router-dom";
 import { Button, ButtonVariant, TextInput } from "@patternfly/react-core";
 import { useForm } from "react-hook-form";
 import "./RealmRolesSection.css";
-import { useAdminClient } from "../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import RoleRepresentation from "keycloak-admin/lib/defs/roleRepresentation";
 import { useTranslation } from "react-i18next";
 
@@ -46,11 +46,13 @@ export const RoleAttributes = () => {
   ];
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
-      const fetchedRole = await adminClient.roles.findOneById({ id });
+      () => adminClient.roles.findOneById({ id }),
+      (fetchedRole) => {
         setName(fetchedRole.name!);
         setupForm(fetchedRole);
-    })();
+      }
+    );
   }, []);
 
   const setupForm = (role: RoleRepresentation) => {

src/user-federation/UserFederationSection.tsx

@@ -22,7 +22,7 @@ import { ViewHeader } from "../components/view-header/ViewHeader";
 import { DatabaseIcon } from "@patternfly/react-icons";
 import { useTranslation } from "react-i18next";
 import { RealmContext } from "../context/realm-context/RealmContext";
-import { useAdminClient } from "../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../context/auth/AdminClient";
 import { useConfirmDialog } from "../components/confirm-dialog/ConfirmDialog";
 import "./user-federation.css";
 
@@ -34,19 +34,23 @@ export const UserFederationSection = () => {
   const { t } = useTranslation("user-federation");
   const { realm } = useContext(RealmContext);
   const adminClient = useAdminClient();
+  const [key, setKey] = useState(0);
+  const refresh = () => setKey(new Date().getTime());
 
-  const loader = async () => {
+  useEffect(() => {
+    return useFetch(
+      () => {
         const testParams: { [name: string]: string | number } = {
           parentId: realm,
           type: "org.keycloak.storage.UserStorageProvider", // MF note that this is providerType in the output, but API call is still type
         };
-    const userFederations = await adminClient.components.find(testParams);
+        return adminClient.components.find(testParams);
+      },
+      (userFederations) => {
         setUserFederations(userFederations);
-  };
+      }
-
+    );
-  useEffect(() => {
+  }, [key]);
-    loader();
-  }, []);
 
   const ufAddProviderDropdownItems = [
     <DropdownItem key="itemLDAP">LDAP</DropdownItem>,
@@ -54,7 +58,7 @@ export const UserFederationSection = () => {
   ];
 
   const learnMoreLinkProps = {
-    title: `${t("common:learnMore")}`,
+    title: t("common:learnMore"),
     href:
       "https://www.keycloak.org/docs/latest/server_admin/index.html#_user-storage-federation",
   };
@@ -70,7 +74,7 @@ export const UserFederationSection = () => {
     onConfirm: async () => {
       try {
         await adminClient.components.del({ id: currentCard });
-        await loader();
+        refresh();
         addAlert(t("userFedDeletedSuccess"), AlertVariant.success);
       } catch (error) {
         addAlert(t("userFedDeleteError", { error }), AlertVariant.danger);

src/user-federation/kerberos/KerberosSettingsCache.tsx

@@ -12,7 +12,7 @@ import { convertToFormValues } from "../../util";
 import { useForm, Controller, useWatch } from "react-hook-form";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { FormAccess } from "../../components/form-access/FormAccess";
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
 import _ from "lodash";
 
@@ -41,12 +41,10 @@ export const KerberosSettingsCache = () => {
   };
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
-      const fetchedComponent = await adminClient.components.findOne({ id });
+      () => adminClient.components.findOne({ id }),
-      if (fetchedComponent) {
+      (component) => setupForm(component)
-        setupForm(fetchedComponent);
+    );
-      }
-    })();
   }, []);
 
   const [isCachePolicyDropdownOpen, setIsCachePolicyDropdownOpen] = useState(

src/user-federation/ldap/LdapSettingsAdvanced.tsx

@@ -6,7 +6,7 @@ import { useForm, Controller } from "react-hook-form";
 import { convertToFormValues } from "../../util";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { FormAccess } from "../../components/form-access/FormAccess";
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
 
 export const LdapSettingsAdvanced = () => {
@@ -27,12 +27,10 @@ export const LdapSettingsAdvanced = () => {
   };
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
-      const fetchedComponent = await adminClient.components.findOne({ id });
+      () => adminClient.components.findOne({ id }),
-      if (fetchedComponent) {
+      (fetchedComponent) => setupForm(fetchedComponent)
-        setupForm(fetchedComponent);
+    );
-      }
-    })();
   }, []);
 
   return (

src/user-federation/ldap/LdapSettingsConnection.tsx

@@ -16,7 +16,7 @@ import { convertToFormValues } from "../../util";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { EyeIcon } from "@patternfly/react-icons";
 import { FormAccess } from "../../components/form-access/FormAccess";
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
 
 export const LdapSettingsConnection = () => {
@@ -62,12 +62,10 @@ export const LdapSettingsConnection = () => {
   };
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
-      const fetchedComponent = await adminClient.components.findOne({ id });
+      () => adminClient.components.findOne({ id }),
-      if (fetchedComponent) {
+      (fetchedComponent) => setupForm(fetchedComponent)
-        setupForm(fetchedComponent);
+    );
-      }
-    })();
   }, []);
 
   return (

src/user-federation/ldap/LdapSettingsGeneral.tsx

@@ -12,7 +12,7 @@ import { useForm, Controller } from "react-hook-form";
 import { convertToFormValues } from "../../util";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { FormAccess } from "../../components/form-access/FormAccess";
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
 
 export const LdapSettingsGeneral = () => {
@@ -37,12 +37,10 @@ export const LdapSettingsGeneral = () => {
   };
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
-      const fetchedComponent = await adminClient.components.findOne({ id });
+      () => adminClient.components.findOne({ id }),
-      if (fetchedComponent) {
+      (fetchedComponent) => setupForm(fetchedComponent)
-        setupForm(fetchedComponent);
+    );
-      }
-    })();
   }, []);
 
   const convertVendorNames = (vendorName: string) => {

src/user-federation/ldap/LdapSettingsKerberosIntegration.tsx

@@ -6,7 +6,7 @@ import { useForm, Controller } from "react-hook-form";
 import { convertToFormValues } from "../../util";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { FormAccess } from "../../components/form-access/FormAccess";
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
 
 export const LdapSettingsKerberosIntegration = () => {
@@ -28,12 +28,10 @@ export const LdapSettingsKerberosIntegration = () => {
   };
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
-      const fetchedComponent = await adminClient.components.findOne({ id });
+      () => adminClient.components.findOne({ id }),
-      if (fetchedComponent) {
+      (fetchedComponent) => setupForm(fetchedComponent)
-        setupForm(fetchedComponent);
+    );
-      }
-    })();
   }, []);
 
   return (

src/user-federation/ldap/LdapSettingsSearching.tsx

@@ -12,7 +12,7 @@ import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { useForm, Controller } from "react-hook-form";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { FormAccess } from "../../components/form-access/FormAccess";
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
 import { convertToFormValues } from "../../util";
 
@@ -54,12 +54,10 @@ export const LdapSettingsSearching = () => {
   };
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
-      const fetchedComponent = await adminClient.components.findOne({ id });
+      () => adminClient.components.findOne({ id }),
-      if (fetchedComponent) {
+      (fetchedComponent) => setupForm(fetchedComponent)
-        setupForm(fetchedComponent);
+    );
-      }
-    })();
   }, []);
 
   return (

src/user-federation/ldap/LdapSettingsSynchronization.tsx

@@ -6,7 +6,7 @@ import { useForm, Controller } from "react-hook-form";
 import { convertToFormValues } from "../../util";
 import ComponentRepresentation from "keycloak-admin/lib/defs/componentRepresentation";
 import { FormAccess } from "../../components/form-access/FormAccess";
-import { useAdminClient } from "../../context/auth/AdminClient";
+import { useAdminClient, useFetch } from "../../context/auth/AdminClient";
 import { useParams } from "react-router-dom";
 
 export const LdapSettingsSynchronization = () => {
@@ -27,12 +27,10 @@ export const LdapSettingsSynchronization = () => {
   };
 
   useEffect(() => {
-    (async () => {
+    return useFetch(
-      const fetchedComponent = await adminClient.components.findOne({ id });
+      () => adminClient.components.findOne({ id }),
-      if (fetchedComponent) {
+      (fetchedComponent) => setupForm(fetchedComponent)
-        setupForm(fetchedComponent);
+    );
-      }
-    })();
   }, []);
 
   return (