try unmounting react roots for react v18

Author: Judahmeek

Gemfile.lock

@@ -51,7 +51,6 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
-    childprocess (4.1.0)
     codeclimate-test-reporter (1.0.9)
       simplecov (<= 0.13)
     coderay (1.1.3)
@@ -141,10 +140,10 @@ GEM
     regexp_parser (2.6.0)
     rexml (3.2.5)
     rubyzip (2.3.2)
-    selenium-webdriver (4.1.0)
-      childprocess (>= 0.5, < 5.0)
+    selenium-webdriver (4.9.0)
       rexml (~> 3.2, >= 3.2.5)
-      rubyzip (>= 1.2.2)
+      rubyzip (>= 1.2.2, < 3.0)
+      websocket (~> 1.0)
     shellany (0.0.1)
     simplecov (0.13.0)
       docile (~> 1.1.0)
@@ -157,10 +156,7 @@ GEM
     tilt (2.1.0)
     tzinfo (1.2.10)
       thread_safe (~> 0.1)
-    webdrivers (5.2.0)
-      nokogiri (~> 1.6)
-      rubyzip (>= 1.3.0)
-      selenium-webdriver (~> 4.0)
+    websocket (1.2.9)
     xpath (3.2.0)
       nokogiri (~> 1.8)
     zeitwerk (2.6.6)
@@ -185,7 +181,6 @@ DEPENDENCIES
   react-rails!
   selenium-webdriver
   test-unit (~> 2.5)
-  webdrivers
 
 BUNDLED WITH
    2.4.9

react-rails.gemspec

@@ -24,7 +24,6 @@ Gem::Specification.new do |s|
   s.add_development_dependency 'guard-minitest'
   s.add_development_dependency 'jbuilder'
   s.add_development_dependency 'listen', '~> 3.0.0'
-  s.add_development_dependency 'webdrivers'
   s.add_development_dependency 'capybara'
   s.add_development_dependency 'selenium-webdriver'
   s.add_development_dependency 'test-unit', '~> 2.5'

react_ujs/index.js

@@ -30,6 +30,7 @@ var ReactRailsUJS = {
   jQuery: (typeof window !== 'undefined') && (typeof window.jQuery !== 'undefined') && window.jQuery,
 
   components: {},
+  roots: [],
 
   // helper method for the mount and unmount methods to find the
   // `data-react-class` DOM elements
@@ -131,6 +132,7 @@ var ReactRailsUJS = {
         } else {
           const root = createReactRootLike(node)
           component = root.render(component);
+          this.roots.push({"node": node, "root": root}) =  if ReactDOM.createRoot
         }
       }
     }
@@ -143,7 +145,7 @@ var ReactRailsUJS = {
 
     for (var i = 0; i < nodes.length; ++i) {
       var node = nodes[i];
-      ReactDOM.unmountComponentAtNode(node);
+      ReactDOM.createRoot ? this.unmountRoot(node) : ReactDOM.unmountComponentAtNode(node);
     }
   },
 
@@ -155,6 +157,15 @@ var ReactRailsUJS = {
     detectEvents(this)
   },
 
+  unmountRoot: function(node) {
+    var targetRoots = this.roots.filter(function(rootElement) {return rootElement["node"] && (rootElement["node"] === node)})
+    targetRoots.forEach(function(rootElement) {
+      rootElement["root"].unmount();
+      rootElement["root"] = null;
+      rootElement["node"] = null;
+      return undefined;
+    });
+  }
 }
 
 // These stable references are so that handlers can be added and removed:
@@ -170,7 +181,6 @@ ReactRailsUJS.handleUnmount = function(e) {
   if (e && e.target) {
     target = e.target;
   }
-  ReactRailsUJS.unmountComponents(target);
 }
 
 

test/react/server_rendering/bundle_renderer_test.rb

@@ -126,7 +126,6 @@ class BundleRendererTest < ActiveSupport::TestCase
         result = @renderer.render("Todo", { todo: "write tests" }, nil)
 
         assert_match(%r{<li.*write tests</li>}, result)
-        assert_match(/data-reactroot/, result)
       ensure
         Rails.application.config.assets.compile = true