refactor(useSegment): introduce new prop to get rid of undefined shouldLoad status

Author: ModuloM

packages/use-segment/src/__tests__/index.tsx

@@ -46,6 +46,7 @@ const wrapper =
   ({
     settings,
     initOptions,
+    isOptionsLoaded,
     onError,
     onEventError,
     events = defaultEvents,
@@ -54,6 +55,7 @@ const wrapper =
     <SegmentProvider
       settings={settings}
       initOptions={initOptions}
+      isOptionsLoaded={isOptionsLoaded}
       onError={onError}
       onEventError={onEventError}
       events={events}
@@ -82,7 +84,7 @@ describe('segment hook', () => {
     console.error = orignalConsoleError
   })
 
-  it('useSegment should not be ready and not load when options are loading', () => {
+  it('useSegment should not be ready and not load by default', () => {
     const mock = jest
       .spyOn(AnalyticsBrowser, 'load')
       .mockResolvedValue([{} as Analytics, {} as Context])
@@ -132,6 +134,7 @@ describe('segment hook', () => {
         events: defaultEvents,
         initOptions: { integrations: { All: false } },
         settings: { writeKey: 'sample ' },
+        isOptionsLoaded: true,
       }),
     })
     expect(mock).toHaveBeenCalledTimes(0)
@@ -155,6 +158,7 @@ describe('segment hook', () => {
           },
         },
         settings: { writeKey: 'sample ' },
+        isOptionsLoaded: true,
       }),
     })
 
@@ -182,6 +186,7 @@ describe('segment hook', () => {
           },
         },
         settings: { writeKey: 'sample ' },
+        isOptionsLoaded: true,
       }),
     })
 
@@ -193,7 +198,7 @@ describe('segment hook', () => {
     expect(result.current.isAnalyticsReady).toBe(true)
   })
 
-  it('Provider should load with key', async () => {
+  it('Provider should not load when options are not loaded', async () => {
     const mock = jest
       .spyOn(AnalyticsBrowser, 'load')
       .mockResolvedValue([{} as Analytics, {} as Context])
@@ -205,11 +210,35 @@ describe('segment hook', () => {
         events: defaultEvents,
         settings,
         initOptions: {},
+        isOptionsLoaded: false,
+      }),
+    })
+
+    expect(mock).toHaveBeenCalledTimes(0)
+
+    await waitFor(() => {
+      expect(result.current.analytics).toStrictEqual(undefined)
+    })
+    expect(result.current.isAnalyticsReady).toBe(false)
+  })
+
+  it('Provider should load with key', async () => {
+    const mock = jest
+      .spyOn(AnalyticsBrowser, 'load')
+      .mockResolvedValue([{} as Analytics, {} as Context])
+
+    const settings = { writeKey: 'helloworld' }
+
+    const { result } = renderHook(() => useSegment<DefaultEvents>(), {
+      wrapper: wrapper({
+        events: defaultEvents,
+        settings,
+        isOptionsLoaded: true,
       }),
     })
 
     expect(mock).toHaveBeenCalledTimes(1)
-    expect(mock).toHaveBeenCalledWith(settings, {})
+    expect(mock).toHaveBeenCalledWith(settings, undefined)
 
     await waitFor(() => {
       expect(result.current.analytics).toStrictEqual({})
@@ -228,12 +257,12 @@ describe('segment hook', () => {
       wrapper: wrapper({
         events: defaultEvents,
         settings,
-        initOptions: {},
+        isOptionsLoaded: true,
       }),
     })
 
     expect(mock).toHaveBeenCalledTimes(1)
-    expect(mock).toHaveBeenCalledWith(settings, {})
+    expect(mock).toHaveBeenCalledWith(settings, undefined)
 
     await waitFor(() => {
       expect(result.current.analytics).toStrictEqual({})
@@ -253,12 +282,12 @@ describe('segment hook', () => {
         events: defaultEvents,
         onError,
         settings,
-        initOptions: {},
+        isOptionsLoaded: true,
       }),
     })
 
     expect(mock).toHaveBeenCalledTimes(1)
-    expect(mock).toHaveBeenCalledWith(settings, {})
+    expect(mock).toHaveBeenCalledWith(settings, undefined)
 
     await waitForExpect(() => {
       expect(onError).toHaveBeenCalledTimes(1)
@@ -285,7 +314,7 @@ describe('segment hook', () => {
         onError,
         onEventError,
         settings,
-        initOptions: {},
+        isOptionsLoaded: true,
       }),
     })
 
@@ -317,6 +346,7 @@ describe('segment hook', () => {
         events: defaultEvents,
         initOptions,
         settings,
+        isOptionsLoaded: true,
       }),
     })
 

packages/use-segment/src/useSegment.tsx

@@ -41,6 +41,7 @@ export function useSegment<T extends Events>(): SegmentContextInterface<T> {
 export type SegmentProviderProps<T> = {
   settings?: AnalyticsBrowserSettings
   initOptions?: InitOptions
+  isOptionsLoaded?: boolean
   onError?: (err: Error) => void
   onEventError?: OnEventError
   events: T
@@ -53,6 +54,7 @@ function SegmentProvider<T extends Events>({
   children,
   settings,
   initOptions,
+  isOptionsLoaded = false,
   onError,
   onEventError,
   events,
@@ -63,26 +65,25 @@ function SegmentProvider<T extends Events>({
   )
 
   const shouldLoad = useMemo(() => {
-    if (settings !== undefined && initOptions !== undefined) {
-      const hasNoIntegrationsSettings = !initOptions.integrations
-      const isAllEnabled = !!initOptions.integrations?.All
+    if (isOptionsLoaded) {
+      const hasNoIntegrationsSettings = !initOptions?.integrations
+      const isAllEnabled = !!initOptions?.integrations?.All
       const isAnyIntegrationEnabled = Object.values(
-        initOptions.integrations ?? {},
+        initOptions?.integrations ?? {},
       ).reduce<boolean>((acc, integration) => !!acc || !!integration, false)
 
       return (
-        !!settings.writeKey &&
+        !!settings?.writeKey &&
         (hasNoIntegrationsSettings || isAllEnabled || isAnyIntegrationEnabled)
       )
     }
 
-    // If options or settings are undefined, we don't know if we should load or not
-    // (For example, in case segment integrations are still loading)
-    return undefined
-  }, [initOptions, settings])
+    // If options are not loaded, we should not load
+    return false
+  }, [initOptions?.integrations, isOptionsLoaded, settings?.writeKey])
 
   useDeepCompareEffectNoCheck(() => {
-    if (shouldLoad === true && settings) {
+    if (isOptionsLoaded && shouldLoad && settings) {
       AnalyticsBrowser.load(settings, initOptions)
         .then(([res]) => {
           setAnalytics(res)
@@ -93,7 +94,7 @@ function SegmentProvider<T extends Events>({
         .finally(() => {
           setIsAnalyticsReady(true)
         })
-    } else if (shouldLoad === false) {
+    } else if (isOptionsLoaded && !shouldLoad) {
       // When user has refused tracking, set ready anyway
       setIsAnalyticsReady(true)
     }