bug: IonContent's ref turns to null as soon as the component it is inside of rerenders

Bug Report

Ionic version:

[ ] 4.x [x] 5.6.5

Current behavior:

If you have a React component that has an IonContent element in it and use the ref property to get access to the functions on the IonContent, the current value of that ref will change from a proper value to null as soon as anything causes the wrapping component to rerender.

Expected behavior:

The current value of the ref in the IonContent should always return the content object.

Steps to reproduce:

See example app here. The relevant code is in here. This is the basic tabs starter app. I’m rendering an IonContent inside the first tab and then set a timer that changes some state in the component. It’s constantly printing out the value of the ref, and you can see that as soon as the state is changed the ref turns to null.

This behavior began with version 5.6.5 and continues in 5.6.6 of the react project.

Related code:

https://github.com/withgrayce/ionic-ref-bug

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.14.1 (/Users/aubrey/.nvm/versions/node/v15.13.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.6.6

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res (update available: 0.15.3) : 0.15.1
   native-run (update available: 1.3.0)   : 1.0.0

System:

   NodeJS : v15.13.0 (/Users/aubrey/.nvm/versions/node/v15.13.0/bin/node)
   npm    : 7.7.6
   OS     : macOS Big Sur

[aub]

@TuckerWhitehouse Yes, that fixes it.

[ionitron-bot[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.