From 8fd0dea83d8d5a62b70db9b4dd1f0d62c72339cf Mon Sep 17 00:00:00 2001
From: Pepijn van den Hoven
 <57765110+pepijnvandenhoven@users.noreply.github.com>
Date: Thu, 22 May 2025 15:05:23 +0200
Subject: [PATCH] Update mixpanel_setup.md

---
 doc/mixpanel_setup.md | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/doc/mixpanel_setup.md b/doc/mixpanel_setup.md
index c7a3e20..7acf965 100644
--- a/doc/mixpanel_setup.md
+++ b/doc/mixpanel_setup.md
@@ -9,21 +9,26 @@ For the backend Freshheads created a php bundle, [FHMixpanelBundle](https://gith
 Add the MixpanelProvider to your app:
 
 ```tsx
-import { MixpanelProvider } from '@freshheads/analytics-essentials';
+import { MixpanelProvider } from "@freshheads/analytics-essentials";
+import { useMemo } from "react";
 
 const App = () => {
+  const trackingService = useMemo(
+    () =>
+      new WebTrackingService((event) => {
+        return sendTrackEvent(event);
+      }),
+    []
+  );
+
   return (
-      <MixpanelProvider
-          trackingService={
-              new WebTrackingService((event) => {
-                  return sendTrackEvent(event);
-              })
-          }>
-        <YourApp />
+    <MixpanelProvider trackingService={trackingService}>
+      <YourApp />
     </MixpanelProvider>
   );
 };
 ```
+> Tip: memoize the WebTrackingService instance to prevent accidental page view triggers. If we'd instantiate it inline, we would trigger a page view whenever app rerenders (e.g. when the path, query params or hash changes)
 
 `sendTrackEvent` is a function that sends the event to the backend. It should have the following signature:
 
@@ -89,11 +94,7 @@ const defaultMixpanelEventContext = {
 const App = () => {
   return (
     <MixpanelProvider 
-        trackingService={
-            new WebTrackingService((event) => {
-                return sendTrackEvent(event);
-            })
-        } 
+        trackingService={trackingService} 
         defaultEventContext={defaultMixpanelEventContext}>
         <YourApp />
     </MixpanelProvider>
@@ -148,12 +149,7 @@ Then add this component to your app:
 
 const App = () => {
     return (
-        <MixpanelProvider 
-            trackingService={
-                new WebTrackingService((event) => {
-                    return sendTrackEvent(event);
-                })
-            }>
+        <MixpanelProvider trackingService={trackingService}>
             <TrackPageView />
             {children}
         </MixpanelProvider>