chore: improve React import reference consistency (#18608)

superset-frontend/plugins/plugin-chart-table/src/DataTable/components/Pagination.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, forwardRef } from 'react';
 
 export interface PaginationProps {
   pageCount: number; // number of pages
@@ -72,7 +72,7 @@ export function generatePageItems(
 }
 
 export default React.memo(
-  React.forwardRef(function Pagination(
+  forwardRef(function Pagination(
     {
       style,
       pageCount,

superset-frontend/spec/__mocks__/svgrMock.tsx

@@ -17,9 +17,9 @@
  * under the License.
  */
 
-import React, { SVGProps } from 'react';
+import React, { SVGProps, forwardRef } from 'react';
 
-const SvgrMock = React.forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
+const SvgrMock = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
   (props, ref) => <svg ref={ref} {...props} />,
 );
 

superset-frontend/src/SqlLab/components/TableElement/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import Collapse from 'src/components/Collapse';
 import Card from 'src/components/Card';
 import ButtonGroup from 'src/components/ButtonGroup';
@@ -77,7 +77,7 @@ const Fade = styled.div`
 const TableElement = ({ table, actions, ...props }: TableElementProps) => {
   const [sortColumns, setSortColumns] = useState(false);
   const [hovered, setHovered] = useState(false);
-  const tableNameRef = React.useRef<HTMLInputElement>(null);
+  const tableNameRef = useRef<HTMLInputElement>(null);
 
   const setHover = (hovered: boolean) => {
     debounce(() => setHovered(hovered), 100)();

superset-frontend/src/components/AsyncAceEditor/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { forwardRef } from 'react';
 import {
   Editor as OrigEditor,
   IEditSession,
@@ -112,7 +112,7 @@ export default function AsyncAceEditor(
       defaultTheme ||
       aceModules.find(x => x.startsWith('theme/'))?.replace('theme/', '');
 
-    return React.forwardRef<AceEditor, AsyncAceEditorProps>(
+    return forwardRef<AceEditor, AsyncAceEditorProps>(
       function ExtendedAceEditor(
         {
           keywords,

superset-frontend/src/components/AsyncEsmComponent/index.tsx

@@ -16,7 +16,13 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { CSSProperties, useEffect, useState, RefObject } from 'react';
+import React, {
+  CSSProperties,
+  useEffect,
+  useState,
+  RefObject,
+  forwardRef,
+} from 'react';
 import Loading from '../Loading';
 
 export type PlaceholderProps = {
@@ -96,33 +102,31 @@ export default function AsyncEsmComponent<
     preload?: typeof waitForPromise;
   };
 
-  const AsyncComponent: AsyncComponent = React.forwardRef(
-    function AsyncComponent(
-      props: FullProps,
-      ref: RefObject<React.ComponentType<FullProps>>,
-    ) {
-      const [loaded, setLoaded] = useState(component !== undefined);
-      useEffect(() => {
-        let isMounted = true;
-        if (!loaded) {
-          // update state to trigger a re-render
-          waitForPromise().then(() => {
-            if (isMounted) {
-              setLoaded(true);
-            }
-          });
-        }
-        return () => {
-          isMounted = false;
-        };
-      });
-      const Component = component || placeholder;
-      return Component ? (
-        // placeholder does not get the ref
-        <Component ref={Component === component ? ref : null} {...props} />
-      ) : null;
-    },
-  );
+  const AsyncComponent: AsyncComponent = forwardRef(function AsyncComponent(
+    props: FullProps,
+    ref: RefObject<React.ComponentType<FullProps>>,
+  ) {
+    const [loaded, setLoaded] = useState(component !== undefined);
+    useEffect(() => {
+      let isMounted = true;
+      if (!loaded) {
+        // update state to trigger a re-render
+        waitForPromise().then(() => {
+          if (isMounted) {
+            setLoaded(true);
+          }
+        });
+      }
+      return () => {
+        isMounted = false;
+      };
+    });
+    const Component = component || placeholder;
+    return Component ? (
+      // placeholder does not get the ref
+      <Component ref={Component === component ? ref : null} {...props} />
+    ) : null;
+  });
   // preload the async component before rendering
   AsyncComponent.preload = waitForPromise;
 

superset-frontend/src/components/IndeterminateCheckbox/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { forwardRef, useRef, useEffect } from 'react';
 import { styled } from '@superset-ui/core';
 import Icons from 'src/components/Icons';
 
@@ -67,7 +67,7 @@ const InputContainer = styled.div`
   position: relative;
 `;
 
-const IndeterminateCheckbox = React.forwardRef(
+const IndeterminateCheckbox = forwardRef(
   (
     {
       indeterminate,
@@ -79,10 +79,10 @@ const IndeterminateCheckbox = React.forwardRef(
     }: IndeterminateCheckboxProps,
     ref: React.MutableRefObject<any>,
   ) => {
-    const defaultRef = React.useRef<HTMLInputElement>();
+    const defaultRef = useRef<HTMLInputElement>();
     const resolvedRef = ref || defaultRef;
 
-    React.useEffect(() => {
+    useEffect(() => {
       resolvedRef.current.indeterminate = indeterminate;
     }, [resolvedRef, indeterminate]);
 

superset-frontend/src/components/ListViewCard/ImageLoader.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { styled, logging } from '@superset-ui/core';
 
 export type BackgroundPosition = 'top' | 'bottom';
@@ -52,7 +52,7 @@ export default function ImageLoader({
   position,
   ...rest
 }: ImageLoaderProps) {
-  const [imgSrc, setImgSrc] = React.useState<string>(fallback);
+  const [imgSrc, setImgSrc] = useState<string>(fallback);
 
   useEffect(() => {
     if (src) {

superset-frontend/src/components/RefreshLabel/index.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { MouseEventHandler } from 'react';
+import React, { MouseEventHandler, forwardRef } from 'react';
 import { SupersetTheme } from '@superset-ui/core';
 import { Tooltip } from 'src/components/Tooltip';
 import Icons, { IconType } from 'src/components/Icons';
@@ -28,7 +28,7 @@ export interface RefreshLabelProps {
 
 const RefreshLabel = ({ onClick, tooltipContent }: RefreshLabelProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const IconWithoutRef = React.forwardRef((props: IconType, ref: any) => (
+  const IconWithoutRef = forwardRef((props: IconType, ref: any) => (
     <Icons.Refresh {...props} />
   ));
 

superset-frontend/src/components/Select/WindowedSelect/windowed.tsx

@@ -16,7 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { ComponentType, FunctionComponent, ReactElement } from 'react';
+import React, {
+  ComponentType,
+  FunctionComponent,
+  ReactElement,
+  forwardRef,
+} from 'react';
 import Select, {
   Props as SelectProps,
   OptionTypeBase,
@@ -71,5 +76,5 @@ export default function windowed<OptionType extends OptionTypeBase>(
     const components = { ...components_, MenuList };
     return <SelectComponent components={components} ref={ref} {...restProps} />;
   }
-  return React.forwardRef(WindowedSelect);
+  return forwardRef(WindowedSelect);
 }

superset-frontend/temporary_superset_ui/superset-ui/test/__mocks__/svgrMock.tsx

@@ -17,9 +17,9 @@
  * under the License.
  */
 
-import React, { SVGProps } from 'react';
+import React, { SVGProps, forwardRef } from 'react';
 
-const SvgrMock = React.forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
+const SvgrMock = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
   (props, ref) => <svg ref={ref} {...props} />,
 );