bug: deprecated findDOMNode usage with React.StrictMode

Bug Report

Ionic version: [x] 4.x “@ionic/react”: “^5.0.7”

Current behavior:

I am trying to install Ionic React to a fresh create-react-app but hit the error

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of IonComponent which is inside StrictMode quite a lot. I notice that if I create the app with ionic start, it won’t notice because the <App /> component is not wrapped inside React.StrictMode. Does that mean that you guys don’t support StrictMode right now, what is the plan for Ion components to work with StrictMode?

Expected behavior:

Avoid using findDOMNode to refer to an element, hence not getting this error on React Strict mode

Steps to reproduce:

1. Create a React app with create-react-app
2. Make sure <App /> component is wrapped inside React.StrictMode
3. Create a component with IonReactRouter

import React, { FC } from 'react';
import { IonApp, IonRouterOutlet } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { Redirect, Route } from 'react-router-dom';
import { Home } from './pages/home';
import { About } from './pages/about';
import { Error } from './pages/error';

export const Router: FC = ({ children }) => (
	<IonApp>
		<IonReactRouter>
			<IonRouterOutlet>
				<Route path="/" exact component={Home} />
				<Route path="/about" exact component={About} />
				<Route path="/404" exact component={Error} />
				<Route path="/contact" render={() => <Redirect to="/error" />} exact={true} />
			</IonRouterOutlet>
			{children}
		</IonReactRouter>
	</IonApp>
);

or

import React from 'react';
import { IonTabBar, IonIcon, IonLabel, IonTabButton } from '@ionic/react';
import { home, callOutline, informationCircleOutline } from 'ionicons/icons';

export const Tabbar = () => (
	<IonTabBar slot="bottom">
		<IonTabButton tab="home" href="/home">
			<IonIcon icon={home} />
			<IonLabel>Home</IonLabel>
		</IonTabButton>
		<IonTabButton tab="about" href="/about">
			<IonIcon icon={informationCircleOutline} />
			<IonLabel>About</IonLabel>
		</IonTabButton>
		<IonTabButton tab="contact" href="/contact">
			<IonIcon icon={callOutline} />
			<IonLabel>Contact</IonLabel>
		</IonTabButton>
	</IonTabBar>
);

1. Run yarn start
2. Check browser console

[elylucas]

Thanks all for your patience on this one, and thanks @GabrielMajeri for the pull request! The fix will be in the next release.

[GabrielMajeri]

The PR (https://github.com/ionic-team/ionic-framework/pull/21932) has been merged 🎉