fix(react): cleanup functions are execute for lifecycle hooks

[sean-perkins]

Issue number: Resolves #28186

---

What is the current behavior?

Ionic lifecycle hooks do not execute a cleanup function when the underlying useEffect is unmounted.

useEffect(() => {
  return () => {
     console.log('cleanup'); // called
   };
});

useIonViewWillEnter(() => {
  return () => {
     console.log('cleanup'); // never called
  };
});

Ionic's implementation registers the lifecycle callback to be handled at a later time, by the page managers. However, it does not keep a reference to the returned callback, so it cannot execute it when the useEffect is unmounted.

What is the new behavior?

• Ionic lifecycle hooks execute dev-specified cleanup functions

Does this introduce a breaking change?

• Yes
• No

Other information

Dev-build: 7.4.4-dev.11696956070.1faa3cfe

This PR builds on the changes in #28316.

[thetaPC]

Wouldn't it be better to create the variable, destructor inside the if statement? That way there isn't an unused variable if cb.id doesn't exist.

[sean-perkins]

Following up on why I did this - took me a second to recall.

The callback may not have an id, but we still want to invoke the callback regardless. Otherwise the developers implementation within the lifecycle hook will never fire.

We only want to store the destructor callback if the callback has an id - which is assigned from the lifecycle hooks.

This was intentional.

[thetaPC]

LGTM