Refactor concurrent api to match the underlying React api

Author: Madeline Trotter

src/React/Basic/DOM/Concurrent.js

@@ -2,6 +2,11 @@
 
 const ReactDOM = require("react-dom");
 const createRoot = ReactDOM.createRoot || ReactDOM.unstable_createRoot;
+const createBlockingRoot =
+  ReactDOM.createBlockingRoot || ReactDOM.unstable_createBlockingRoot;
 
-exports.renderConcurrentMode = (jsx) => (element) => () =>
-  createRoot(element).render(jsx);
+exports.createRoot = (element) => () => createRoot(element);
+
+exports.createBlockingRoot = (element) => () => createBlockingRoot(element);
+
+exports.renderRoot = (root) => (jsx) => () => root.render(jsx);

src/React/Basic/DOM/Concurrent.purs

@@ -7,6 +7,10 @@ import Effect (Effect)
 import React.Basic (JSX)
 import Web.DOM (Element)
 
--- Alternative to `render` which enables React's concurrent mode.
--- This is an unstable and experimental feature. See the React docs for more info.
-foreign import renderConcurrentMode :: JSX -> Element -> Effect Unit
+foreign import data ReactRoot :: Type
+
+foreign import createRoot :: Element -> Effect ReactRoot
+
+foreign import createBlockingRoot :: Element -> Effect ReactRoot
+
+foreign import renderRoot :: ReactRoot -> JSX -> Effect Unit