[flow] Eliminate usage of more than 1-arg React.AbstractComponent in React codebase

.eslintrc.js

@@ -569,6 +569,7 @@ module.exports = {
     React$Node: 'readonly',
     React$Portal: 'readonly',
     React$Ref: 'readonly',
+    React$RefSetter: 'readonly',
     ReadableStreamController: 'readonly',
     ReadableStreamReader: 'readonly',
     RequestInfo: 'readonly',

packages/react-devtools-inline/src/frontend.js

@@ -52,7 +52,7 @@ export function initialize(
     bridge?: FrontendBridge,
     store?: Store,
   } = {},
-): React.AbstractComponent<Props, mixed> {
+): React.ComponentType<Props> {
   if (bridge == null) {
     bridge = createBridge(contentWindow);
   }

packages/react-devtools-shared/src/devtools/ContextMenu/types.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {Node as ReactNode, AbstractComponent, ElementRef} from 'react';
+import type {Node as ReactNode} from 'react';
 
 export type ContextMenuItem = {
   onClick: () => void,
@@ -25,5 +25,7 @@ export type ContextMenuHandle = {
   hide(): void,
 };
 
-export type ContextMenuComponent = AbstractComponent<{}, ContextMenuHandle>;
-export type ContextMenuRef = {current: ElementRef<ContextMenuComponent> | null};
+/*::
+export type ContextMenuComponent = component(ref: React$RefSetter<ContextMenuHandle>);
+*/
+export type ContextMenuRef = {current: ContextMenuHandle | null};

packages/react-devtools-shared/src/devtools/views/Components/Components.js

@@ -246,4 +246,4 @@ function setResizeCSSVariable(
   }
 }
 
-export default (portaledContent(Components): React$AbstractComponent<{}>);
+export default (portaledContent(Components): React$ComponentType<{}>);

packages/react-devtools-shared/src/devtools/views/portaledContent.js

@@ -17,8 +17,8 @@ import ThemeProvider from './ThemeProvider';
 export type Props = {portalContainer?: Element, ...};
 
 export default function portaledContent(
-  Component: React$AbstractComponent<any>,
-): React$AbstractComponent<any> {
+  Component: React$ComponentType<any>,
+): React$ComponentType<any> {
   return function PortaledContent({portalContainer, ...rest}: Props) {
     const store = useContext(StoreContext);
 

packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js

@@ -72,7 +72,7 @@ function useDeepHookF() {
 const ContextA = createContext('A');
 const ContextB = createContext('B');
 
-function FunctionWithHooks(props: any, ref: React$Ref<any>) {
+function FunctionWithHooks(props: any, ref: React$RefSetter<any>) {
   const [count, updateCount] = useState(0);
   // eslint-disable-next-line no-unused-vars
   const contextValueA = useContext(ContextA);
@@ -108,7 +108,9 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
 const MemoWithHooks = memo(FunctionWithHooks);
 const ForwardRefWithHooks = forwardRef(FunctionWithHooks);
 
-function wrapWithHoc(Component: (props: any, ref: React$Ref<any>) => any) {
+function wrapWithHoc(
+  Component: (props: any, ref: React$RefSetter<any>) => any,
+) {
   function Hoc() {
     return <Component />;
   }

packages/react-markup/src/ReactMarkupServer.js

@@ -46,7 +46,7 @@ import {
 type ReactMarkupNodeList =
   // This is the intersection of ReactNodeList and ReactClientValue minus
   // Client/ServerReferences.
-  | React$Element<React$AbstractComponent<any, any>>
+  | React$Element<React$ComponentType<any>>
   | LazyComponent<ReactMarkupNodeList, any>
   | React$Element<string>
   | string

packages/react-native-renderer/src/ReactNativeFiberHostComponent.js

@@ -7,9 +7,8 @@
  * @flow
  */
 
-import type {ElementRef} from 'react';
 import type {
-  HostComponent,
+  HostInstance,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
@@ -72,7 +71,7 @@ class ReactNativeFiberHostComponent implements INativeMethods {
   }
 
   measureLayout(
-    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
+    relativeToNativeNode: number | HostInstance,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void /* currently unused */,
   ) {

packages/react-native-renderer/src/ReactNativePublicCompat.js

@@ -32,7 +32,7 @@ import {
 
 export function findHostInstance_DEPRECATED<TElementType: ElementType>(
   componentOrHandle: ?(ElementRef<TElementType> | number),
-): ?ElementRef<HostComponent<mixed>> {
+): ?ElementRef<HostComponent<{...}>> {
   if (__DEV__) {
     const owner = currentOwner;
     if (owner !== null && isRendering && owner.stateNode !== null) {
@@ -225,7 +225,7 @@ export function getNodeFromInternalInstanceHandle(
 // Should have been PublicInstance from ReactFiberConfigFabric
 type FabricPublicInstance = mixed;
 // Should have been PublicInstance from ReactFiberConfigNative
-type PaperPublicInstance = HostComponent<mixed>;
+type PaperPublicInstance = HostComponent<empty>;
 
 // Remove this once Paper is no longer supported and DOM Node API are enabled by default in RN.
 export function isChildPublicInstance(

packages/react-native-renderer/src/ReactNativeTypes.js

@@ -9,12 +9,7 @@
  * @flow strict
  */
 
-import type {
-  ElementRef,
-  ElementType,
-  MixedElement,
-  AbstractComponent,
-} from 'react';
+import type {ElementRef, ElementType, MixedElement} from 'react';
 
 export type MeasureOnSuccessCallback = (
   x: number,
@@ -137,7 +132,9 @@ declare const ensureNativeMethodsAreSynced: NativeMethods;
 (ensureNativeMethodsAreSynced: INativeMethods);
 
 export type HostInstance = NativeMethods;
-export type HostComponent<Config> = AbstractComponent<Config, HostInstance>;
+/*::
+export type HostComponent<Config: {...}> = component(ref: React$RefSetter<HostInstance>, ...Config);
+*/
 
 type InspectorDataProps = $ReadOnly<{
   [propName: string]: string,
@@ -208,8 +205,10 @@ export type ReactNativeType = {
     componentOrHandle: ?(ElementRef<TElementType> | number),
   ): ?number,
   isChildPublicInstance(
-    parent: PublicInstance | HostComponent<mixed>,
-    child: PublicInstance | HostComponent<mixed>,
+    // eslint-disable-next-line no-undef
+    parent: PublicInstance | HostComponent<empty>,
+    // eslint-disable-next-line no-undef
+    child: PublicInstance | HostComponent<empty>,
   ): boolean,
   dispatchCommand(
     handle: HostInstance,

packages/react-reconciler/src/ReactTestSelectors.js

@@ -48,7 +48,7 @@ type Type = symbol | number;
 
 type ComponentSelector = {
   $$typeof: Type,
-  value: React$AbstractComponent<empty, mixed>,
+  value: React$ComponentType<empty>,
 };
 
 type HasPseudoClassSelector = {
@@ -79,7 +79,7 @@ type Selector =
   | TestNameSelector;
 
 export function createComponentSelector(
-  component: React$AbstractComponent<empty, mixed>,
+  component: React$ComponentType<empty>,
 ): ComponentSelector {
   return {
     $$typeof: COMPONENT_TYPE,

packages/react-server/src/ReactFlightServer.js

@@ -297,7 +297,7 @@ type ReactJSONValue =
 // Serializable values
 export type ReactClientValue =
   // Server Elements and Lazy Components are unwrapped on the Server
-  | React$Element<React$AbstractComponent<any, any>>
+  | React$Element<React$ComponentType<any>>
   | LazyComponent<ReactClientValue, any>
   // References are passed by their value
   | ClientReference<any>

packages/react/index.development.js

@@ -9,14 +9,10 @@
 
 // Keep in sync with https://github.com/facebook/flow/blob/main/lib/react.js
 export type ComponentType<-P> = React$ComponentType<P>;
-export type AbstractComponent<
-  -Config,
-  +Instance = mixed,
-> = React$AbstractComponent<Config, Instance>;
+export type AbstractComponent<-Config> = React$AbstractComponent<Config>;
 export type ElementType = React$ElementType;
 export type Element<+C> = React$Element<C>;
 export type Key = React$Key;
-export type Ref<C> = React$Ref<C>;
 export type Node = React$Node;
 export type Context<T> = React$Context<T>;
 export type Portal = React$Portal;

packages/react/index.js

@@ -9,15 +9,11 @@
 
 // Keep in sync with https://github.com/facebook/flow/blob/main/lib/react.js
 export type ComponentType<-P> = React$ComponentType<P>;
-export type AbstractComponent<
-  -Config,
-  +Instance = mixed,
-> = React$AbstractComponent<Config, Instance>;
+export type AbstractComponent<-Config> = React$AbstractComponent<Config>;
 export type ElementType = React$ElementType;
 export type Element<+C> = React$Element<C>;
 export type MixedElement = React$Element<ElementType>;
 export type Key = React$Key;
-export type Ref<C> = React$Ref<C>;
 export type Node = React$Node;
 export type Context<T> = React$Context<T>;
 export type Portal = React$Portal;

packages/react/src/ReactForwardRef.js

@@ -10,7 +10,10 @@
 import {REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE} from 'shared/ReactSymbols';
 
 export function forwardRef<Props, ElementType: React$ElementType>(
-  render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
+  render: (
+    props: Props,
+    ref: React$RefSetter<React$ElementRef<ElementType>>,
+  ) => React$Node,
 ) {
   if (__DEV__) {
     if (render != null && render.$$typeof === REACT_MEMO_TYPE) {