add detection for Reacts varying render functions

kylemellander · kylemellander · commit 36364049da14 · 2021-12-15T11:31:08.000-08:00
diff --git a/react_ujs/index.js b/react_ujs/index.js
@@ -111,13 +111,14 @@ var ReactRailsUJS = {
           }
         }
 
-        if (hydrate && typeof ReactDOM.hydrate === "function") {
-          component = ReactDOM.hydrate(component, node);
+        if (hydrate && typeof ReactDOM.hydrateRoot === "function") {
+          component = ReactDOM.hydrateRoot(component, node);
         } else {
-          component = ReactDOM.render(component, node);
+          const root = ReactDOM.createRoot(node)
+          component = root.render(component);
         }
       }
-    } 
+    }
   },
 
   // Within `searchSelector`, find nodes which have React components

Original file line number	Diff line number	Diff line change
`@@ -111,13 +111,14 @@ var ReactRailsUJS = {`
`111`	`111`	`}`
`112`	`112`	`}`
`113`	`113`
`114`		`- if (hydrate && typeof ReactDOM.hydrate === "function") {`
`115`		`- component = ReactDOM.hydrate(component, node);`
	`114`	`+ if (hydrate && typeof ReactDOM.hydrateRoot === "function") {`
	`115`	`+ component = ReactDOM.hydrateRoot(component, node);`
`116`	`116`	`} else {`
`117`		`- component = ReactDOM.render(component, node);`
	`117`	`+ const root = ReactDOM.createRoot(node)`
	`118`	`+ component = root.render(component);`
`118`	`119`	`}`
`119`	`120`	`}`
`120`		`- }`
	`121`	`+ }`
`121`	`122`	`},`
`122`	`123`
`123`	`124`	// Within `searchSelector`, find nodes which have React components