bug: React overlay hooks (useIon*) are not fully memorised

[FWeinb]

Prequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Using the new overlay hooks feels great and is a nice improvement in my opinion. When using them I noticed that for useIon{Toast|Alert|Popover|...} the results aren't memorised and change each render. This will cause a great deal of overhead when the present/dismiss methods will be dependencies of other useEffects.

You can see a demo of this behaviour here

Expected Behavior

All the useIon* hooks should memorised the returned present/dismiss to match developers expectation.

Steps to Reproduce

1. Use any of the new overlay hooks e.g. useIonToast
2. Make it a dependency of React.useEffect(..., [presentToast])
3. See that this effect is reevaluated each time the component is rendered.

Code Reproduction URL

https://codesandbox.io/s/ionic-hooks-memorisation-5o4yc?file=/src/App.tsx

Ionic Info

No response

Additional Information

I tracked this issue down to useController. Adding some React.useCallback here

ionic-framework/packages/react/src/hooks/useController.ts

Line 38 in 7315e01

const present = async (options: OptionsType & HookOverlayOptions) => {

and here

ionic-framework/packages/react/src/hooks/useController.ts

Line 74 in 7315e01

const dismiss = async () => {

and a React.useMemo

ionic-framework/packages/react/src/hooks/useController.ts

Lines 79 to 82 in 7315e01

	return {
	present,
	dismiss,
	};

will ensure that the controller is memorised. Looking at the other useIon* hooks should be straight forward. Fixing useIonToast would need a React.useCallback here

ionic-framework/packages/react/src/hooks/useIonToast.ts

Line 18 in 7315e01

function present(messageOrOptions: string | ToastOptions & HookOverlayOptions, duration?: number) {

If you think this is something that should be implemented I can create a PR for these changes.

[willmartian]

Hey @FWeinb, thanks for the issue and the useful code reproduction!

I agree that this is unwanted behavior and I think your proposed solution is in the right direction. If you could create a PR for this, that would be very helpful. 😄

[FWeinb]

Closing this because I submitted a PR fixing this.

[liamdebeasi]

Thanks for the PR! I am going to keep this issue open until the PR gets merged.

[willmartian]

Thanks for the contribution on this issue @FWeinb! The fix for this issue has been merged and will be available in the next release of Ionic Framework.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.