diff --git a/jscomp/others/jsxC.res b/jscomp/others/jsxC.res
index d7e08eb405..386c51937a 100644
--- a/jscomp/others/jsxC.res
+++ b/jscomp/others/jsxC.res
@@ -36,7 +36,7 @@ external string: string => element = "%identity"
 external array: array<element> => element = "%identity"
 
 type componentLike<'props, 'return> = 'props => 'return
-type component<'props> = componentLike<'props, element>
+type component<'props>
 
 /* this function exists to prepare for making `component` abstract */
 external component: componentLike<'props, element> => component<'props> = "%identity"
diff --git a/jscomp/others/jsxU.res b/jscomp/others/jsxU.res
index 70f3c67430..0d3b74b81e 100644
--- a/jscomp/others/jsxU.res
+++ b/jscomp/others/jsxU.res
@@ -14,7 +14,7 @@ external string: string => element = "%identity"
 external array: array<element> => element = "%identity"
 
 type componentLike<'props, 'return> = 'props => 'return
-type component<'props> = componentLike<'props, element>
+type component<'props>
 
 /* this function exists to prepare for making `component` abstract */
 external component: componentLike<'props, element> => component<'props> = "%identity"
diff --git a/jscomp/syntax/src/jsx_v4.ml b/jscomp/syntax/src/jsx_v4.ml
index 8c7bbedef3..435622e25f 100644
--- a/jscomp/syntax/src/jsx_v4.ml
+++ b/jscomp/syntax/src/jsx_v4.ml
@@ -977,6 +977,12 @@ let mapBinding ~config ~emptyLoc ~pstr_loc ~fileName ~recFlag binding =
              innerExpression
          else innerExpression)
     in
+    (* making component abstract *)
+    let fullExpression =
+      Exp.apply
+        (Exp.ident (Location.mknoloc @@ Ldot (Lident "React", "component")))
+        [(Nolabel, fullExpression)]
+    in
     let fullExpression =
       if !Config.uncurried = Uncurried then
         fullExpression
@@ -1174,7 +1180,7 @@ let transformStructureItem ~config item =
             (name, ptyp_attributes, returnValue.ptyp_loc, type_) :: types )
         | _ -> (fullType, types)
       in
-      let innerType, propTypes = getPropTypes [] pval_type in
+      let _innerType, propTypes = getPropTypes [] pval_type in
       let namedTypeList = List.fold_left argToConcreteType [] propTypes in
       let retPropsType =
         Typ.constr ~loc:pstr_loc
@@ -1194,8 +1200,8 @@ let transformStructureItem ~config item =
       (* can't be an arrow because it will defensively uncurry *)
       let newExternalType =
         Ptyp_constr
-          ( {loc = pstr_loc; txt = moduleAccessName config "componentLike"},
-            [retPropsType; innerType] )
+          ( {loc = pstr_loc; txt = moduleAccessName config "component"},
+            [retPropsType] )
       in
       let newStructure =
         {
@@ -1282,7 +1288,7 @@ let transformSignatureItem ~config item =
           (returnValue, (name, attrs, returnValue.ptyp_loc, type_) :: types)
         | _ -> (fullType, types)
       in
-      let innerType, propTypes = getPropTypes [] pval_type in
+      let _innerType, propTypes = getPropTypes [] pval_type in
       let namedTypeList = List.fold_left argToConcreteType [] propTypes in
       let retPropsType =
         Typ.constr
@@ -1301,8 +1307,8 @@ let transformSignatureItem ~config item =
       (* can't be an arrow because it will defensively uncurry *)
       let newExternalType =
         Ptyp_constr
-          ( {loc = psig_loc; txt = moduleAccessName config "componentLike"},
-            [retPropsType; innerType] )
+          ( {loc = psig_loc; txt = moduleAccessName config "component"},
+            [retPropsType] )
       in
       let newStructure =
         {
diff --git a/jscomp/syntax/tests/ppx/react/abstract.res b/jscomp/syntax/tests/ppx/react/abstract.res
new file mode 100644
index 0000000000..f9a3f48636
--- /dev/null
+++ b/jscomp/syntax/tests/ppx/react/abstract.res
@@ -0,0 +1,12 @@
+module SomeComp2 = {
+  type props = {x: int}
+  @module("SomeModule")
+  external make: props => React.element = "SomeComp2"
+}
+
+let _ = <SomeComp2 x=42 />
+
+@@jsxConfig({version: 3})
+
+@react.component
+let rec make = (~foo, ()) => React.createElement(make, makeProps(~foo, ()))
diff --git a/jscomp/syntax/tests/ppx/react/expected/abstract.res.txt b/jscomp/syntax/tests/ppx/react/expected/abstract.res.txt
new file mode 100644
index 0000000000..4e31c50bdc
--- /dev/null
+++ b/jscomp/syntax/tests/ppx/react/expected/abstract.res.txt
@@ -0,0 +1,21 @@
+module SomeComp2 = {
+  type props = {x: int}
+  @module("SomeModule")
+  external make: props => React.element = "SomeComp2"
+}
+
+let _ = React.jsx(SomeComp2.make, {x: 42})
+
+@@jsxConfig({version: 3})
+@obj external makeProps: (~foo: 'foo, ~key: string=?, unit) => {"foo": 'foo} = ""
+
+let rec make = {
+  @merlin.focus
+  let rec \"make$Internal" =
+    @warning("-16") (~foo, ()) => React.createElement(make, makeProps(~foo, ()))
+  and make = {
+    let \"Abstract" = (\"Props": {"foo": 'foo}) => \"make$Internal"(~foo=\"Props"["foo"], ())
+    \"Abstract"
+  }
+  make
+}
diff --git a/jscomp/syntax/tests/ppx/react/expected/aliasProps.res.txt b/jscomp/syntax/tests/ppx/react/expected/aliasProps.res.txt
index 959ae19821..b7856339e0 100644
--- a/jscomp/syntax/tests/ppx/react/expected/aliasProps.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/aliasProps.res.txt
@@ -12,7 +12,7 @@ module C0 = {
     React.string(text)
   }
   let make = {
-    let \"AliasProps$C0" = (props: props<_>) => make(props)
+    let \"AliasProps$C0" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C0"
   }
@@ -30,7 +30,7 @@ module C1 = {
     React.string(p ++ text)
   }
   let make = {
-    let \"AliasProps$C1" = (props: props<_>) => make(props)
+    let \"AliasProps$C1" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C1"
   }
@@ -48,7 +48,7 @@ module C2 = {
     React.string(bar)
   }
   let make = {
-    let \"AliasProps$C2" = (props: props<_>) => make(props)
+    let \"AliasProps$C2" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C2"
   }
@@ -72,7 +72,7 @@ module C3 = {
     }
   }
   let make = {
-    let \"AliasProps$C3" = (props: props<_>) => make(props)
+    let \"AliasProps$C3" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C3"
   }
@@ -90,7 +90,7 @@ module C4 = {
     ReactDOM.jsx("div", {children: ?ReactDOM.someElement(b)})
   }
   let make = {
-    let \"AliasProps$C4" = (props: props<_>) => make(props)
+    let \"AliasProps$C4" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C4"
   }
@@ -108,7 +108,7 @@ module C5 = {
     x + y + z
   }
   let make = {
-    let \"AliasProps$C5" = (props: props<_>) => make(props)
+    let \"AliasProps$C5" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C5"
   }
@@ -118,13 +118,13 @@ module C6 = {
   module type Comp = {
     type props = {}
 
-    let make: React.componentLike<props, React.element>
+    let make: React.component<props>
   }
   type props<'comp, 'x> = {comp: 'comp, x: 'x}
 
   let make = ({comp: module(Comp: Comp), x: (a, b), _}: props<_, _>) => React.jsx(Comp.make, {})
   let make = {
-    let \"AliasProps$C6" = (props: props<_>) => make(props)
+    let \"AliasProps$C6" = React.component((props: props<_>) => make(props))
 
     \"AliasProps$C6"
   }
diff --git a/jscomp/syntax/tests/ppx/react/expected/asyncAwait.res.txt b/jscomp/syntax/tests/ppx/react/expected/asyncAwait.res.txt
index d8d86dccca..361fcc8267 100644
--- a/jscomp/syntax/tests/ppx/react/expected/asyncAwait.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/asyncAwait.res.txt
@@ -8,7 +8,9 @@ module C0 = {
     ReactDOM.jsx("div", {children: ?ReactDOM.someElement({React.int(a)})})
   }
   let make = {
-    let \"AsyncAwait$C0" = (props: props<_>) => JsxPPXReactSupport.asyncComponent(make(props))
+    let \"AsyncAwait$C0" = React.component((props: props<_>) =>
+      JsxPPXReactSupport.asyncComponent(make(props))
+    )
 
     \"AsyncAwait$C0"
   }
@@ -24,7 +26,9 @@ module C1 = {
     }
   }
   let make = {
-    let \"AsyncAwait$C1" = (props: props<_>) => JsxPPXReactSupport.asyncComponent(make(props))
+    let \"AsyncAwait$C1" = React.component((props: props<_>) =>
+      JsxPPXReactSupport.asyncComponent(make(props))
+    )
 
     \"AsyncAwait$C1"
   }
diff --git a/jscomp/syntax/tests/ppx/react/expected/commentAtTop.res.txt b/jscomp/syntax/tests/ppx/react/expected/commentAtTop.res.txt
index d620f691c5..8adeed3381 100644
--- a/jscomp/syntax/tests/ppx/react/expected/commentAtTop.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/commentAtTop.res.txt
@@ -4,7 +4,7 @@ let make = ({msg, _}: props<_>) => {
   ReactDOM.jsx("div", {children: ?ReactDOM.someElement({msg->React.string})})
 }
 let make = {
-  let \"CommentAtTop" = (props: props<_>) => make(props)
+  let \"CommentAtTop" = React.component((props: props<_>) => make(props))
 
   \"CommentAtTop"
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/defaultValueProp.res.txt b/jscomp/syntax/tests/ppx/react/expected/defaultValueProp.res.txt
index 0b4c240a41..0f32b79146 100644
--- a/jscomp/syntax/tests/ppx/react/expected/defaultValueProp.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/defaultValueProp.res.txt
@@ -13,7 +13,7 @@ module C0 = {
     React.int(a + b)
   }
   let make = {
-    let \"DefaultValueProp$C0" = (props: props<_>) => make(props)
+    let \"DefaultValueProp$C0" = React.component((props: props<_>) => make(props))
     \"DefaultValueProp$C0"
   }
 }
@@ -30,7 +30,7 @@ module C1 = {
     React.int(a + b)
   }
   let make = {
-    let \"DefaultValueProp$C1" = (props: props<_>) => make(props)
+    let \"DefaultValueProp$C1" = React.component((props: props<_>) => make(props))
 
     \"DefaultValueProp$C1"
   }
@@ -49,7 +49,7 @@ module C2 = {
     React.string(a)
   }
   let make = {
-    let \"DefaultValueProp$C2" = (props: props<_>) => make(props)
+    let \"DefaultValueProp$C2" = React.component((props: props<_>) => make(props))
 
     \"DefaultValueProp$C2"
   }
@@ -69,7 +69,7 @@ module C3 = {
     }
   }
   let make = {
-    let \"DefaultValueProp$C3" = (props: props<_>) => make(props)
+    let \"DefaultValueProp$C3" = React.component((props: props<_>) => make(props))
 
     \"DefaultValueProp$C3"
   }
diff --git a/jscomp/syntax/tests/ppx/react/expected/externalWithCustomName.res.txt b/jscomp/syntax/tests/ppx/react/expected/externalWithCustomName.res.txt
index 335c670fe5..c0b5046116 100644
--- a/jscomp/syntax/tests/ppx/react/expected/externalWithCustomName.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/externalWithCustomName.res.txt
@@ -16,7 +16,7 @@ module Foo = {
   type props<'a, 'b> = {a: 'a, b: 'b}
 
   @module("Foo")
-  external component: React.componentLike<props<int, string>, React.element> = "component"
+  external component: React.component<props<int, string>> = "component"
 }
 
 let t = React.createElement(Foo.component, {a: 1, b: "1"})
@@ -27,7 +27,7 @@ module Foo = {
   type props<'a, 'b> = {a: 'a, b: 'b}
 
   @module("Foo")
-  external component: React.componentLike<props<int, string>, React.element> = "component"
+  external component: React.component<props<int, string>> = "component"
 }
 
 let t = React.jsx(Foo.component, {a: 1, b: "1"})
diff --git a/jscomp/syntax/tests/ppx/react/expected/externalWithRef.res.txt b/jscomp/syntax/tests/ppx/react/expected/externalWithRef.res.txt
index dd64f13c65..765b5800b2 100644
--- a/jscomp/syntax/tests/ppx/react/expected/externalWithRef.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/externalWithRef.res.txt
@@ -24,8 +24,7 @@ module V4C = {
   }
 
   @module("componentForwardRef")
-  external make: React.componentLike<props<string, ReactDOM.Ref.currentDomRef>, React.element> =
-    "component"
+  external make: React.component<props<string, ReactDOM.Ref.currentDomRef>> = "component"
 }
 
 @@jsxConfig({version: 4, mode: "automatic"})
@@ -37,6 +36,5 @@ module V4C = {
   }
 
   @module("componentForwardRef")
-  external make: React.componentLike<props<string, ReactDOM.Ref.currentDomRef>, React.element> =
-    "component"
+  external make: React.component<props<string, ReactDOM.Ref.currentDomRef>> = "component"
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/externalWithTypeVariables.res.txt b/jscomp/syntax/tests/ppx/react/expected/externalWithTypeVariables.res.txt
index 6850bdde5f..3f0f4a7870 100644
--- a/jscomp/syntax/tests/ppx/react/expected/externalWithTypeVariables.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/externalWithTypeVariables.res.txt
@@ -22,7 +22,7 @@ module V4C = {
   }
 
   @module("c")
-  external make: React.componentLike<props<t<'a>, React.element>, React.element> = "component"
+  external make: React.component<props<t<'a>, React.element>> = "component"
 }
 
 @@jsxConfig({version: 4, mode: "automatic"})
@@ -34,5 +34,5 @@ module V4C = {
   }
 
   @module("c")
-  external make: React.componentLike<props<t<'a>, React.element>, React.element> = "component"
+  external make: React.component<props<t<'a>, React.element>> = "component"
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/fileLevelConfig.res.txt b/jscomp/syntax/tests/ppx/react/expected/fileLevelConfig.res.txt
index 817461d18b..601d679803 100644
--- a/jscomp/syntax/tests/ppx/react/expected/fileLevelConfig.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/fileLevelConfig.res.txt
@@ -24,7 +24,7 @@ module V4C = {
     ReactDOM.createDOMElementVariadic("div", [{msg->React.string}])
   }
   let make = {
-    let \"FileLevelConfig$V4C" = (props: props<_>) => make(props)
+    let \"FileLevelConfig$V4C" = React.component((props: props<_>) => make(props))
 
     \"FileLevelConfig$V4C"
   }
@@ -39,7 +39,7 @@ module V4A = {
     ReactDOM.jsx("div", {children: ?ReactDOM.someElement({msg->React.string})})
   }
   let make = {
-    let \"FileLevelConfig$V4A" = (props: props<_>) => make(props)
+    let \"FileLevelConfig$V4A" = React.component((props: props<_>) => make(props))
 
     \"FileLevelConfig$V4A"
   }
diff --git a/jscomp/syntax/tests/ppx/react/expected/firstClassModules.res.txt b/jscomp/syntax/tests/ppx/react/expected/firstClassModules.res.txt
index dd14bf349f..3ab81b25de 100644
--- a/jscomp/syntax/tests/ppx/react/expected/firstClassModules.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/firstClassModules.res.txt
@@ -77,7 +77,7 @@ module Select = {
     ReactDOM.createDOMElementVariadic("div", [])
   }
   let make = {
-    let \"FirstClassModules$Select" = (props: props<_>) => make(props)
+    let \"FirstClassModules$Select" = React.component((props: props<_>) => make(props))
 
     \"FirstClassModules$Select"
   }
@@ -96,13 +96,12 @@ module External = {
   }
 
   @module("c")
-  external make: React.componentLike<
+  external make: React.component<
     props<
       module(T with type t = 'a and type key = 'key),
       option<'key>,
       (option<'key> => unit),
       array<'a>,
     >,
-    React.element,
   > = "default"
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/firstClassModules.resi.txt b/jscomp/syntax/tests/ppx/react/expected/firstClassModules.resi.txt
index e5ec53af6c..cbae5486e2 100644
--- a/jscomp/syntax/tests/ppx/react/expected/firstClassModules.resi.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/firstClassModules.resi.txt
@@ -45,13 +45,12 @@ module Select: {
     items: 'items,
   }
 
-  let make: React.componentLike<
+  let make: React.component<
     props<
       module(T with type t = 'a and type key = 'key),
       option<'key>,
       (option<'key> => unit),
       array<'a>,
     >,
-    React.element,
   >
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/forwardRef.res.txt b/jscomp/syntax/tests/ppx/react/expected/forwardRef.res.txt
index 80f843e18b..04ccd14f35 100644
--- a/jscomp/syntax/tests/ppx/react/expected/forwardRef.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/forwardRef.res.txt
@@ -95,7 +95,7 @@ module V4C = {
         ],
       )
     let make = React.forwardRef({
-      let \"ForwardRef$V4C$FancyInput" = (props: props<_>, ref) => make(props, ref)
+      let \"ForwardRef$V4C$FancyInput" = React.component((props: props<_>, ref) => make(props, ref))
 
       \"ForwardRef$V4C$FancyInput"
     })
@@ -116,7 +116,7 @@ module V4C = {
     )
   }
   let make = {
-    let \"ForwardRef$V4C" = props => make(props)
+    let \"ForwardRef$V4C" = React.component(props => make(props))
 
     \"ForwardRef$V4C"
   }
@@ -150,7 +150,9 @@ module V4CUncurried = {
         ],
       )
     let make = React.forwardRef({
-      let \"ForwardRef$V4CUncurried$FancyInput" = (props: props<_>, ref) => make(props, ref)
+      let \"ForwardRef$V4CUncurried$FancyInput" = React.component((props: props<_>, ref) =>
+        make(props, ref)
+      )
 
       \"ForwardRef$V4CUncurried$FancyInput"
     })
@@ -171,7 +173,7 @@ module V4CUncurried = {
     )
   }
   let make = {
-    let \"ForwardRef$V4CUncurried" = props => make(props)
+    let \"ForwardRef$V4CUncurried" = React.component(props => make(props))
 
     \"ForwardRef$V4CUncurried"
   }
@@ -205,7 +207,7 @@ module V4A = {
         },
       )
     let make = React.forwardRef({
-      let \"ForwardRef$V4A$FancyInput" = (props: props<_>, ref) => make(props, ref)
+      let \"ForwardRef$V4A$FancyInput" = React.component((props: props<_>, ref) => make(props, ref))
 
       \"ForwardRef$V4A$FancyInput"
     })
@@ -225,7 +227,7 @@ module V4A = {
     )
   }
   let make = {
-    let \"ForwardRef$V4A" = props => make(props)
+    let \"ForwardRef$V4A" = React.component(props => make(props))
 
     \"ForwardRef$V4A"
   }
@@ -257,7 +259,9 @@ module V4AUncurried = {
         },
       )
     let make = React.forwardRef({
-      let \"ForwardRef$V4AUncurried$FancyInput" = (props: props<_>, ref) => make(props, ref)
+      let \"ForwardRef$V4AUncurried$FancyInput" = React.component((props: props<_>, ref) =>
+        make(props, ref)
+      )
 
       \"ForwardRef$V4AUncurried$FancyInput"
     })
@@ -277,7 +281,7 @@ module V4AUncurried = {
     )
   }
   let make = {
-    let \"ForwardRef$V4AUncurried" = props => make(props)
+    let \"ForwardRef$V4AUncurried" = React.component(props => make(props))
 
     \"ForwardRef$V4AUncurried"
   }
diff --git a/jscomp/syntax/tests/ppx/react/expected/forwardRef.resi.txt b/jscomp/syntax/tests/ppx/react/expected/forwardRef.resi.txt
index 4b8c51cd83..e808b05113 100644
--- a/jscomp/syntax/tests/ppx/react/expected/forwardRef.resi.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/forwardRef.resi.txt
@@ -48,16 +48,13 @@ module V4C: {
       ref?: 'ref,
     }
 
-    let make: React.componentLike<
-      props<string, React.element, ReactDOM.Ref.currentDomRef>,
-      React.element,
-    >
+    let make: React.component<props<string, React.element, ReactDOM.Ref.currentDomRef>>
   }
 
   module ForwardRef: {
     type props<'ref> = {ref?: 'ref}
 
-    let make: React.componentLike<props<React.ref<Js.Nullable.t<inputRef>>>, React.element>
+    let make: React.component<props<React.ref<Js.Nullable.t<inputRef>>>>
   }
 }
 
@@ -69,16 +66,13 @@ module V4CUncurried: {
       ref?: 'ref,
     }
 
-    let make: React.componentLike<
-      props<string, React.element, ReactDOM.Ref.currentDomRef>,
-      React.element,
-    >
+    let make: React.component<props<string, React.element, ReactDOM.Ref.currentDomRef>>
   }
 
   module ForwardRef: {
     type props<'ref> = {ref?: 'ref}
 
-    let make: React.componentLike<props<React.ref<Js.Nullable.t<inputRef>>>, React.element>
+    let make: React.component<props<React.ref<Js.Nullable.t<inputRef>>>>
   }
 }
 
@@ -92,16 +86,13 @@ module V4A: {
       ref?: 'ref,
     }
 
-    let make: React.componentLike<
-      props<string, React.element, ReactDOM.Ref.currentDomRef>,
-      React.element,
-    >
+    let make: React.component<props<string, React.element, ReactDOM.Ref.currentDomRef>>
   }
 
   module ForwardRef: {
     type props<'ref> = {ref?: 'ref}
 
-    let make: React.componentLike<props<React.ref<Js.Nullable.t<inputRef>>>, React.element>
+    let make: React.component<props<React.ref<Js.Nullable.t<inputRef>>>>
   }
 }
 
@@ -113,15 +104,12 @@ module V4AUncurried: {
       ref?: 'ref,
     }
 
-    let make: React.componentLike<
-      props<string, React.element, ReactDOM.Ref.currentDomRef>,
-      React.element,
-    >
+    let make: React.component<props<string, React.element, ReactDOM.Ref.currentDomRef>>
   }
 
   module ForwardRef: {
     type props<'ref> = {ref?: 'ref}
 
-    let make: React.componentLike<props<React.ref<Js.Nullable.t<inputRef>>>, React.element>
+    let make: React.component<props<React.ref<Js.Nullable.t<inputRef>>>>
   }
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/interface.res.txt b/jscomp/syntax/tests/ppx/react/expected/interface.res.txt
index 166ed2ed90..142fa63aab 100644
--- a/jscomp/syntax/tests/ppx/react/expected/interface.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/interface.res.txt
@@ -2,7 +2,7 @@ module A = {
   type props<'x> = {x: 'x}
   let make = ({x, _}: props<_>) => React.string(x)
   let make = {
-    let \"Interface$A" = (props: props<_>) => make(props)
+    let \"Interface$A" = React.component((props: props<_>) => make(props))
     \"Interface$A"
   }
 }
@@ -12,7 +12,7 @@ module NoProps = {
 
   let make = (_: props) => ReactDOM.jsx("div", {})
   let make = {
-    let \"Interface$NoProps" = props => make(props)
+    let \"Interface$NoProps" = React.component(props => make(props))
 
     \"Interface$NoProps"
   }
diff --git a/jscomp/syntax/tests/ppx/react/expected/interface.resi.txt b/jscomp/syntax/tests/ppx/react/expected/interface.resi.txt
index f4ffd9b65c..c75740d96e 100644
--- a/jscomp/syntax/tests/ppx/react/expected/interface.resi.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/interface.resi.txt
@@ -1,10 +1,10 @@
 module A: {
   type props<'x> = {x: 'x}
-  let make: React.componentLike<props<string>, React.element>
+  let make: React.component<props<string>>
 }
 
 module NoProps: {
   type props = {}
 
-  let make: React.componentLike<props, React.element>
+  let make: React.component<props>
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/interfaceWithRef.res.txt b/jscomp/syntax/tests/ppx/react/expected/interfaceWithRef.res.txt
index dbb6acfd5e..fbfba9bb63 100644
--- a/jscomp/syntax/tests/ppx/react/expected/interfaceWithRef.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/interfaceWithRef.res.txt
@@ -7,6 +7,6 @@ let make = (
   React.string(x)
 }
 let make = React.forwardRef({
-  let \"InterfaceWithRef" = (props: props<_>, ref) => make(props, ref)
+  let \"InterfaceWithRef" = React.component((props: props<_>, ref) => make(props, ref))
   \"InterfaceWithRef"
 })
diff --git a/jscomp/syntax/tests/ppx/react/expected/interfaceWithRef.resi.txt b/jscomp/syntax/tests/ppx/react/expected/interfaceWithRef.resi.txt
index ee5da3ca6d..d116179ca2 100644
--- a/jscomp/syntax/tests/ppx/react/expected/interfaceWithRef.resi.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/interfaceWithRef.resi.txt
@@ -1,2 +1,2 @@
 type props<'x, 'ref> = {x: 'x, ref?: 'ref}
-let make: React.componentLike<props<string, ReactDOM.Ref.currentDomRef>, React.element>
+let make: React.component<props<string, ReactDOM.Ref.currentDomRef>>
diff --git a/jscomp/syntax/tests/ppx/react/expected/mangleKeyword.res.txt b/jscomp/syntax/tests/ppx/react/expected/mangleKeyword.res.txt
index 087f649aed..6ce3c78cb0 100644
--- a/jscomp/syntax/tests/ppx/react/expected/mangleKeyword.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/mangleKeyword.res.txt
@@ -41,7 +41,7 @@ module C4C0 = {
 
   let make = ({@as("open") _open, @as("type") _type, _}: props<_, string>) => React.string(_open)
   let make = {
-    let \"MangleKeyword$C4C0" = (props: props<_>) => make(props)
+    let \"MangleKeyword$C4C0" = React.component((props: props<_>) => make(props))
 
     \"MangleKeyword$C4C0"
   }
@@ -49,7 +49,7 @@ module C4C0 = {
 module C4C1 = {
   type props<'T_open, 'T_type> = {@as("open") _open: 'T_open, @as("type") _type: 'T_type}
 
-  external make: @as("open") React.componentLike<props<string, string>, React.element> = "default"
+  external make: @as("open") React.component<props<string, string>> = "default"
 }
 
 let c4c0 = React.createElement(C4C0.make, {_open: "x", _type: "t"})
@@ -62,7 +62,7 @@ module C4A0 = {
 
   let make = ({@as("open") _open, @as("type") _type, _}: props<_, string>) => React.string(_open)
   let make = {
-    let \"MangleKeyword$C4A0" = (props: props<_>) => make(props)
+    let \"MangleKeyword$C4A0" = React.component((props: props<_>) => make(props))
 
     \"MangleKeyword$C4A0"
   }
@@ -70,7 +70,7 @@ module C4A0 = {
 module C4A1 = {
   type props<'T_open, 'T_type> = {@as("open") _open: 'T_open, @as("type") _type: 'T_type}
 
-  external make: @as("open") React.componentLike<props<string, string>, React.element> = "default"
+  external make: @as("open") React.component<props<string, string>> = "default"
 }
 
 let c4a0 = React.jsx(C4A0.make, {_open: "x", _type: "t"})
diff --git a/jscomp/syntax/tests/ppx/react/expected/nested.res.txt b/jscomp/syntax/tests/ppx/react/expected/nested.res.txt
index f290915b30..c1a93df220 100644
--- a/jscomp/syntax/tests/ppx/react/expected/nested.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/nested.res.txt
@@ -6,7 +6,7 @@ module Outer = {
 
       let make = (_: props) => ReactDOM.jsx("div", {})
       let make = {
-        let \"Nested$Outer" = props => make(props)
+        let \"Nested$Outer" = React.component(props => make(props))
 
         \"Nested$Outer"
       }
@@ -15,7 +15,7 @@ module Outer = {
     React.jsx(Inner.make, {})
   }
   let make = {
-    let \"Nested$Outer" = props => make(props)
+    let \"Nested$Outer" = React.component(props => make(props))
     \"Nested$Outer"
   }
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/newtype.res.txt b/jscomp/syntax/tests/ppx/react/expected/newtype.res.txt
index ca23fe5ad2..01c3e4b0b0 100644
--- a/jscomp/syntax/tests/ppx/react/expected/newtype.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/newtype.res.txt
@@ -29,7 +29,7 @@ module V4C = {
   let make = (type a, {a, b, c, _}: props<a, array<option<[#Foo(a)]>>, 'a>) =>
     ReactDOM.createDOMElementVariadic("div", [])
   let make = {
-    let \"Newtype$V4C" = (props: props<_>) => make(props)
+    let \"Newtype$V4C" = React.component((props: props<_>) => make(props))
 
     \"Newtype$V4C"
   }
@@ -43,7 +43,7 @@ module V4A = {
   let make = (type a, {a, b, c, _}: props<a, array<option<[#Foo(a)]>>, 'a>) =>
     ReactDOM.jsx("div", {})
   let make = {
-    let \"Newtype$V4A" = (props: props<_>) => make(props)
+    let \"Newtype$V4A" = React.component((props: props<_>) => make(props))
 
     \"Newtype$V4A"
   }
@@ -54,7 +54,7 @@ module V4A1 = {
 
   let make = (type x y, {a, b, c, _}: props<x, array<y>, 'a>) => ReactDOM.jsx("div", {})
   let make = {
-    let \"Newtype$V4A1" = (props: props<_>) => make(props)
+    let \"Newtype$V4A1" = React.component((props: props<_>) => make(props))
 
     \"Newtype$V4A1"
   }
@@ -72,7 +72,7 @@ module V4A2 = {
     ReactDOM.jsx("div", {})
   }
   let make = {
-    let \"Newtype$V4A2" = (props: props<_>) => make(props)
+    let \"Newtype$V4A2" = React.component((props: props<_>) => make(props))
 
     \"Newtype$V4A2"
   }
@@ -86,7 +86,7 @@ module V4A3 = {
     foo
   }
   let make = {
-    let \"Newtype$V4A3" = (props: props<_>) => make(props)
+    let \"Newtype$V4A3" = React.component((props: props<_>) => make(props))
 
     \"Newtype$V4A3"
   }
@@ -95,7 +95,7 @@ type props<'x, 'q> = {x: 'x, q: 'q}
 
 let make = ({x, q, _}: props<('a, 'b), 'a>) => [fst(x), q]
 let make = {
-  let \"Newtype" = (props: props<_>) => make(props)
+  let \"Newtype" = React.component((props: props<_>) => make(props))
 
   \"Newtype"
 }
@@ -107,7 +107,7 @@ module Uncurried = {
 
   let make = (type a, {?foo, _}: props<_>) => React.null
   let make = {
-    let \"Newtype$Uncurried" = (props: props<_>) => make(props)
+    let \"Newtype$Uncurried" = React.component((props: props<_>) => make(props))
 
     \"Newtype$Uncurried"
   }
diff --git a/jscomp/syntax/tests/ppx/react/expected/noPropsWithKey.res.txt b/jscomp/syntax/tests/ppx/react/expected/noPropsWithKey.res.txt
index c541cb3e99..5bfb57c72b 100644
--- a/jscomp/syntax/tests/ppx/react/expected/noPropsWithKey.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/noPropsWithKey.res.txt
@@ -5,7 +5,7 @@ module V4CA = {
 
   let make = (_: props) => ReactDOM.createDOMElementVariadic("div", [])
   let make = {
-    let \"NoPropsWithKey$V4CA" = props => make(props)
+    let \"NoPropsWithKey$V4CA" = React.component(props => make(props))
 
     \"NoPropsWithKey$V4CA"
   }
@@ -15,7 +15,7 @@ module V4CB = {
   type props = {}
 
   @module("c")
-  external make: React.componentLike<props, React.element> = "component"
+  external make: React.component<props> = "component"
 }
 
 module V4C = {
@@ -31,7 +31,7 @@ module V4C = {
       ],
     )
   let make = {
-    let \"NoPropsWithKey$V4C" = props => make(props)
+    let \"NoPropsWithKey$V4C" = React.component(props => make(props))
 
     \"NoPropsWithKey$V4C"
   }
@@ -44,7 +44,7 @@ module V4CA = {
 
   let make = (_: props) => ReactDOM.jsx("div", {})
   let make = {
-    let \"NoPropsWithKey$V4CA" = props => make(props)
+    let \"NoPropsWithKey$V4CA" = React.component(props => make(props))
 
     \"NoPropsWithKey$V4CA"
   }
@@ -54,7 +54,7 @@ module V4CB = {
   type props = {}
 
   @module("c")
-  external make: React.componentLike<props, React.element> = "component"
+  external make: React.component<props> = "component"
 }
 
 module V4C = {
@@ -71,7 +71,7 @@ module V4C = {
       },
     )
   let make = {
-    let \"NoPropsWithKey$V4C" = props => make(props)
+    let \"NoPropsWithKey$V4C" = React.component(props => make(props))
 
     \"NoPropsWithKey$V4C"
   }
diff --git a/jscomp/syntax/tests/ppx/react/expected/optimizeAutomaticMode.res.txt b/jscomp/syntax/tests/ppx/react/expected/optimizeAutomaticMode.res.txt
index 18a5a3198b..fe65763281 100644
--- a/jscomp/syntax/tests/ppx/react/expected/optimizeAutomaticMode.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/optimizeAutomaticMode.res.txt
@@ -10,7 +10,7 @@ module User = {
     ReactDOM.jsx("h1", {id: "h1", children: ?ReactDOM.someElement({React.string(format(doctor))})})
   }
   let make = {
-    let \"OptimizeAutomaticMode$User" = (props: props<_>) => make(props)
+    let \"OptimizeAutomaticMode$User" = React.component((props: props<_>) => make(props))
 
     \"OptimizeAutomaticMode$User"
   }
diff --git a/jscomp/syntax/tests/ppx/react/expected/removedKeyProp.res.txt b/jscomp/syntax/tests/ppx/react/expected/removedKeyProp.res.txt
index bad43e7220..b65b573ad1 100644
--- a/jscomp/syntax/tests/ppx/react/expected/removedKeyProp.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/removedKeyProp.res.txt
@@ -5,7 +5,7 @@ module Foo = {
 
   let make = ({x, y, _}: props<_, _>) => React.string(x ++ y)
   let make = {
-    let \"RemovedKeyProp$Foo" = (props: props<_>) => make(props)
+    let \"RemovedKeyProp$Foo" = React.component((props: props<_>) => make(props))
 
     \"RemovedKeyProp$Foo"
   }
@@ -16,7 +16,7 @@ module HasChildren = {
 
   let make = ({children, _}: props<_>) => React.createElement(React.fragment, {children: children})
   let make = {
-    let \"RemovedKeyProp$HasChildren" = (props: props<_>) => make(props)
+    let \"RemovedKeyProp$HasChildren" = React.component((props: props<_>) => make(props))
 
     \"RemovedKeyProp$HasChildren"
   }
@@ -46,7 +46,7 @@ let make = (_: props) =>
     ],
   )
 let make = {
-  let \"RemovedKeyProp" = props => make(props)
+  let \"RemovedKeyProp" = React.component(props => make(props))
 
   \"RemovedKeyProp"
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/sharedProps.res.txt b/jscomp/syntax/tests/ppx/react/expected/sharedProps.res.txt
index c200b5ba3a..38c8d6c294 100644
--- a/jscomp/syntax/tests/ppx/react/expected/sharedProps.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/sharedProps.res.txt
@@ -5,7 +5,7 @@ module V4C1 = {
 
   let make = ({x, y, _}: props) => React.string(x ++ y)
   let make = {
-    let \"SharedProps$V4C1" = props => make(props)
+    let \"SharedProps$V4C1" = React.component(props => make(props))
 
     \"SharedProps$V4C1"
   }
@@ -16,7 +16,7 @@ module V4C2 = {
 
   let make = ({x, y, _}: props<_>) => React.string(x ++ y)
   let make = {
-    let \"SharedProps$V4C2" = (props: props<_>) => make(props)
+    let \"SharedProps$V4C2" = React.component((props: props<_>) => make(props))
 
     \"SharedProps$V4C2"
   }
@@ -27,7 +27,7 @@ module V4C3 = {
 
   let make = ({x, y, _}: props<_>) => React.string(x ++ y)
   let make = {
-    let \"SharedProps$V4C3" = (props: props<_>) => make(props)
+    let \"SharedProps$V4C3" = React.component((props: props<_>) => make(props))
 
     \"SharedProps$V4C3"
   }
@@ -38,7 +38,7 @@ module V4C4 = {
 
   let make = ({x, y, _}: props) => React.string(x ++ y)
   let make = {
-    let \"SharedProps$V4C4" = props => make(props)
+    let \"SharedProps$V4C4" = React.component(props => make(props))
 
     \"SharedProps$V4C4"
   }
@@ -47,25 +47,25 @@ module V4C4 = {
 module V4C5 = {
   type props = sharedProps<string>
 
-  external make: React.componentLike<props, React.element> = "default"
+  external make: React.component<props> = "default"
 }
 
 module V4C6 = {
   type props<'a> = sharedProps<'a>
 
-  external make: React.componentLike<props<_>, React.element> = "default"
+  external make: React.component<props<_>> = "default"
 }
 
 module V4C7 = {
   type props<'a> = sharedProps<string, 'a>
 
-  external make: React.componentLike<props<_>, React.element> = "default"
+  external make: React.component<props<_>> = "default"
 }
 
 module V4C8 = {
   type props = sharedProps
 
-  external make: React.componentLike<props, React.element> = "default"
+  external make: React.component<props> = "default"
 }
 
 @@jsxConfig({version: 4, mode: "automatic"})
@@ -75,7 +75,7 @@ module V4A1 = {
 
   let make = ({x, y, _}: props) => React.string(x ++ y)
   let make = {
-    let \"SharedProps$V4A1" = props => make(props)
+    let \"SharedProps$V4A1" = React.component(props => make(props))
 
     \"SharedProps$V4A1"
   }
@@ -86,7 +86,7 @@ module V4A2 = {
 
   let make = ({x, y, _}: props<_>) => React.string(x ++ y)
   let make = {
-    let \"SharedProps$V4A2" = (props: props<_>) => make(props)
+    let \"SharedProps$V4A2" = React.component((props: props<_>) => make(props))
 
     \"SharedProps$V4A2"
   }
@@ -97,7 +97,7 @@ module V4A3 = {
 
   let make = ({x, y, _}: props<_>) => React.string(x ++ y)
   let make = {
-    let \"SharedProps$V4A3" = (props: props<_>) => make(props)
+    let \"SharedProps$V4A3" = React.component((props: props<_>) => make(props))
 
     \"SharedProps$V4A3"
   }
@@ -108,7 +108,7 @@ module V4A4 = {
 
   let make = ({x, y, _}: props) => React.string(x ++ y)
   let make = {
-    let \"SharedProps$V4A4" = props => make(props)
+    let \"SharedProps$V4A4" = React.component(props => make(props))
 
     \"SharedProps$V4A4"
   }
@@ -117,23 +117,23 @@ module V4A4 = {
 module V4A5 = {
   type props = sharedProps<string>
 
-  external make: React.componentLike<props, React.element> = "default"
+  external make: React.component<props> = "default"
 }
 
 module V4A6 = {
   type props<'a> = sharedProps<'a>
 
-  external make: React.componentLike<props<_>, React.element> = "default"
+  external make: React.component<props<_>> = "default"
 }
 
 module V4A7 = {
   type props<'a> = sharedProps<string, 'a>
 
-  external make: React.componentLike<props<_>, React.element> = "default"
+  external make: React.component<props<_>> = "default"
 }
 
 module V4A8 = {
   type props = sharedProps
 
-  external make: React.componentLike<props, React.element> = "default"
+  external make: React.component<props> = "default"
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/sharedProps.resi.txt b/jscomp/syntax/tests/ppx/react/expected/sharedProps.resi.txt
index e87f202e9f..3deabcfbe3 100644
--- a/jscomp/syntax/tests/ppx/react/expected/sharedProps.resi.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/sharedProps.resi.txt
@@ -3,25 +3,25 @@
 module V4C1: {
   type props = sharedProps<string>
 
-  let make: React.componentLike<props, React.element>
+  let make: React.component<props>
 }
 
 module V4C2: {
   type props<'a> = sharedProps<'a>
 
-  let make: React.componentLike<props<_>, React.element>
+  let make: React.component<props<_>>
 }
 
 module V4C3: {
   type props<'a> = sharedProps<string, 'a>
 
-  let make: React.componentLike<props<_>, React.element>
+  let make: React.component<props<_>>
 }
 
 module V4C4: {
   type props = sharedProps
 
-  let make: React.componentLike<props, React.element>
+  let make: React.component<props>
 }
 
 @@jsxConfig({version: 4, mode: "automatic"})
@@ -29,23 +29,23 @@ module V4C4: {
 module V4A1: {
   type props = sharedProps<string>
 
-  let make: React.componentLike<props, React.element>
+  let make: React.component<props>
 }
 
 module V4A2: {
   type props<'a> = sharedProps<'a>
 
-  let make: React.componentLike<props<_>, React.element>
+  let make: React.component<props<_>>
 }
 
 module V4A3: {
   type props<'a> = sharedProps<string, 'a>
 
-  let make: React.componentLike<props<_>, React.element>
+  let make: React.component<props<_>>
 }
 
 module V4A4: {
   type props = sharedProps
 
-  let make: React.componentLike<props, React.element>
+  let make: React.component<props>
 }
diff --git a/jscomp/syntax/tests/ppx/react/expected/topLevel.res.txt b/jscomp/syntax/tests/ppx/react/expected/topLevel.res.txt
index 36e60aed27..4b9b4c61ca 100644
--- a/jscomp/syntax/tests/ppx/react/expected/topLevel.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/topLevel.res.txt
@@ -29,7 +29,7 @@ module V4C = {
     ReactDOM.createDOMElementVariadic("div", [])
   }
   let make = {
-    let \"TopLevel$V4C" = (props: props<_>) => make(props)
+    let \"TopLevel$V4C" = React.component((props: props<_>) => make(props))
 
     \"TopLevel$V4C"
   }
@@ -45,7 +45,7 @@ module V4A = {
     ReactDOM.jsx("div", {})
   }
   let make = {
-    let \"TopLevel$V4A" = (props: props<_>) => make(props)
+    let \"TopLevel$V4A" = React.component((props: props<_>) => make(props))
 
     \"TopLevel$V4A"
   }
diff --git a/jscomp/syntax/tests/ppx/react/expected/typeConstraint.res.txt b/jscomp/syntax/tests/ppx/react/expected/typeConstraint.res.txt
index 9cb9635324..6ce2296613 100644
--- a/jscomp/syntax/tests/ppx/react/expected/typeConstraint.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/typeConstraint.res.txt
@@ -21,7 +21,7 @@ module V4C = {
 
   let make = (type a, {a, b, _}: props<_, _>) => ReactDOM.createDOMElementVariadic("div", [])
   let make = {
-    let \"TypeConstraint$V4C" = (props: props<_>) => make(props)
+    let \"TypeConstraint$V4C" = React.component((props: props<_>) => make(props))
 
     \"TypeConstraint$V4C"
   }
@@ -34,7 +34,7 @@ module V4A = {
 
   let make = (type a, {a, b, _}: props<_, _>) => ReactDOM.jsx("div", {})
   let make = {
-    let \"TypeConstraint$V4A" = (props: props<_>) => make(props)
+    let \"TypeConstraint$V4A" = React.component((props: props<_>) => make(props))
 
     \"TypeConstraint$V4A"
   }
diff --git a/jscomp/syntax/tests/ppx/react/expected/uncurriedProps.res.txt b/jscomp/syntax/tests/ppx/react/expected/uncurriedProps.res.txt
index a08fc2170a..ca72a2ae59 100644
--- a/jscomp/syntax/tests/ppx/react/expected/uncurriedProps.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/uncurriedProps.res.txt
@@ -10,7 +10,7 @@ let make = ({a: ?__a, _}: props<(. unit) => unit>) => {
   React.null
 }
 let make = {
-  let \"UncurriedProps" = (props: props<_>) => make(props)
+  let \"UncurriedProps" = React.component((props: props<_>) => make(props))
 
   \"UncurriedProps"
 }
@@ -39,7 +39,7 @@ module Foo = {
     }
   }
   let make = {
-    let \"UncurriedProps$Foo" = (props: props<_>) => make(props)
+    let \"UncurriedProps$Foo" = React.component((props: props<_>) => make(props))
 
     \"UncurriedProps$Foo"
   }
@@ -50,7 +50,7 @@ module Bar = {
 
   let make = (_: props) => React.jsx(Foo.make, {callback: (. _, _, _) => ()})
   let make = {
-    let \"UncurriedProps$Bar" = props => make(props)
+    let \"UncurriedProps$Bar" = React.component(props => make(props))
 
     \"UncurriedProps$Bar"
   }
diff --git a/jscomp/syntax/tests/ppx/react/expected/v4.res.txt b/jscomp/syntax/tests/ppx/react/expected/v4.res.txt
index 0a548c9021..0b0d6ed37a 100644
--- a/jscomp/syntax/tests/ppx/react/expected/v4.res.txt
+++ b/jscomp/syntax/tests/ppx/react/expected/v4.res.txt
@@ -1,7 +1,7 @@
 type props<'x, 'y> = {x: 'x, y: 'y} // Component with type constraint
 let make = ({x, y, _}: props<string, string>) => React.string(x ++ y)
 let make = {
-  let \"V4" = (props: props<_>) => make(props)
+  let \"V4" = React.component((props: props<_>) => make(props))
   \"V4"
 }
 
@@ -11,7 +11,7 @@ module AnotherName = {
 
   let anotherName = ({x, _}: props<_>) => React.string(x)
   let anotherName = {
-    let \"V4$AnotherName$anotherName" = (props: props<_>) => anotherName(props)
+    let \"V4$AnotherName$anotherName" = React.component((props: props<_>) => anotherName(props))
 
     \"V4$AnotherName$anotherName"
   }
@@ -22,7 +22,7 @@ module Uncurried = {
 
   let make = ({x, _}: props<_>) => React.string(x)
   let make = {
-    let \"V4$Uncurried" = (props: props<_>) => make(props)
+    let \"V4$Uncurried" = React.component((props: props<_>) => make(props))
 
     \"V4$Uncurried"
   }
@@ -31,19 +31,19 @@ module Uncurried = {
 module type TUncurried = {
   type props<'x> = {x: 'x}
 
-  let make: React.componentLike<props<string>, React.element>
+  let make: React.component<props<string>>
 }
 
 module E = {
   type props<'x> = {x: 'x}
 
-  external make: React.componentLike<props<string>, React.element> = "default"
+  external make: React.component<props<string>> = "default"
 }
 
 module EUncurried = {
   type props<'x> = {x: 'x}
 
-  external make: React.componentLike<props<string>, React.element> = "default"
+  external make: React.component<props<string>> = "default"
 }
 
 module Rec = {
@@ -55,7 +55,7 @@ module Rec = {
       make(({}: props))
     }
     let make = {
-      let \"V4$Rec" = props => \"make$Internal"(props)
+      let \"V4$Rec" = React.component(props => \"make$Internal"(props))
 
       \"V4$Rec"
     }
@@ -72,7 +72,7 @@ module Rec1 = {
       React.null
     }
     let make = {
-      let \"V4$Rec1" = props => \"make$Internal"(props)
+      let \"V4$Rec1" = React.component(props => \"make$Internal"(props))
 
       \"V4$Rec1"
     }
@@ -89,7 +89,7 @@ module Rec2 = {
       mm(({}: props))
     }
     let make = {
-      let \"V4$Rec2" = props => \"make$Internal"(props)
+      let \"V4$Rec2" = React.component(props => \"make$Internal"(props))
 
       \"V4$Rec2"
     }
diff --git a/jscomp/test/UncurriedAlways.js b/jscomp/test/UncurriedAlways.js
index bb951912f0..f30d04ae45 100644
--- a/jscomp/test/UncurriedAlways.js
+++ b/jscomp/test/UncurriedAlways.js
@@ -44,10 +44,6 @@ function bar3(__x) {
   return foo3(__x, 3, 4);
 }
 
-function q(param) {
-  return null;
-}
-
 function inl() {
   
 }
@@ -216,7 +212,6 @@ exports.foo2 = foo2;
 exports.bar2 = bar2;
 exports.foo3 = foo3;
 exports.bar3 = bar3;
-exports.q = q;
 exports.inl = inl;
 exports.inl2 = inl2;
 exports.AllLabels = AllLabels;
diff --git a/jscomp/test/UncurriedAlways.res b/jscomp/test/UncurriedAlways.res
index a8872f689e..092f3ccff5 100644
--- a/jscomp/test/UncurriedAlways.res
+++ b/jscomp/test/UncurriedAlways.res
@@ -24,8 +24,8 @@ let bar2: _ => _ = foo2(_, 3)
 let foo3 = (x, y, z) => x + y + z
 let bar3: _ => _ = foo3(_, 3, 4)
 
-type cmp = Jsx.component<int>
-let q: cmp = _ => Jsx.null // Check that subtyping works past type definitions
+// type cmp = Jsx.component<int>
+// let q: cmp = _ => Jsx.null // Check that subtyping works past type definitions
 
 @inline
 let inl = () => ()
diff --git a/jscomp/test/alias_default_value_test.res b/jscomp/test/alias_default_value_test.res
index 5bdeda0728..b01f50c45e 100644
--- a/jscomp/test/alias_default_value_test.res
+++ b/jscomp/test/alias_default_value_test.res
@@ -25,7 +25,7 @@ module C2 = {
 
 module C3 = {
   @react.component
-  let make = (~priority as _, ~text="Test") => React.string(text)
+  let make = (~priority as _:string, ~text="Test") => React.string(text)
 }
 
 module C4 = {
@@ -41,5 +41,5 @@ module C6 = {
   }
 
   @react.component
-  let make = (~comp as module(Comp: Comp), ~x as (a, b)) => Comp.xx
+  let make = (~comp as module(Comp: Comp), ~x as (a, b): (string, string)) => React.int(Comp.xx)
 }
diff --git a/jscomp/test/build.ninja b/jscomp/test/build.ninja
index 4a790f83d9..5c0e26ec69 100644
--- a/jscomp/test/build.ninja
+++ b/jscomp/test/build.ninja
@@ -539,7 +539,7 @@ o test/record_type_spread.cmi test/record_type_spread.cmj : cc test/record_type_
 o test/record_with_test.cmi test/record_with_test.cmj : cc test/record_with_test.res | test/mt.cmj $bsc $stdlib runtime
 o test/recursive_module.cmi test/recursive_module.cmj : cc test/recursive_module.res | test/mt.cmj $bsc $stdlib runtime
 o test/recursive_module_test.cmi test/recursive_module_test.cmj : cc test/recursive_module_test.res | test/mt.cmj $bsc $stdlib runtime
-o test/recursive_react_component.cmi test/recursive_react_component.cmj : cc test/recursive_react_component.res | test/react.cmj $bsc $stdlib runtime
+o test/recursive_react_component.cmi test/recursive_react_component.cmj : cc test/recursive_react_component.res | $bsc $stdlib runtime
 o test/recursive_records_test.cmi test/recursive_records_test.cmj : cc test/recursive_records_test.res | test/mt.cmj $bsc $stdlib runtime
 o test/recursive_unbound_module_test.cmi test/recursive_unbound_module_test.cmj : cc test/recursive_unbound_module_test.res | $bsc $stdlib runtime
 o test/regression_print.cmi test/regression_print.cmj : cc test/regression_print.res | $bsc $stdlib runtime
diff --git a/jscomp/test/jsxv4_newtype.js b/jscomp/test/jsxv4_newtype.js
index 89350fee88..44e5052b03 100644
--- a/jscomp/test/jsxv4_newtype.js
+++ b/jscomp/test/jsxv4_newtype.js
@@ -1,6 +1,7 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 'use strict';
 
+let JsxRuntime = require("react/jsx-runtime");
 
 function Jsxv4_newtype$V4A(props) {
   return null;
@@ -10,6 +11,12 @@ let V4A = {
   make: Jsxv4_newtype$V4A
 };
 
+JsxRuntime.jsx(Jsxv4_newtype$V4A, {
+  a: "a",
+  b: [],
+  c: 1
+});
+
 function Jsxv4_newtype$V4A1(props) {
   return null;
 }
@@ -18,6 +25,12 @@ let V4A1 = {
   make: Jsxv4_newtype$V4A1
 };
 
+JsxRuntime.jsx(Jsxv4_newtype$V4A1, {
+  a: "a",
+  b: [0],
+  c: 1
+});
+
 function Jsxv4_newtype$V4A2(props) {
   return null;
 }
@@ -26,16 +39,27 @@ let V4A2 = {
   make: Jsxv4_newtype$V4A2
 };
 
+let M = {};
+
+JsxRuntime.jsx(Jsxv4_newtype$V4A2, {
+  foo: M
+});
+
 function Jsxv4_newtype$V4A3(props) {
-  return props.foo;
+  return null;
 }
 
 let V4A3 = {
   make: Jsxv4_newtype$V4A3
 };
 
+JsxRuntime.jsx(Jsxv4_newtype$V4A3, {
+  foo: M
+});
+
 exports.V4A = V4A;
 exports.V4A1 = V4A1;
 exports.V4A2 = V4A2;
+exports.M = M;
 exports.V4A3 = V4A3;
-/* No side effect */
+/*  Not a pure module */
diff --git a/jscomp/test/jsxv4_newtype.res b/jscomp/test/jsxv4_newtype.res
index 62919a8284..5e56dbca8f 100644
--- a/jscomp/test/jsxv4_newtype.res
+++ b/jscomp/test/jsxv4_newtype.res
@@ -7,11 +7,15 @@ module V4A = {
   let make = (type a, ~a: a, ~b: array<option<[#Foo(a)]>>, ~c: 'a, _) => React.null
 }
 
+let _ = <V4A a="a" b=[] c=1 />
+
 module V4A1 = {
   @react.component
   let make = (type x y, ~a:x, ~b:array<y>, ~c:'a) => React.null
 }
 
+let _ = <V4A1 a="a" b=[0] c=1 />
+
 module type T = {
   type t
 }
@@ -24,10 +28,19 @@ module V4A2 = {
   }
 }
 
+module M = {
+  type t = int
+}
+
+let _ = <V4A2 foo=module(M) />
+
 module V4A3 = {
   @react.component
   let make = (type a, ~foo) => {
     module T = unpack(foo: T with type t = a)
-    foo
+    let _ = foo
+    React.null
   }
 }
+
+let _ = <V4A3 foo=module(M) />
diff --git a/jscomp/test/react.res b/jscomp/test/react.res
index 8038984d14..07cd2db58f 100644
--- a/jscomp/test/react.res
+++ b/jscomp/test/react.res
@@ -10,7 +10,10 @@ external array: array<element> => element = "%identity"
 
 type componentLike<'props, 'return> = 'props => 'return
 
-type component<'props> = componentLike<'props, element>
+type component<'props>
+
+/* this function exists to prepare for making `component` abstract */
+external component: componentLike<'props, element> => component<'props> = "%identity"
 
 @module("react")
 external createElement: (component<'props>, 'props) => element = "createElement"
@@ -22,6 +25,18 @@ external cloneElement: (element, 'props) => element = "cloneElement"
 external createElementVariadic: (component<'props>, 'props, array<element>) => element =
   "createElement"
 
+@module("react/jsx-runtime")
+external jsx: (component<'props>, 'props) => element = "jsx"
+
+@module("react/jsx-runtime")
+external jsxKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsx"
+
+@module("react/jsx-runtime")
+external jsxs: (component<'props>, 'props) => element = "jsxs"
+
+@module("react/jsx-runtime")
+external jsxsKeyed: (component<'props>, 'props, ~key: string=?, @ignore unit) => element = "jsxs"
+
 type ref<'value> = {mutable current: 'value}
 
 module Ref = {
diff --git a/jscomp/test/recursive_react_component.js b/jscomp/test/recursive_react_component.js
index 4753217ff2..d856702bfe 100644
--- a/jscomp/test/recursive_react_component.js
+++ b/jscomp/test/recursive_react_component.js
@@ -1,14 +1,2 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
-'use strict';
-
-let React = require("react");
-
-function make(Props) {
-  let foo = Props.foo;
-  return React.createElement(make, {
-    foo: foo
-  });
-}
-
-exports.make = make;
-/* react Not a pure module */
+/* This output is empty. Its source's type definitions, externals and/or unused code got optimized away. */
diff --git a/jscomp/test/recursive_react_component.res b/jscomp/test/recursive_react_component.res
index 8e2756aa79..a046666483 100644
--- a/jscomp/test/recursive_react_component.res
+++ b/jscomp/test/recursive_react_component.res
@@ -7,5 +7,5 @@
   ],
 })
 
-@react.component
-let rec make = (~foo, ()) => React.createElement(make, makeProps(~foo, ()))
+// @react.component
+// let rec make = (~foo, ()) => React.createElement(make, makeProps(~foo, ()))