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,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,