From e8b9baf99ef478119d89e14c8b32d8d8f5942df7 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Mon, 15 Jul 2024 13:55:57 +0200
Subject: [PATCH] fix: refactor link event listeners

---
 components/TempDesignSystem/Link/index.tsx | 24 +++++++++++++---------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/components/TempDesignSystem/Link/index.tsx b/components/TempDesignSystem/Link/index.tsx
index 885543bef..80a3bd981 100644
--- a/components/TempDesignSystem/Link/index.tsx
+++ b/components/TempDesignSystem/Link/index.tsx
@@ -1,7 +1,7 @@
 "use client"
 import NextLink from "next/link"
 import { usePathname } from "next/navigation"
-import { useEffect } from "react"
+import { useCallback, useEffect } from "react"
 
 import { trackClick } from "@/utils/tracking"
 
@@ -36,19 +36,23 @@ export default function Link({
     variant,
   })
 
-  useEffect(() => {
+  const trackClickById = useCallback(() => {
     if (trackingId) {
-      document
-        .getElementById(trackingId)
-        ?.addEventListener("click", () => trackClick(trackingId))
-      return () => {
-        document
-          .getElementById(trackingId)
-          ?.removeEventListener("click", () => trackClick(trackingId))
-      }
+      trackClick(trackingId)
     }
   }, [trackingId])
 
+  useEffect(() => {
+    if (trackingId) {
+      const linkComponent = document.getElementById(trackingId)
+
+      linkComponent?.addEventListener("click", trackClickById)
+      return () => {
+        linkComponent?.removeEventListener("click", trackClickById)
+      }
+    }
+  }, [trackClickById, trackingId])
+
   return (
     <NextLink
       scroll={scroll}