diff --git a/.changeset/brown-dragons-flash.md b/.changeset/brown-dragons-flash.md new file mode 100644 index 000000000..a2414f843 --- /dev/null +++ b/.changeset/brown-dragons-flash.md @@ -0,0 +1,5 @@ +--- +'@scaleway/use-segment': patch +--- + +Avoid multiple analytics loads diff --git a/packages/use-segment/package.json b/packages/use-segment/package.json index 80e9b9def..23091e1df 100644 --- a/packages/use-segment/package.json +++ b/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" diff --git a/packages/use-segment/src/useSegment.tsx b/packages/use-segment/src/useSegment.tsx index eb9b9d8ce..60a231ab4 100644 --- a/packages/use-segment/src/useSegment.tsx +++ b/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 type EventFunction = (...args: never[]) => Promise @@ -72,7 +73,7 @@ function SegmentProvider({ ) }, [initOptions?.integrations, settings?.writeKey]) - useEffect(() => { + useDeepCompareEffectNoCheck(() => { if (shouldLoad && settings) { AnalyticsBrowser.load(settings, initOptions) .then(([res]) => setAnalytics(res)) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2db6d3c81..78e900998 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -211,8 +211,13 @@ importers: packages/use-segment: specifiers: '@segment/analytics-next': 1.51.3 + react: 18.2.0 + use-deep-compare-effect: 1.8.1 dependencies: '@segment/analytics-next': 1.51.3 + use-deep-compare-effect: 1.8.1_react@18.2.0 + devDependencies: + react: 18.2.0 packages/use-storage: specifiers: {} @@ -1580,7 +1585,7 @@ packages: resolution: {integrity: sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==} engines: {node: '>=6.9.0'} dependencies: - regenerator-runtime: 0.13.10 + regenerator-runtime: 0.13.11 dev: false /@babel/runtime/7.20.7: @@ -5111,6 +5116,11 @@ packages: engines: {node: '>=0.4.0'} dev: true + /dequal/2.0.3: + resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} + engines: {node: '>=6'} + dev: false + /detect-indent/6.1.0: resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==} engines: {node: '>=8'} @@ -8250,10 +8260,6 @@ packages: resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==} dev: true - /regenerator-runtime/0.13.10: - resolution: {integrity: sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==} - dev: false - /regenerator-runtime/0.13.11: resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==} @@ -9145,6 +9151,17 @@ packages: requires-port: 1.0.0 dev: true + /use-deep-compare-effect/1.8.1_react@18.2.0: + resolution: {integrity: sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==} + engines: {node: '>=10', npm: '>=6'} + peerDependencies: + react: '>=16.13 || 18' + dependencies: + '@babel/runtime': 7.20.7 + dequal: 2.0.3 + react: 18.2.0 + dev: false + /util-deprecate/1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true