fix(react): eliminate use of deprecated findDOMNode, resolves #20972

packages/react/src/components/__tests__/createComponent.spec.tsx

@@ -49,6 +49,21 @@ describe('createComponent - ref', () => {
   });
 });
 
+describe('createComponent - strict mode', () => {
+  beforeEach(() => (console.error = (...data: any[]) => {
+    throw new Error(...data);
+  }));
+
+  test('should work without errors in strict mode', () => {
+    const renderResult = render(
+      <React.StrictMode>
+        <IonButton>Strict Mode Rocks</IonButton>
+      </React.StrictMode>
+    );
+    expect(renderResult.getByText(/Rocks/)).toBeTruthy();
+  });
+});
+
 describe('when working with css classes', () => {
   const myClass = 'my-class'
   const myClass2 = 'my-class2'

packages/react/src/components/createComponent.tsx

@@ -1,6 +1,5 @@
 import { AnimationBuilder } from '@ionic/core';
 import React from 'react';
-import ReactDom from 'react-dom';
 
 import { NavContext } from '../contexts/NavContext';
 import { RouterOptions } from '../models';
@@ -25,9 +24,13 @@ export const createReactComponent = <PropType, ElementType>(
   const displayName = dashToPascalCase(tagName);
   const ReactComponent = class extends React.Component<IonicReactInternalProps<PropType>> {
     context!: React.ContextType<typeof NavContext>;
+    ref: React.RefObject<HTMLElement>;
 
     constructor(props: IonicReactInternalProps<PropType>) {
       super(props);
+      // If we weren't given a ref to forward, we still need one
+      // in order to attach props to the wrapped element.
+      this.ref = React.createRef();
     }
 
     componentDidMount() {
@@ -35,7 +38,9 @@ export const createReactComponent = <PropType, ElementType>(
     }
 
     componentDidUpdate(prevProps: IonicReactInternalProps<PropType>) {
-      const node = ReactDom.findDOMNode(this) as HTMLElement;
+      // Try to use the forwarded ref to get the child node.
+      // Otherwise, use the one we created.
+      const node = (this.props.forwardedRef || this.ref.current!) as HTMLElement;
       attachProps(node, this.props, prevProps);
     }
 
@@ -64,7 +69,7 @@ export const createReactComponent = <PropType, ElementType>(
 
       const newProps: IonicReactInternalProps<PropType> = {
         ...propsToPass,
-        ref: forwardedRef,
+        ref: forwardedRef || this.ref,
         style
       };
 

packages/react/test/test-app/src/index.tsx

@@ -4,7 +4,12 @@ import App from './App';
 import './index.css';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.