bug: Lifecycle run twice in react

[321638914]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

Lifecycle run twice in react. It seems have multiple event listeners on a same lifecycle event. useEffect also run twice too.

Expected Behavior

Lifecycle should run once.

Steps to Reproduce

1. Create a react blank starter project from vscode ionic extension.
2. Add lifecycle methods in pages/Home.tsx.

Code Reproduction URL

https://stackblitz.com/github/321638914/ionic-react-lifecycle-test?file=src/pages/Home.tsx

Ionic Info

Ionic:

Ionic CLI : 7.0.1 (D:.pnpm-store\v3\tmp\dlx-17228\node_modules.pnpm\@ionic+cli@7.0.1\node_modules\@ionic\cli) Ionic Framework : @ionic/react 7.0.3

Capacitor:

Capacitor CLI : 4.7.3 @capacitor/android : not installed @capacitor/core : 4.7.3 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.7.2

System:

NodeJS : v16.20.0 (C:\Users\dell\AppData\Local\nvs\default\node.exe) npm : 9.6.3 OS : Windows 10

Additional Information

Vue blank starter project don't have this issue.

[sean-perkins]

This is the by product of running the React application in dev mode with strict mode enabled. This occurs in all React apps starting in React v18.

Example with strict mode removed: https://stackblitz.com/edit/github-hncej5

Here is a blog that discusses it in more detail: https://blog.bitsrc.io/react-v18-0-useeffect-bug-why-do-effects-run-twice-39babecede93

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