Prevent root from being recreated on react 18

Author: diogobeda

react_ujs/index.js

@@ -131,11 +131,8 @@ var ReactRailsUJS = {
         if (hydrate && supportsHydration()) {
           component = reactHydrate(node, component);
         } else {
-          const root = createReactRootLike(node)
+          const root = this.findOrCreateRoot(node);
           component = root.render(component);
-          if(supportsRootApi) {
-            this.roots.push({"node": node, "root": root})
-          }
         }
       }
     }
@@ -164,6 +161,32 @@ var ReactRailsUJS = {
     detectEvents(this)
   },
 
+  findOrCreateRoot: function(node) {
+    var root = this.findRoot(node);
+    if (!root) {
+      root = createReactRootLike(node);
+      if(supportsRootApi) {
+        this.roots.push({"node": node, "root": root})
+      }
+    }
+
+    return root;
+  },
+
+  findRoot: function(node) {
+    if (!supportsRootApi) {
+      return;
+    }
+    var rootElement = this.roots.find(
+      function(rootElement) {
+        return rootElement["node"] && (rootElement["node"] === node)
+      }
+    );
+    if (rootElement) {
+      return rootElement["root"];
+    }
+  },
+
   unmountRoot: function(node) {
     var targetRoots = this.roots.filter(
       function(rootElement) {