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

resolves #23741

Co-authored-by: Fabrice <fabrice@weinberg.me>
This commit is contained in:
Ely Lucas
2021-10-05 06:44:40 -06:00
committed by GitHub
parent f112ad4490
commit 2c97712601
11 changed files with 276 additions and 146 deletions

View File

@ -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 = {}) {
controller.present(options as any);
};
const present = useCallback(
(options: Omit<ModalOptions, 'component' | 'componentProps'> & HookOverlayOptions = {}) => {
controller.present(options as any);
},
[controller.present]
);
return [
present,
controller.dismiss
];
return [present, controller.dismiss];
}
export type UseIonModalResult = [