diff --git a/adhocracy4/comments/static/comments/react_comments.jsx b/adhocracy4/comments/static/comments/react_comments.jsx
index a4efa41a3..6e4335731 100644
--- a/adhocracy4/comments/static/comments/react_comments.jsx
+++ b/adhocracy4/comments/static/comments/react_comments.jsx
@@ -1,9 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import CommentBox from './CommentBox'
 
 module.exports.renderComment = function (el) {
   const props = JSON.parse(el.getAttribute('data-attributes'))
-  ReactDOM.render(<CommentBox {...props} />, el)
+  const root = createRoot(el)
+  root.render(<CommentBox {...props} />)
 }
diff --git a/adhocracy4/comments_async/static/comments_async/index.jsx b/adhocracy4/comments_async/static/comments_async/index.jsx
index 24ba97ac2..47f736741 100644
--- a/adhocracy4/comments_async/static/comments_async/index.jsx
+++ b/adhocracy4/comments_async/static/comments_async/index.jsx
@@ -1,9 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import CommentBox from './comment_box'
 
 export function renderComment (el) {
   const props = JSON.parse(el.getAttribute('data-attributes'))
-  ReactDOM.render(<CommentBox {...props} ref={(commentbox) => { window.commentbox = commentbox }} />, el)
+  const root = createRoot(el)
+  root.render(<CommentBox {...props} ref={(commentbox) => { window.commentbox = commentbox }} />)
 }
diff --git a/adhocracy4/follows/static/follows/react_follows.jsx b/adhocracy4/follows/static/follows/react_follows.jsx
index 4c2be2385..b461c5030 100644
--- a/adhocracy4/follows/static/follows/react_follows.jsx
+++ b/adhocracy4/follows/static/follows/react_follows.jsx
@@ -1,8 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
+
 import FollowButton from './FollowButton'
 
 module.exports.renderFollow = function (el) {
   const project = el.getAttribute('data-project')
-  ReactDOM.render(<FollowButton project={project} />, el)
+  const root = createRoot(el)
+  root.render(<FollowButton project={project} />)
 }
diff --git a/adhocracy4/polls/assets/react_polls.jsx b/adhocracy4/polls/assets/react_polls.jsx
index 87978c685..1876b493d 100644
--- a/adhocracy4/polls/assets/react_polls.jsx
+++ b/adhocracy4/polls/assets/react_polls.jsx
@@ -1,12 +1,14 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
+
 import { EditPollQuestions } from './EditPollQuestions'
 import PollQuestions from './PollQuestions'
 
 module.exports.renderPolls = function (element) {
   const pollId = element.getAttribute('data-poll-id')
-
-  ReactDOM.render(<PollQuestions pollId={pollId} />, element)
+  const container = element
+  const root = createRoot(container)
+  root.render(<PollQuestions pollId={pollId} />)
 }
 
 module.exports.renderPollManagement = function (element) {
@@ -14,5 +16,6 @@ module.exports.renderPollManagement = function (element) {
 
   const reloadOnSuccess = JSON.parse(element.getAttribute('data-reloadOnSuccess'))
 
-  ReactDOM.render(<EditPollQuestions pollId={pollId} reloadOnSuccess={reloadOnSuccess} />, element)
+  const root = createRoot(element)
+  root.render(<EditPollQuestions pollId={pollId} reloadOnSuccess={reloadOnSuccess} />)
 }
diff --git a/adhocracy4/ratings/static/ratings/react_ratings.jsx b/adhocracy4/ratings/static/ratings/react_ratings.jsx
index 7af19414d..5bf4be192 100644
--- a/adhocracy4/ratings/static/ratings/react_ratings.jsx
+++ b/adhocracy4/ratings/static/ratings/react_ratings.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import classnames from 'classnames'
 import django from 'django'
 
@@ -152,5 +152,7 @@ module.exports.RatingBox = RatingBox
 
 module.exports.renderRatings = function (el) {
   const props = JSON.parse(el.getAttribute('data-attributes'))
-  ReactDOM.render(<RatingBox {...props} />, el)
+
+  const root = createRoot(el)
+  root.render(<RatingBox {...props} />)
 }
diff --git a/adhocracy4/reports/static/reports/react_reports.jsx b/adhocracy4/reports/static/reports/react_reports.jsx
index 16e437d87..05d8cb869 100644
--- a/adhocracy4/reports/static/reports/react_reports.jsx
+++ b/adhocracy4/reports/static/reports/react_reports.jsx
@@ -1,6 +1,6 @@
 import django from 'django'
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import ReportModal from './ReportModal'
 
@@ -15,13 +15,13 @@ module.exports.renderReports = function (el) {
   const container = document.createElement('div')
   document.body.appendChild(container)
 
-  ReactDOM.render((
+  const root = createRoot(container)
+  root.render(
     <ReportModal
       name={props.modalName}
       title={django.gettext('You want to report this content? Your message will be sent to the moderation. The moderation will look at the reported content. The content will be deleted if it does not meet our discussion rules (netiquette).')}
       btnStyle="cta"
       objectId={props.objectId}
       contentType={props.contentType}
-    />
-  ), container)
+    />)
 }