Update code base to work in react 16 and 18 (#1628)

virajsanghvi · web-flow · commit 0aa3ea4fa32a · 2025-08-06T21:48:12.000-07:00
Signed-off-by: Viraj Sanghvi &lt;vsanghvi@gmail.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@
 ### 📝 Documentation
 
 ### 🛠 Maintenance
+- Update code base to work in react 16 and 18 ([#1628](https://github.com/opensearch-project/oui/pull/1628))
 
 ### 🪛 Refactoring
 
diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
   "dependencies": {
     "@types/chroma-js": "^2.4.0",
     "@types/react-beautiful-dnd": "^13.1.3",
-    "@types/react-input-autosize": "^2.2.1",
+    "@types/react-input-autosize": "^2.2.4",
     "@types/react-window": "^1.8.5",
     "chroma-js": "^2.4.2",
     "classnames": "^2.3.2",
@@ -107,7 +107,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-dropzone": "^14.2.3",
     "react-focus-on": "^3.5.0",
-    "react-input-autosize": "^3.0.0",
+    "react-input-autosize": "npm:react-18-input-autosize@^3.0.0",
     "react-is": "~16.3.0",
     "react-virtualized-auto-sizer": "1.0.7",
     "react-window": "^1.8.9",
diff --git a/src-docs/src/index.js b/src-docs/src/index.js
@@ -10,8 +10,8 @@
  */
 
 import React, { createElement } from 'react';
-import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
+import { render } from '../../src/services/react_dom';
 import { Router, Switch, Route, Redirect } from 'react-router';
 
 import configureStore, { history } from './store/configure_store';
@@ -59,7 +59,7 @@ const routes = [
   ...childRoutes,
 ];
 
-ReactDOM.render(
+render(
   <Provider store={store}>
     <ThemeProvider>
       <Router history={history}>
diff --git a/src-docs/src/services/string/render_to_html.js b/src-docs/src/services/string/render_to_html.js
@@ -10,9 +10,8 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
-
 import html from 'html';
+import { render } from '../../../../src/services/react_dom';
 
 const renderTarget = document.createElement('div');
 export function renderToHtml(ComponentReference, props = {}) {
@@ -25,10 +24,10 @@ export function renderToHtml(ComponentReference, props = {}) {
 
     return {
       render() {
-        ReactDOM.render(element, renderTarget);
+        const root = render(element, renderTarget);
         const htmlString = renderTarget.innerHTML;
         const result = htmlString;
-        ReactDOM.unmountComponentAtNode(renderTarget);
+        root.unmount();
 
         return html.prettyPrint(result, {
           indent_size: 2,
diff --git a/src-docs/src/views/popover/popover_htmlelement_anchor.js b/src-docs/src/views/popover/popover_htmlelement_anchor.js
@@ -12,7 +12,7 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState, useEffect } from 'react';
 
-import { render, unmountComponentAtNode } from 'react-dom';
+import { render } from '../../../../src/services/react_dom';
 
 import { OuiWrappingPopover } from '../../../../src/components';
 
@@ -47,9 +47,11 @@ export default () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
 
-    render(<PopoverApp anchor={thisAnchor} />, container);
+    const root = render(<PopoverApp anchor={thisAnchor} />, container);
 
-    return () => unmountComponentAtNode(container);
+    return () => {
+      root.unmount();
+    };
   }, []);
 
   return (
diff --git a/src/components/code/code_block.test.tsx b/src/components/code/code_block.test.tsx
@@ -29,10 +29,9 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import ReactDOM from 'react-dom';
 import { mount, render } from 'enzyme';
 import html from 'html';
-import { act } from 'react-dom/test-utils';
+import { renderTestElement, act } from '../../test/react_test_utils';
 import { requiredProps } from '../../test/required_props';
 
 import { OuiCodeBlock } from './code_block';
@@ -118,18 +117,19 @@ describe('OuiCodeBlock', () => {
     it('updates DOM when input changes', (done) => {
       expect.assertions(2);
 
+      const { container } = renderTestElement(<App />, {
+        attachToDocument: false,
+      });
+
       function takeSnapshot() {
         expect(
-          html.prettyPrint(appDiv.innerHTML, {
+          html.prettyPrint(container.innerHTML, {
             indent_size: 2,
             unformatted: [], // Expand all tags, including spans
           })
         ).toMatchSnapshot();
       }
 
-      // enzyme does not recreate enough of the React<->DOM interaction to reproduce this bug
-      const appDiv = document.createElement('div');
-
       function App() {
         const [value, setValue] = useState('State 1');
 
@@ -158,8 +158,6 @@ describe('OuiCodeBlock', () => {
           </div>
         );
       }
-
-      ReactDOM.render(<App />, appDiv);
     });
 
     it('displays content in fullscreen mode', () => {
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
@@ -39,7 +39,7 @@ import {
 import { OuiDataGridColumnResizer } from './data_grid_column_resizer';
 import { OuiDataGridRowHeightOption } from './data_grid_types';
 import { keys } from '../../services';
-import { act } from 'react-dom/test-utils';
+import { act } from '../../test/react_test_utils';
 
 jest.mock('./row_height_utils', () => {
   return {
diff --git a/src/components/drag_and_drop/draggable.test.tsx b/src/components/drag_and_drop/draggable.test.tsx
@@ -29,8 +29,8 @@
  */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { resetServerContext } from 'react-beautiful-dnd';
+import { renderTestElement } from '../../test/react_test_utils';
 import html from 'html';
 import { requiredProps } from '../../test/required_props';
 import { OuiDragDropContext, OuiDraggable, OuiDroppable } from './';
@@ -45,50 +45,41 @@ function takeSnapshot(element: HTMLElement) {
 }
 
 describe('OuiDraggable', () => {
-  let appDiv: HTMLElement;
-
   beforeEach(() => {
     resetServerContext(); // resets react-beautiful-dnd's internal instance counter which affects snapshots
-    appDiv = document.createElement('div');
-    document.body.appendChild(appDiv);
-  });
-
-  afterEach(() => {
-    ReactDOM.unmountComponentAtNode(appDiv);
-    document.body.removeChild(appDiv);
   });
 
   test('is rendered', () => {
     const handler = jest.fn();
 
-    ReactDOM.render(
+    const { container, cleanup } = renderTestElement(
       <OuiDragDropContext onDragEnd={handler} {...requiredProps}>
         <OuiDroppable droppableId="testDroppable">
           <OuiDraggable draggableId="testDraggable" index={0}>
             {() => <div>Hello</div>}
           </OuiDraggable>
         </OuiDroppable>
-      </OuiDragDropContext>,
-      appDiv
+      </OuiDragDropContext>
     );
 
-    expect(takeSnapshot(appDiv)).toMatchSnapshot();
+    expect(takeSnapshot(container)).toMatchSnapshot();
+    cleanup();
   });
 
   test('can be given ReactElement children', () => {
     const handler = jest.fn();
 
-    ReactDOM.render(
+    const { container, cleanup } = renderTestElement(
       <OuiDragDropContext onDragEnd={handler} {...requiredProps}>
         <OuiDroppable droppableId="testDroppable">
           <OuiDraggable draggableId="testDraggable" index={0}>
             <div>Hello</div>
           </OuiDraggable>
         </OuiDroppable>
-      </OuiDragDropContext>,
-      appDiv
+      </OuiDragDropContext>
     );
 
-    expect(takeSnapshot(appDiv)).toMatchSnapshot();
+    expect(takeSnapshot(container)).toMatchSnapshot();
+    cleanup();
   });
 });
diff --git a/src/components/image/image.test.tsx b/src/components/image/image.test.tsx
@@ -31,7 +31,7 @@
 import React from 'react';
 import { render, mount, ReactWrapper } from 'enzyme';
 import { requiredProps, findTestSubject } from '../../test';
-import { act } from 'react-dom/test-utils';
+import { act } from '../../test/react_test_utils';
 import { keys } from '../../services';
 
 import { OuiImage } from './image';
diff --git a/src/components/inner_text/inner_text.test.tsx b/src/components/inner_text/inner_text.test.tsx
@@ -29,8 +29,8 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { act } from 'react-dom/test-utils';
 import { render, mount } from 'enzyme';
+import { act } from '../../test/react_test_utils';
 import { findTestSubject, requiredProps } from '../../test';
 
 import { useInnerText, OuiInnerText } from './inner_text';
diff --git a/src/components/inner_text/render_to_text.tsx b/src/components/inner_text/render_to_text.tsx
@@ -29,20 +29,13 @@
  */
 
 import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { render } from '../../services/react_dom';
 import { useInnerText } from './inner_text';
 
 export function useRenderToText(node: ReactNode, placeholder = ''): string {
   const [ref, text] = useInnerText(placeholder);
   const hostNode = useRef<Element | null>(null);
 
-  const onUnmount = () => {
-    if (hostNode.current) {
-      unmountComponentAtNode(hostNode.current);
-      hostNode.current = null;
-    }
-  };
-
   const setRef = useCallback(
     (node: Element | null) => {
       if (hostNode.current) {
@@ -54,9 +47,10 @@ export function useRenderToText(node: ReactNode, placeholder = ''): string {
 
   useEffect(() => {
     hostNode.current = (document.createDocumentFragment() as unknown) as Element;
-    render(<div ref={setRef}>{node}</div>, hostNode.current);
+    const root = render(<div ref={setRef}>{node}</div>, hostNode.current);
     return () => {
-      onUnmount();
+      root.unmount();
+      hostNode.current = null;
     };
   }, [node, setRef]);
 
diff --git a/src/components/observer/resize_observer/resize_observer.test.tsx b/src/components/observer/resize_observer/resize_observer.test.tsx
@@ -32,7 +32,7 @@ import React, { FunctionComponent, useState } from 'react';
 import { mount } from 'enzyme';
 import { OuiResizeObserver, useResizeObserver } from './resize_observer';
 import { sleep } from '../../../test';
-import { act } from 'react-dom/test-utils';
+import { act } from '../../../test/react_test_utils';
 
 export async function waitforResizeObserver(period = 30) {
   // `period` defaults to 30 because its the delay used by the ResizeObserver polyfill
diff --git a/src/components/split_button/split_button.test.tsx b/src/components/split_button/split_button.test.tsx
@@ -10,7 +10,7 @@ import { ReactWrapper, mount, render } from 'enzyme';
 import { requiredProps } from '../../test';
 import { keys } from '../../services';
 import { OuiSplitButton, OuiSplitButtonOption } from './split_button';
-import { act } from 'react-dom/test-utils';
+import { act } from '../../test/react_test_utils';
 
 jest.mock('../portal', () => ({
   OuiPortal: ({ children }: any) => children,
@@ -35,7 +35,7 @@ const waitFor = (
 ) =>
   act(
     () =>
-      new Promise((resolve, reject) => {
+      new Promise<void>((resolve, reject) => {
         const startTime = Date.now();
 
         const nextInterval = () => {
diff --git a/src/services/react-dom-client.test.tsx b/src/services/react-dom-client.test.tsx
@@ -0,0 +1,52 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+import { createRoot } from './react-dom-client';
+
+// Mock ReactDOM methods
+jest.mock('react-dom', () => ({
+  render: jest.fn(),
+  unmountComponentAtNode: jest.fn(),
+}));
+
+describe('react-dom-client', () => {
+  let container: HTMLDivElement;
+  let element: React.ReactElement;
+
+  beforeEach(() => {
+    // Reset mocks
+    jest.clearAllMocks();
+
+    // Set up test elements
+    container = document.createElement('div');
+    element = <div>Test Element</div>;
+  });
+
+  describe('createRoot', () => {
+    it('returns an object with render and unmount methods', () => {
+      const root = createRoot(container);
+
+      expect(root).toBeDefined();
+      expect(typeof root.render).toBe('function');
+      expect(typeof root.unmount).toBe('function');
+    });
+
+    it('calls ReactDOM.render when root.render is called', () => {
+      const root = createRoot(container);
+      root.render(element);
+
+      expect(ReactDOM.render).toHaveBeenCalledWith(element, container);
+    });
+
+    it('calls ReactDOM.unmountComponentAtNode when root.unmount is called', () => {
+      const root = createRoot(container);
+      root.unmount();
+
+      expect(ReactDOM.unmountComponentAtNode).toHaveBeenCalledWith(container);
+    });
+  });
+});
diff --git a/src/services/react-dom-client.ts b/src/services/react-dom-client.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import * as ReactDOM from 'react-dom';
+
+/**
+ * Root interface for React 16 compatibility with React 18's createRoot API
+ */
+export interface Root {
+  render(element: React.ReactElement): void;
+  unmount(): void;
+}
+
+/**
+ * Shim for React 18's createRoot API
+ * This provides a compatible API for React 16 using ReactDOM.render
+ *
+ * @param container The DOM element to render into
+ * @returns A root object with render and unmount methods
+ */
+export function createRoot(container: Element): Root {
+  return {
+    render(element: React.ReactElement) {
+      ReactDOM.render(element, container);
+    },
+    unmount() {
+      ReactDOM.unmountComponentAtNode(container);
+    },
+  };
+}
diff --git a/src/services/react_dom.test.tsx b/src/services/react_dom.test.tsx
diff --git a/src/services/react_dom.ts b/src/services/react_dom.ts
diff --git a/src/test/react_test_utils.tsx b/src/test/react_test_utils.tsx
diff --git a/yarn.lock b/yarn.lock
