fix(react): overlay hooks memorised properly to prevent re-renders (#24010)

resolves #23741

Co-authored-by: Fabrice <fabrice@weinberg.me>

packages/react/package.json

@@ -52,6 +52,7 @@
     "@rollup/plugin-virtual": "^2.0.3",
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
+    "@testing-library/react-hooks": "^7.0.1",
     "@types/jest": "^26.0.15",
     "@types/node": "^14.0.14",
     "@types/react": "16.14.0",

packages/react/src/hooks/__tests__/hooks.spec.tsx

@@ -0,0 +1,153 @@
+import { alertController, modalController } from '@ionic/core';
+
+import React from 'react';
+
+import { useController } from '../useController';
+import { useOverlay } from '../useOverlay';
+
+import { useIonActionSheet } from '../useIonActionSheet';
+import type { UseIonActionSheetResult } from '../useIonActionSheet';
+import { useIonAlert } from '../useIonAlert';
+import type { UseIonAlertResult } from '../useIonAlert';
+import { useIonLoading } from '../useIonLoading';
+import type { UseIonLoadingResult } from '../useIonLoading';
+import { useIonModal } from '../useIonModal';
+import type { UseIonModalResult } from '../useIonModal';
+import { useIonPicker } from '../useIonPicker';
+import type { UseIonPickerResult } from '../useIonPicker';
+import { useIonPopover } from '../useIonPopover';
+import type { UseIonPopoverResult } from '../useIonPopover';
+import { useIonToast } from '../useIonToast';
+import type { UseIonToastResult } from '../useIonToast';
+
+import { renderHook } from '@testing-library/react-hooks';
+
+describe('useController', () => {
+  it('should be memorised', () => {
+    const { result, rerender } = renderHook(() =>
+      useController('AlertController', alertController)
+    );
+
+    rerender();
+
+    const [
+      { present: firstPresent, dismiss: firstDismiss },
+      { present: secondPresent, dismiss: secondDismiss },
+    ] = result.all as ReturnType<typeof useController>[];
+
+    expect(firstPresent).toBe(secondPresent);
+    expect(firstDismiss).toBe(secondDismiss);
+  });
+});
+
+describe('useIonActionSheet', () => {
+  it('should be memorised', () => {
+    const { result, rerender } = renderHook(() => useIonActionSheet());
+
+    rerender();
+
+    const [[firstPresent, firstDismiss], [secondPresent, secondDismiss]] =
+      result.all as UseIonActionSheetResult[];
+    expect(firstPresent).toBe(secondPresent);
+    expect(firstDismiss).toBe(secondDismiss);
+  });
+});
+
+describe('useIonAlert', () => {
+  it('should be memorised', () => {
+    const { result, rerender } = renderHook(() => useIonAlert());
+
+    rerender();
+
+    const [[firstPresent, firstDismiss], [secondPresent, secondDismiss]] =
+      result.all as UseIonAlertResult[];
+    expect(firstPresent).toBe(secondPresent);
+    expect(firstDismiss).toBe(secondDismiss);
+  });
+});
+
+describe('useIonLoading', () => {
+  it('should be memorised', () => {
+    const { result, rerender } = renderHook(() => useIonLoading());
+
+    rerender();
+
+    const [[firstPresent, firstDismiss], [secondPresent, secondDismiss]] =
+      result.all as UseIonLoadingResult[];
+    expect(firstPresent).toBe(secondPresent);
+    expect(firstDismiss).toBe(secondDismiss);
+  });
+});
+
+describe('useIonModal', () => {
+  it('should be memorised', () => {
+    const ModalComponent = () => <div />;
+    const { result, rerender } = renderHook(() => useIonModal(ModalComponent, {}));
+
+    rerender();
+
+    const [[firstPresent, firstDismiss], [secondPresent, secondDismiss]] =
+      result.all as UseIonModalResult[];
+    expect(firstPresent).toBe(secondPresent);
+    expect(firstDismiss).toBe(secondDismiss);
+  });
+});
+
+describe('useIonPicker', () => {
+  it('should be memorised', () => {
+    const { result, rerender } = renderHook(() => useIonPicker());
+
+    rerender();
+
+    const [[firstPresent, firstDismiss], [secondPresent, secondDismiss]] =
+      result.all as UseIonPickerResult[];
+    expect(firstPresent).toBe(secondPresent);
+    expect(firstDismiss).toBe(secondDismiss);
+  });
+});
+
+describe('useIonPopover', () => {
+  it('should be memorised', () => {
+    const PopoverComponent = () => <div />;
+    const { result, rerender } = renderHook(() => useIonPopover(PopoverComponent, {}));
+
+    rerender();
+
+    const [[firstPresent, firstDismiss], [secondPresent, secondDismiss]] =
+      result.all as UseIonPopoverResult[];
+    expect(firstPresent).toBe(secondPresent);
+    expect(firstDismiss).toBe(secondDismiss);
+  });
+});
+
+describe('useIonToast', () => {
+  it('should be memorised', () => {
+    const { result, rerender } = renderHook(() => useIonToast());
+
+    rerender();
+
+    const [[firstPresent, firstDismiss], [secondPresent, secondDismiss]] =
+      result.all as UseIonToastResult[];
+    expect(firstPresent).toBe(secondPresent);
+    expect(firstDismiss).toBe(secondDismiss);
+  });
+});
+
+describe('useOverlay', () => {
+  it('should be memorised', () => {
+    const OverlayComponent = () => <div />;
+    const { result, rerender } = renderHook(() =>
+      useOverlay('IonModal', modalController, OverlayComponent, {})
+    );
+
+    rerender();
+
+    const [
+      { present: firstPresent, dismiss: firstDismiss },
+      { present: secondPresent, dismiss: secondDismiss },
+    ] = result.all as ReturnType<typeof useOverlay>[];
+
+    expect(firstPresent).toBe(secondPresent);
+    expect(firstDismiss).toBe(secondDismiss);
+  });
+});

packages/react/src/hooks/useController.ts

@@ -1,5 +1,5 @@
 import { OverlayEventDetail } from '@ionic/core';
-import { useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 
 import { attachProps } from '../components/utils';
 
@@ -10,71 +10,53 @@ interface OverlayBase extends HTMLElement {
   dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
 }
 
-export function useController<
+export function useController<OptionsType, OverlayType extends OverlayBase>(
-  OptionsType,
-  OverlayType extends OverlayBase
->(
   displayName: string,
   controller: { create: (options: OptionsType) => Promise<OverlayType> }
 ) {
   const overlayRef = useRef<OverlayType>();
-  const didDismissEventName = useMemo(
+  const didDismissEventName = useMemo(() => `on${displayName}DidDismiss`, [displayName]);
-    () => `on${displayName}DidDismiss`,
+  const didPresentEventName = useMemo(() => `on${displayName}DidPresent`, [displayName]);
-    [displayName]
+  const willDismissEventName = useMemo(() => `on${displayName}WillDismiss`, [displayName]);
-  );
+  const willPresentEventName = useMemo(() => `on${displayName}WillPresent`, [displayName]);
-  const didPresentEventName = useMemo(
-    () => `on${displayName}DidPresent`,
-    [displayName]
-  );
-  const willDismissEventName = useMemo(
-    () => `on${displayName}WillDismiss`,
-    [displayName]
-  );
-  const willPresentEventName = useMemo(
-    () => `on${displayName}WillPresent`,
-    [displayName]
-  );
 
-  const present = async (options: OptionsType & HookOverlayOptions) => {
+  const present = useCallback(
-    if (overlayRef.current) {
+    async (options: OptionsType & HookOverlayOptions) => {
-      return;
+      if (overlayRef.current) {
-    }
+        return;
-    const {
-      onDidDismiss,
-      onWillDismiss,
-      onDidPresent,
-      onWillPresent,
-      ...rest
-    } = options;
-
-    const handleDismiss = (event: CustomEvent<OverlayEventDetail<any>>) => {
-      if (onDidDismiss) {
-        onDidDismiss(event);
       }
+      const { onDidDismiss, onWillDismiss, onDidPresent, onWillPresent, ...rest } = options;
+
+      const handleDismiss = (event: CustomEvent<OverlayEventDetail<any>>) => {
+        if (onDidDismiss) {
+          onDidDismiss(event);
+        }
+        overlayRef.current = undefined;
+      };
+
+      overlayRef.current = await controller.create({
+        ...(rest as any),
+      });
+
+      attachProps(overlayRef.current, {
+        [didDismissEventName]: handleDismiss,
+        [didPresentEventName]: (e: CustomEvent) => onDidPresent && onDidPresent(e),
+        [willDismissEventName]: (e: CustomEvent) => onWillDismiss && onWillDismiss(e),
+        [willPresentEventName]: (e: CustomEvent) => onWillPresent && onWillPresent(e),
+      });
+
+      overlayRef.current.present();
+    },
+    [controller]
+  );
+
+  const dismiss = useCallback(
+    () => async () => {
+      overlayRef.current && (await overlayRef.current.dismiss());
       overlayRef.current = undefined;
-    }
+    },
-
+    []
-    overlayRef.current = await controller.create({
+  );
-      ...(rest as any),
-    });
-
-    attachProps(overlayRef.current, {
-      [didDismissEventName]: handleDismiss,
-      [didPresentEventName]: (e: CustomEvent) =>
-        onDidPresent && onDidPresent(e),
-      [willDismissEventName]: (e: CustomEvent) =>
-        onWillDismiss && onWillDismiss(e),
-      [willPresentEventName]: (e: CustomEvent) =>
-        onWillPresent && onWillPresent(e),
-    });
-
-    overlayRef.current.present();
-  };
-
-  const dismiss = async () => {
-    overlayRef.current && await overlayRef.current.dismiss();
-    overlayRef.current = undefined;
-  };
 
   return {
     present,

packages/react/src/hooks/useIonActionSheet.ts

@@ -1,4 +1,5 @@
 import { ActionSheetButton, ActionSheetOptions, actionSheetController } from '@ionic/core';
+import { useCallback } from 'react';
 
 import { HookOverlayOptions } from './HookOverlayOptions';
 import { useController } from './useController';
@@ -13,23 +14,24 @@ export function useIonActionSheet(): UseIonActionSheetResult {
     actionSheetController
   );
 
-  function present(buttons: ActionSheetButton[], header?: string): void;
+  const present = useCallback(
-  function present(options: ActionSheetOptions & HookOverlayOptions): void;
+    (
-  function present(buttonsOrOptions: ActionSheetButton[] | ActionSheetOptions & HookOverlayOptions, header?: string) {
+      buttonsOrOptions: ActionSheetButton[] | (ActionSheetOptions & HookOverlayOptions),
-    if (Array.isArray(buttonsOrOptions)) {
+      header?: string
-      controller.present({
+    ) => {
-        buttons: buttonsOrOptions,
+      if (Array.isArray(buttonsOrOptions)) {
-        header
+        controller.present({
-      });
+          buttons: buttonsOrOptions,
-    } else {
+          header,
-      controller.present(buttonsOrOptions);
+        });
-    }
+      } else {
-  }
+        controller.present(buttonsOrOptions);
+      }
+    },
+    [controller.present]
+  );
 
-  return [
+  return [present, controller.dismiss];
-    present,
-    controller.dismiss
-  ];
 }
 
 export type UseIonActionSheetResult = [

packages/react/src/hooks/useIonAlert.ts

@@ -1,4 +1,5 @@
 import { AlertButton, AlertOptions, alertController } from '@ionic/core';
+import { useCallback } from 'react';
 
 import { HookOverlayOptions } from './HookOverlayOptions';
 import { useController } from './useController';
@@ -8,28 +9,23 @@ import { useController } from './useController';
  * @returns Returns the present and dismiss methods in an array
  */
 export function useIonAlert(): UseIonAlertResult {
-  const controller = useController<AlertOptions, HTMLIonAlertElement>(
+  const controller = useController<AlertOptions, HTMLIonAlertElement>('IonAlert', alertController);
-    'IonAlert',
+
-    alertController
+  const present = useCallback(
+    (messageOrOptions: string | (AlertOptions & HookOverlayOptions), buttons?: AlertButton[]) => {
+      if (typeof messageOrOptions === 'string') {
+        controller.present({
+          message: messageOrOptions,
+          buttons: buttons ?? [{ text: 'Ok' }],
+        });
+      } else {
+        controller.present(messageOrOptions);
+      }
+    },
+    [controller.present]
   );
 
-  function present(message: string, buttons?: AlertButton[]): void;
+  return [present, controller.dismiss];
-  function present(options: AlertOptions & HookOverlayOptions): void;
-  function present(messageOrOptions: string | AlertOptions & HookOverlayOptions, buttons?: AlertButton[]) {
-    if (typeof messageOrOptions === 'string') {
-      controller.present({
-        message: messageOrOptions,
-        buttons: buttons ?? [{ text: 'Ok' }]
-      });
-    } else {
-      controller.present(messageOrOptions);
-    }
-  };
-
-  return [
-    present,
-    controller.dismiss
-  ];
 }
 
 export type UseIonAlertResult = [

packages/react/src/hooks/useIonLoading.tsx

@@ -1,4 +1,5 @@
 import { LoadingOptions, SpinnerTypes, loadingController } from '@ionic/core';
+import { useCallback } from 'react';
 
 import { HookOverlayOptions } from './HookOverlayOptions';
 import { useController } from './useController';
@@ -13,27 +14,24 @@ export function useIonLoading(): UseIonLoadingResult {
     loadingController
   );
 
-  function present(
+  const present = useCallback(
-    message?: string,
+    (
-    duration?: number,
+      messageOrOptions: string | (LoadingOptions & HookOverlayOptions) = '',
-    spinner?: SpinnerTypes
+      duration?: number,
-  ): void;
+      spinner?: SpinnerTypes
-  function present(options: LoadingOptions & HookOverlayOptions): void;
+    ) => {
-  function present(
+      if (typeof messageOrOptions === 'string') {
-    messageOrOptions: string | (LoadingOptions & HookOverlayOptions) = '',
+        controller.present({
-    duration?: number,
+          message: messageOrOptions,
-    spinner?: SpinnerTypes
+          duration,
-  ) {
+          spinner: spinner ?? 'lines',
-    if (typeof messageOrOptions === 'string') {
+        });
-      controller.present({
+      } else {
-        message: messageOrOptions,
+        controller.present(messageOrOptions);
-        duration,
+      }
-        spinner: spinner ?? 'lines',
+    },
-      });
+    [controller.present]
-    } else {
+  );
-      controller.present(messageOrOptions);
-    }
-  }
 
   return [present, controller.dismiss];
 }

packages/react/src/hooks/useIonModal.ts

@@ -1,4 +1,5 @@
 import { ModalOptions, modalController } from '@ionic/core';
+import { useCallback } from 'react';
 
 import { HookOverlayOptions } from './HookOverlayOptions';
 import { ReactComponentOrElement, useOverlay } from './useOverlay';
@@ -9,7 +10,10 @@ import { ReactComponentOrElement, useOverlay } from './useOverlay';
  * @param componentProps The props that will be passed to the component, if required
  * @returns Returns the present and dismiss methods in an array
  */
-export function useIonModal(component: ReactComponentOrElement, componentProps?: any): UseIonModalResult {
+export function useIonModal(
+  component: ReactComponentOrElement,
+  componentProps?: any
+): UseIonModalResult {
   const controller = useOverlay<ModalOptions, HTMLIonModalElement>(
     'IonModal',
     modalController,
@@ -17,14 +21,14 @@ export function useIonModal(component: ReactComponentOrElement, componentProps?:
     componentProps
   );
 
-  function present(options: Omit<ModalOptions, 'component' | 'componentProps'> & HookOverlayOptions = {}) {
+  const present = useCallback(
-    controller.present(options as any);
+    (options: Omit<ModalOptions, 'component' | 'componentProps'> & HookOverlayOptions = {}) => {
-  };
+      controller.present(options as any);
+    },
+    [controller.present]
+  );
 
-  return [
+  return [present, controller.dismiss];
-    present,
-    controller.dismiss
-  ];
 }
 
 export type UseIonModalResult = [

packages/react/src/hooks/useIonPicker.tsx

@@ -1,9 +1,5 @@
-import {
+import { PickerButton, PickerColumn, PickerOptions, pickerController } from '@ionic/core';
-  PickerButton,
+import { useCallback } from 'react';
-  PickerColumn,
-  PickerOptions,
-  pickerController,
-} from '@ionic/core';
 
 import { HookOverlayOptions } from './HookOverlayOptions';
 import { useController } from './useController';
@@ -18,12 +14,10 @@ export function useIonPicker(): UseIonPickerResult {
     pickerController
   );
 
-  function present(columns: PickerColumn[], buttons?: PickerButton[]): void;
+  const present = useCallback((
-  function present(options: PickerOptions & HookOverlayOptions): void;
-  function present(
     columnsOrOptions: PickerColumn[] | (PickerOptions & HookOverlayOptions),
     buttons?: PickerButton[]
-  ) {
+  ) => {
     if (Array.isArray(columnsOrOptions)) {
       controller.present({
         columns: columnsOrOptions,
@@ -32,7 +26,7 @@ export function useIonPicker(): UseIonPickerResult {
     } else {
       controller.present(columnsOrOptions);
     }
-  }
+  }, [controller.present]);
 
   return [present, controller.dismiss];
 }

packages/react/src/hooks/useIonPopover.ts

@@ -1,4 +1,5 @@
 import { PopoverOptions, popoverController } from '@ionic/core';
+import { useCallback } from 'react';
 
 import { HookOverlayOptions } from './HookOverlayOptions';
 import { ReactComponentOrElement, useOverlay } from './useOverlay';
@@ -17,9 +18,9 @@ export function useIonPopover(component: ReactComponentOrElement, componentProps
     componentProps
   );
 
-  function present(options: Omit<PopoverOptions, 'component' | 'componentProps'> & HookOverlayOptions = {}) {
+  const present = useCallback((options: Omit<PopoverOptions, 'component' | 'componentProps'> & HookOverlayOptions = {}) => {
     controller.present(options as any);
-  };
+  }, [controller.present]);
 
   return [
     present,

packages/react/src/hooks/useIonToast.ts

@@ -1,4 +1,5 @@
 import { ToastOptions, toastController } from '@ionic/core';
+import { useCallback } from 'react';
 
 import { HookOverlayOptions } from './HookOverlayOptions';
 import { useController } from './useController';
@@ -13,9 +14,7 @@ export function useIonToast(): UseIonToastResult {
     toastController
   );
 
-  function present(message: string, duration?: number): void;
+  const present = useCallback((messageOrOptions: string | ToastOptions & HookOverlayOptions, duration?: number) => {
-  function present(options: ToastOptions & HookOverlayOptions): void;
-  function present(messageOrOptions: string | ToastOptions & HookOverlayOptions, duration?: number) {
     if (typeof messageOrOptions === 'string') {
       controller.present({
         message: messageOrOptions,
@@ -24,7 +23,7 @@ export function useIonToast(): UseIonToastResult {
     } else {
       controller.present(messageOrOptions);
     }
-  };
+  }, [controller.present]);
 
   return [
     present,

packages/react/src/hooks/useOverlay.ts

@@ -1,5 +1,5 @@
 import { OverlayEventDetail } from '@ionic/core';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 import { attachProps } from '../components/utils';
@@ -52,7 +52,7 @@ export function useOverlay<
     }
   }, [component, containerElRef.current, isOpen, componentProps]);
 
-  const present = async (options: OptionsType & HookOverlayOptions) => {
+  const present = useCallback(async (options: OptionsType & HookOverlayOptions) => {
     if (overlayRef.current) {
       return;
     }
@@ -96,13 +96,13 @@ export function useOverlay<
       containerElRef.current = undefined;
       setIsOpen(false);
     }
-  };
+  }, []);
 
-  const dismiss = async () => {
+  const dismiss = useCallback(async () => {
     overlayRef.current && await overlayRef.current.dismiss();
     overlayRef.current = undefined;
     containerElRef.current = undefined;
-  };
+  }, []);
 
   return {
     present,