Use component syntax

.eslintrc

@@ -2,8 +2,8 @@
   "settings": {
     "react": {
       "pragma": "React",
-      "version": "18.0",
-      "flowVersion": "0.213.1" // Flow version
+      "version": "19.0",
+      "flowVersion": "0.248.1" // Flow version
     }
   },
   // babel parser to support ES6/7 features

package.json

@@ -32,9 +32,10 @@
     "eslint-plugin-ft-flow": "^3.0.7",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.33.1",
-    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-react-hooks": "6.1.0-canary-12bc60f5-20250613",
     "flow-api-translator": "^0.25.0",
     "flow-bin": "^0.248.1",
+    "hermes-eslint": "^0.32.0",
     "husky": "^8.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

packages/react-strict-dom/src/dom/modules/createStrictDOMComponent.js

@@ -38,56 +38,51 @@ export function createStrictDOMComponent<T, P: StrictProps>(
     'debug::name': `html-${TagName}` as $FlowFixMe
   };
 
-  const component: React.AbstractComponent<P, T> = React.forwardRef(
-    function (props, forwardedRef) {
-      /**
-       * get host props
-       */
-      const { for: htmlFor, style, ...restProps } = props;
-      const hostProps: { ...P, htmlFor?: string } = restProps;
-      validateStrictProps(hostProps);
+  component Component(ref?: React.RefSetter<T>, ...props: P) {
+    /**
+     * get host props
+     */
+    const { for: htmlFor, style, ...restProps } = props;
+    const hostProps: { ...P, htmlFor?: string } = restProps;
+    validateStrictProps(hostProps);
 
-      if (htmlFor != null) {
-        hostProps.htmlFor = htmlFor;
-      }
-      if (props.role != null) {
-        // "presentation" synonym has wider browser support
-        // $FlowFixMe
-        hostProps.role = props.role === 'none' ? 'presentation' : props.role;
-      }
-      if (TagName === 'button') {
-        hostProps.type = hostProps.type ? hostProps.type : 'button';
-      } else if (TagName === 'input' || TagName === 'textarea') {
-        hostProps.dir = hostProps.dir ? hostProps.dir : 'auto';
-      }
+    if (htmlFor != null) {
+      hostProps.htmlFor = htmlFor;
+    }
+    if (props.role != null) {
+      // "presentation" synonym has wider browser support
+      // $FlowFixMe
+      hostProps.role = props.role === 'none' ? 'presentation' : props.role;
+    }
+    if (TagName === 'button') {
+      hostProps.type = hostProps.type ? hostProps.type : 'button';
+    } else if (TagName === 'input' || TagName === 'textarea') {
+      hostProps.dir = hostProps.dir ? hostProps.dir : 'auto';
+    }
 
-      /**
-       * get host style props
-       */
-      // Waiting on a diff so we can remove this indirection.
-      const hostStyleProps: ReactDOMStyleProps = stylex.props([
-        debugStyle,
-        defaultStyle,
-        style
-      ]);
+    /**
+     * get host style props
+     */
+    // Waiting on a diff so we can remove this indirection.
+    const hostStyleProps: ReactDOMStyleProps = stylex.props([
+      debugStyle,
+      defaultStyle,
+      style
+    ]);
 
-      /**
-       * Construct tree
-       *
-       * Intentional flow error as we are asking for a more specific type
-       * than React itself.
-       */
-      const element = (
-        <TagName
-          {...hostProps}
-          {...hostStyleProps}
-          ref={forwardedRef as $FlowFixMe}
-        />
-      );
-      return element;
-    }
-  );
+    /**
+     * Construct tree
+     *
+     * Intentional flow error as we are asking for a more specific type
+     * than React itself.
+     */
+    const element = (
+      <TagName {...hostProps} {...hostStyleProps} ref={ref as $FlowFixMe} />
+    );
+    return element;
+  }
 
-  component.displayName = `html.${TagName}`;
-  return component;
+  // eslint-disable-next-line no-unreachable
+  Component.displayName = `html.${TagName}`;
+  return Component;
 }