fix(use-segment): avoid multiple analytics loads (#1242)

* fix(use-segment): avoid multiple analytics loads

* fix: add changesets

* fix: add peerdeps back

Author: chambo-e

.changeset/brown-dragons-flash.md

@@ -0,0 +1,5 @@
+---
+'@scaleway/use-segment': patch
+---
+
+Avoid multiple analytics loads

packages/use-segment/package.json

@@ -23,7 +23,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@segment/analytics-next": "1.51.3"
+    "@segment/analytics-next": "1.51.3",
+    "use-deep-compare-effect": "1.8.1"
+  },
+  "devDependencies": {
+    "react": "18.2.0"
   },
   "peerDependencies": {
     "react": "18.x || 18"

packages/use-segment/src/useSegment.tsx

@@ -5,7 +5,8 @@ import type {
   InitOptions,
 } from '@segment/analytics-next'
 import type { ReactNode } from 'react'
-import { createContext, useContext, useEffect, useMemo, useState } from 'react'
+import { createContext, useContext, useMemo, useState } from 'react'
+import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect'
 
 export type OnEventError = (error: Error) => Promise<void> | void
 type EventFunction = (...args: never[]) => Promise<void>
@@ -72,7 +73,7 @@ function SegmentProvider<T extends Events>({
     )
   }, [initOptions?.integrations, settings?.writeKey])
 
-  useEffect(() => {
+  useDeepCompareEffectNoCheck(() => {
     if (shouldLoad && settings) {
       AnalyticsBrowser.load(settings, initOptions)
         .then(([res]) => setAnalytics(res))