adding usEffect

Author: cauemarcondes

x-pack/plugins/apm/public/context/breadcrumbs/use_breadcrumb.ts

@@ -6,7 +6,7 @@
  */
 
 import { useCurrentRoute } from '@kbn/typed-react-router-config';
-import { useContext, useRef } from 'react';
+import { useContext, useRef, useEffect } from 'react';
 import { castArray } from 'lodash';
 import { Breadcrumb, BreadcrumbsContext } from './context';
 
@@ -21,19 +21,25 @@ export function useBreadcrumb(breadcrumb: Breadcrumb | Breadcrumb[]) {
 
   const matchedRoute = useRef(match?.route);
 
-  if (matchedRoute.current && matchedRoute.current !== match?.route) {
-    api.unset(matchedRoute.current);
-  }
-
-  matchedRoute.current = match?.route;
-
-  if (matchedRoute.current) {
-    api.set(matchedRoute.current, castArray(breadcrumb));
-  }
-
-  return () => {
-    if (matchedRoute.current) {
-      api.unset(matchedRoute.current);
-    }
-  };
+  useEffect(
+    () => {
+      if (matchedRoute.current && matchedRoute.current !== match?.route) {
+        api.unset(matchedRoute.current);
+      }
+
+      matchedRoute.current = match?.route;
+
+      if (matchedRoute.current) {
+        api.set(matchedRoute.current, castArray(breadcrumb));
+      }
+
+      return () => {
+        if (matchedRoute.current) {
+          api.unset(matchedRoute.current);
+        }
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [match]
+  );
 }