diff --git a/CHANGELOG.md b/CHANGELOG.md
index 32d0e90..a107f00 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 - Tests now uses headless chrome instead of Poltergeist
 - Babel is configured with `babel-preset-env`
+- Updated React syntax to v18
 
 ### Removed
 - Support for `react-hot-loader`. Please look at the README for instructions on how to use `react-hot-loader` 4 with your app, it is much simpler and better!
diff --git a/javascript/webpacker_react-npm-module/src/index.js b/javascript/webpacker_react-npm-module/src/index.js
index e02b81c..873b1df 100644
--- a/javascript/webpacker_react-npm-module/src/index.js
+++ b/javascript/webpacker_react-npm-module/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import intersection from 'lodash/intersection'
 import keys from 'lodash/keys'
 import assign from 'lodash/assign'
@@ -17,8 +17,9 @@ const WebpackerReact = {
     const props = propsJson && JSON.parse(propsJson)
 
     const reactElement = React.createElement(component, props)
+    const root = createRoot(node)
 
-    ReactDOM.render(reactElement, node)
+    root.render(reactElement)
   },
 
   registerComponents(components) {
@@ -34,7 +35,7 @@ const WebpackerReact = {
   unmountComponents() {
     const mounted = document.querySelectorAll(`[${CLASS_ATTRIBUTE_NAME}]`)
     for (let i = 0; i < mounted.length; i += 1) {
-      ReactDOM.unmountComponentAtNode(mounted[i])
+      mounted[i].unmount()
     }
   },