diff --git a/CHANGELOG.md b/CHANGELOG.md
index 363771ebb4..a48c53672c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,8 @@
 
 #### :house: Internal
 
+- JSX PPX: use `React.component` instead of `React.componentLike` for externals. https://github.com/rescript-lang/rescript/pull/7952
+
 # 12.0.0-rc.1
 
 #### :nail_care: Polish
diff --git a/compiler/syntax/src/jsx_v4.ml b/compiler/syntax/src/jsx_v4.ml
index 8a0f8f058f..6def3993ac 100644
--- a/compiler/syntax/src/jsx_v4.ml
+++ b/compiler/syntax/src/jsx_v4.ml
@@ -990,8 +990,8 @@ let transform_structure_item ~config item =
       (* can't be an arrow because it will defensively uncurry *)
       let new_external_type =
         Ptyp_constr
-          ( {loc = pstr_loc; txt = module_access_name config "componentLike"},
-            [ret_props_type; jsx_element_type config ~loc:pstr_loc] )
+          ( {loc = pstr_loc; txt = module_access_name config "component"},
+            [ret_props_type] )
       in
       let new_structure =
         {
@@ -1079,8 +1079,8 @@ let transform_signature_item ~config item =
       (* can't be an arrow because it will defensively uncurry *)
       let new_external_type =
         Ptyp_constr
-          ( {loc = psig_loc; txt = module_access_name config "componentLike"},
-            [ret_props_type; jsx_element_type config ~loc:psig_loc] )
+          ( {loc = psig_loc; txt = module_access_name config "component"},
+            [ret_props_type] )
       in
       let new_structure =
         {
diff --git a/tests/analysis_tests/tests/src/expected/Jsx2.resi.txt b/tests/analysis_tests/tests/src/expected/Jsx2.resi.txt
index 67d6a5fd6b..c34ab6fca5 100644
--- a/tests/analysis_tests/tests/src/expected/Jsx2.resi.txt
+++ b/tests/analysis_tests/tests/src/expected/Jsx2.resi.txt
@@ -1,5 +1,5 @@
 Hover src/Jsx2.resi 1:4
-{"contents": {"kind": "markdown", "value": "```rescript\nReact.element\n```\n\n---\n\n```\n \n```\n```rescript\ntype React.element = Jsx.element\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22React.res%22%2C0%2C0%5D)\n"}}
+{"contents": {"kind": "markdown", "value": "```rescript\nprops<string>\n```\n\n---\n\n```\n \n```\n```rescript\ntype props<'first> = {first: 'first}\n```\nGo to: [Type definition](command:rescript-vscode.go_to_location?%5B%22Jsx2.resi%22%2C0%2C0%5D)\n"}}
 
 Hover src/Jsx2.resi 4:4
 {"contents": {"kind": "markdown", "value": "```rescript\nint\n```"}}
diff --git a/tests/syntax_tests/data/ppx/react/expected/aliasProps.res.txt b/tests/syntax_tests/data/ppx/react/expected/aliasProps.res.txt
index 9f26b1296b..efb6c9b53d 100644
--- a/tests/syntax_tests/data/ppx/react/expected/aliasProps.res.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/aliasProps.res.txt
@@ -121,7 +121,7 @@ module C6 = {
     @res.jsxComponentProps
     type props = {}
 
-    let make: React.componentLike<props, React.element>
+    let make: React.component<props>
   }
   @res.jsxComponentProps
   type props<'comp, 'x> = {comp: 'comp, x: 'x}
diff --git a/tests/syntax_tests/data/ppx/react/expected/externalWithCustomName.res.txt b/tests/syntax_tests/data/ppx/react/expected/externalWithCustomName.res.txt
index c0ece33e20..9bfbac700a 100644
--- a/tests/syntax_tests/data/ppx/react/expected/externalWithCustomName.res.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/externalWithCustomName.res.txt
@@ -5,7 +5,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/tests/syntax_tests/data/ppx/react/expected/externalWithRef.res.txt b/tests/syntax_tests/data/ppx/react/expected/externalWithRef.res.txt
index cce0f077f0..44a3420fd8 100644
--- a/tests/syntax_tests/data/ppx/react/expected/externalWithRef.res.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/externalWithRef.res.txt
@@ -8,6 +8,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/tests/syntax_tests/data/ppx/react/expected/externalWithTypeVariables.res.txt b/tests/syntax_tests/data/ppx/react/expected/externalWithTypeVariables.res.txt
index 5d0966916d..cbdee83299 100644
--- a/tests/syntax_tests/data/ppx/react/expected/externalWithTypeVariables.res.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/externalWithTypeVariables.res.txt
@@ -8,5 +8,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/tests/syntax_tests/data/ppx/react/expected/firstClassModules.resi.txt b/tests/syntax_tests/data/ppx/react/expected/firstClassModules.resi.txt
index 556f6b9f0e..feabbdaf5f 100644
--- a/tests/syntax_tests/data/ppx/react/expected/firstClassModules.resi.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/firstClassModules.resi.txt
@@ -13,13 +13,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/tests/syntax_tests/data/ppx/react/expected/forwardRef.resi.txt b/tests/syntax_tests/data/ppx/react/expected/forwardRef.resi.txt
index e0a81497aa..82ba473328 100644
--- a/tests/syntax_tests/data/ppx/react/expected/forwardRef.resi.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/forwardRef.resi.txt
@@ -9,17 +9,14 @@ 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: {
     @res.jsxComponentProps
     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>>>>
   }
 }
 
@@ -32,17 +29,14 @@ 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: {
     @res.jsxComponentProps
     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>>>>
   }
 }
 
@@ -57,17 +51,14 @@ 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: {
     @res.jsxComponentProps
     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>>>>
   }
 }
 
@@ -80,16 +71,13 @@ 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: {
     @res.jsxComponentProps
     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/tests/syntax_tests/data/ppx/react/expected/interface.resi.txt b/tests/syntax_tests/data/ppx/react/expected/interface.resi.txt
index 0f045c0beb..633ffa3c00 100644
--- a/tests/syntax_tests/data/ppx/react/expected/interface.resi.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/interface.resi.txt
@@ -1,12 +1,12 @@
 module A: {
   @res.jsxComponentProps
   type props<'x> = {x: 'x}
-  let make: React.componentLike<props<string>, React.element>
+  let make: React.component<props<string>>
 }
 
 module NoProps: {
   @res.jsxComponentProps
   type props = {}
 
-  let make: React.componentLike<props, React.element>
+  let make: React.component<props>
 }
diff --git a/tests/syntax_tests/data/ppx/react/expected/interfaceWithRef.resi.txt b/tests/syntax_tests/data/ppx/react/expected/interfaceWithRef.resi.txt
index c28c75f9d9..7f1895b91c 100644
--- a/tests/syntax_tests/data/ppx/react/expected/interfaceWithRef.resi.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/interfaceWithRef.resi.txt
@@ -1,2 +1,2 @@
 @res.jsxComponentProps 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/tests/syntax_tests/data/ppx/react/expected/mangleKeyword.res.txt b/tests/syntax_tests/data/ppx/react/expected/mangleKeyword.res.txt
index 173a9dd60f..faee40442f 100644
--- a/tests/syntax_tests/data/ppx/react/expected/mangleKeyword.res.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/mangleKeyword.res.txt
@@ -16,7 +16,7 @@ module C4A1 = {
   @res.jsxComponentProps @live
   type props<'T_open, 'T_type> = {@as("open") _open: 'T_open, @as("type") _type: 'T_type}
 
-  external make: React.componentLike<props<string, string>, React.element> = "default"
+  external make: React.component<props<string, string>> = "default"
 }
 
 let c4a0 = React.jsx(C4A0.make, {_open: "x", _type: "t"})
diff --git a/tests/syntax_tests/data/ppx/react/expected/noPropsWithKey.res.txt b/tests/syntax_tests/data/ppx/react/expected/noPropsWithKey.res.txt
index f149c9234e..aa8dc64f35 100644
--- a/tests/syntax_tests/data/ppx/react/expected/noPropsWithKey.res.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/noPropsWithKey.res.txt
@@ -17,7 +17,7 @@ module V4CB = {
   type props = {}
 
   @module("c")
-  external make: React.componentLike<props, React.element> = "component"
+  external make: React.component<props> = "component"
 }
 
 module V4C = {
diff --git a/tests/syntax_tests/data/ppx/react/expected/sharedProps.res.txt b/tests/syntax_tests/data/ppx/react/expected/sharedProps.res.txt
index a24343e61f..83c7a5fb04 100644
--- a/tests/syntax_tests/data/ppx/react/expected/sharedProps.res.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/sharedProps.res.txt
@@ -47,23 +47,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/tests/syntax_tests/data/ppx/react/expected/sharedProps.resi.txt b/tests/syntax_tests/data/ppx/react/expected/sharedProps.resi.txt
index e87f202e9f..3deabcfbe3 100644
--- a/tests/syntax_tests/data/ppx/react/expected/sharedProps.resi.txt
+++ b/tests/syntax_tests/data/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/tests/syntax_tests/data/ppx/react/expected/v4.res.txt b/tests/syntax_tests/data/ppx/react/expected/v4.res.txt
index f229a63e5c..e5f9b37a7a 100644
--- a/tests/syntax_tests/data/ppx/react/expected/v4.res.txt
+++ b/tests/syntax_tests/data/ppx/react/expected/v4.res.txt
@@ -35,21 +35,21 @@ module type TUncurried = {
   @res.jsxComponentProps
   type props<'x> = {x: 'x}
 
-  let make: React.componentLike<props<string>, React.element>
+  let make: React.component<props<string>>
 }
 
 module E = {
   @res.jsxComponentProps @live
   type props<'x> = {x: 'x}
 
-  external make: React.componentLike<props<string>, React.element> = "default"
+  external make: React.component<props<string>> = "default"
 }
 
 module EUncurried = {
   @res.jsxComponentProps @live
   type props<'x> = {x: 'x}
 
-  external make: React.componentLike<props<string>, React.element> = "default"
+  external make: React.component<props<string>> = "default"
 }
 
 module Rec = {