diff --git a/packages.dhall b/packages.dhall
index d6322c23..59908179 100644
--- a/packages.dhall
+++ b/packages.dhall
@@ -1,6 +1,6 @@
 let upstream =
-      https://github.com/purescript/package-sets/releases/download/psc-0.15.4-20220723/packages.dhall
-        sha256:efb50561d50d0bebe01f8e5ab21cda51662cca0f5548392bafc3216953a0ed88
+      https://github.com/purescript/package-sets/releases/download/psc-0.15.4-20220808/packages.dhall
+        sha256:60eee64b04ca0013fae3e02a69fc3b176105c6baa2f31865c67cd5f881a412fd
 
 let overrides = {=}
 
diff --git a/recipes/BookReactHooks/spago.dhall b/recipes/BookReactHooks/spago.dhall
index 952b53b3..7d813d66 100644
--- a/recipes/BookReactHooks/spago.dhall
+++ b/recipes/BookReactHooks/spago.dhall
@@ -10,6 +10,7 @@
   , "react-basic-dom"
   , "react-basic-hooks"
   , "web-html"
+  , "web-dom"
   ]
 , packages = ../../packages.dhall
 , sources = [ "recipes/BookReactHooks/src/**/*.purs" ]
diff --git a/recipes/BookReactHooks/src/Main.purs b/recipes/BookReactHooks/src/Main.purs
index 8078384a..35c6e229 100644
--- a/recipes/BookReactHooks/src/Main.purs
+++ b/recipes/BookReactHooks/src/Main.purs
@@ -9,14 +9,14 @@ import Data.Either (Either(..))
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Hooks (Component, component)
 import React.Basic.Hooks as React
 import React.Basic.Hooks.Aff (useAff)
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 data TextState
@@ -25,15 +25,17 @@ data TextState
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      bookComponent <- mkBookComponent
-      render (bookComponent {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkBookComponent :: Component {}
-mkBookComponent = do
+mkApp :: Component {}
+mkApp = do
   let
     url = "https://elm-lang.org/assets/public-opinion.txt"
   component "Book" \_ -> React.do
diff --git a/recipes/ButtonsReactHooks/spago.dhall b/recipes/ButtonsReactHooks/spago.dhall
index f54a2e32..0e118838 100644
--- a/recipes/ButtonsReactHooks/spago.dhall
+++ b/recipes/ButtonsReactHooks/spago.dhall
@@ -7,6 +7,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/ButtonsReactHooks/src/Main.purs b/recipes/ButtonsReactHooks/src/Main.purs
index b660491a..b989160b 100644
--- a/recipes/ButtonsReactHooks/src/Main.purs
+++ b/recipes/ButtonsReactHooks/src/Main.purs
@@ -5,34 +5,34 @@ import Prelude
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Events (handler_)
 import React.Basic.Hooks (Component, component, useState, (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      buttons <- mkButtons
-      render (buttons {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkButtons :: Component {}
-mkButtons = do
+mkApp :: Component {}
+mkApp =
   component "Buttons" \_ -> React.do
     count /\ setCount <- useState 0
-    let
-      handleClick = handler_ <<< setCount
-    pure
-      $ R.div_
-          [ R.button { onClick: handleClick (_ - 1), children: [ R.text "-" ] }
-          , R.div_ [ R.text (show count) ]
-          , R.button { onClick: handleClick (_ + 1), children: [ R.text "+" ] }
-          ]
+    let handleClick = handler_ <<< setCount
+    pure $ R.div_
+      [ R.button { onClick: handleClick (_ - 1), children: [ R.text "-" ] }
+      , R.div_ [ R.text (show count) ]
+      , R.button { onClick: handleClick (_ + 1), children: [ R.text "+" ] }
+      ]
diff --git a/recipes/CardsReactHooks/spago.dhall b/recipes/CardsReactHooks/spago.dhall
index 7803a897..0906a9a7 100644
--- a/recipes/CardsReactHooks/spago.dhall
+++ b/recipes/CardsReactHooks/spago.dhall
@@ -9,6 +9,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/CardsReactHooks/src/Main.purs b/recipes/CardsReactHooks/src/Main.purs
index 8d9d63f0..b794cc56 100644
--- a/recipes/CardsReactHooks/src/Main.purs
+++ b/recipes/CardsReactHooks/src/Main.purs
@@ -6,46 +6,46 @@ import Data.Array.NonEmpty (cons')
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (css, render)
+import React.Basic.DOM (css)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Events (handler_)
 import React.Basic.Hooks (Component, component, useState, (/\))
 import React.Basic.Hooks as React
 import Test.QuickCheck (mkSeed)
 import Test.QuickCheck.Gen (Gen, elements, runGen)
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      cardsComponent <- mkCardsComponent
-      render (cardsComponent {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkCardsComponent :: Component {}
-mkCardsComponent = do
-  let
-    initialGenState = { newSeed: mkSeed 3, size: 1 }
+mkApp :: Component {}
+mkApp = do
+  let initialGenState = { newSeed: mkSeed 3, size: 1 }
   component "Cards" \_ -> React.do
     -- "Card state" is a tuple of the card and generator state.
     -- We don't need the actual generator state for rendering, so we're ignoring it with `_`.
     (card /\ _) /\ setCardState <- useState (runGen cardGenerator initialGenState)
     let
-      onClick =
-        handler_ do
-          -- Modify the card generator state by re-running the generator.
-          -- We don't need the card value for this update function, so it is ignored with `_`.
-          setCardState \(_ /\ genState) -> runGen cardGenerator genState
-    pure
-      $ R.div_
-          [ R.button { onClick, children: [ R.text "Draw" ] }
-          , R.div { style: css { fontSize: "12em" }, children: [ R.text (viewCard card) ] }
-          ]
+      onClick = handler_ do
+        -- Modify the card generator state by re-running the generator.
+        -- We don't need the card value for this update function, so it is ignored with `_`.
+        setCardState \(_ /\ genState) -> runGen cardGenerator genState
+    pure $ R.div_
+      [ R.button { onClick, children: [ R.text "Draw" ] }
+      , R.div { style: css { fontSize: "12em" }, children: [ R.text (viewCard card) ] }
+      ]
 
 data Card
   = Ace
@@ -63,22 +63,21 @@ data Card
   | King
 
 cardGenerator :: Gen Card
-cardGenerator =
-  elements
-    $ cons' Ace
-        [ Two
-        , Three
-        , Four
-        , Five
-        , Six
-        , Seven
-        , Eight
-        , Nine
-        , Ten
-        , Jack
-        , Queen
-        , King
-        ]
+cardGenerator = elements $
+  cons' Ace
+    [ Two
+    , Three
+    , Four
+    , Five
+    , Six
+    , Seven
+    , Eight
+    , Nine
+    , Ten
+    , Jack
+    , Queen
+    , King
+    ]
 
 viewCard :: Card -> String
 viewCard = case _ of
diff --git a/recipes/CatGifsReactHooks/spago.dhall b/recipes/CatGifsReactHooks/spago.dhall
index 7fcf937f..df2a9d99 100644
--- a/recipes/CatGifsReactHooks/spago.dhall
+++ b/recipes/CatGifsReactHooks/spago.dhall
@@ -12,6 +12,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/CatGifsReactHooks/src/Main.purs b/recipes/CatGifsReactHooks/src/Main.purs
index e3e8e93a..56b04ef8 100644
--- a/recipes/CatGifsReactHooks/src/Main.purs
+++ b/recipes/CatGifsReactHooks/src/Main.purs
@@ -11,16 +11,17 @@ import Data.Maybe (Maybe(..), maybe)
 import Effect (Effect)
 import Effect.Aff (Aff)
 import Effect.Exception (throw)
-import React.Basic.DOM (css, render)
+import React.Basic.DOM (css)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Events (handler_)
 import React.Basic.Hooks (Component, component, (/\))
 import React.Basic.Hooks as React
 import React.Basic.Hooks.Aff (useAff)
 import React.Basic.Hooks.ResetToken (useResetToken)
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 data GifState
@@ -30,20 +31,21 @@ data GifState
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      catGifs <- mkCatGifs
-      render (catGifs {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkCatGifs :: Component {}
-mkCatGifs = do
+mkApp :: Component {}
+mkApp = do
   component "CatGifs" \_ -> React.do
     (resetToken /\ reset) <- useResetToken
     gifState <- toGifState <$> useAff resetToken getRandomCatGif
-    let
-      onClick = handler_ reset
+    let onClick = handler_ reset
     pure
       $ R.div_
           [ R.h2_ [ R.text "Random Cats" ]
@@ -51,12 +53,16 @@ mkCatGifs = do
               Loading -> R.text "Loading..."
               Failure ->
                 R.div_
-                  [ R.text "I could not load a random cat for some reason. "
+                  [ R.text "I could not load a random cat for some reason."
                   , R.button { onClick, children: [ R.text "Try Again!" ] }
                   ]
               Success url ->
                 R.div_
-                  [ R.button { onClick, style: css { display: "block" }, children: [ R.text "More Please!" ] }
+                  [ R.button
+                      { onClick
+                      , style: css { display: "block" }
+                      , children: [ R.text "More Please!" ]
+                      }
                   , R.img { src: url }
                   ]
           ]
@@ -74,4 +80,10 @@ getRandomCatGif = do
   pure do
     -- Using `hush` to ignore the possible error messages
     { body } <- hush response
-    hush (decodeJson body >>= (_ .: "data") >>= (_ .: "images") >>= (_ .: "downsized") >>= (_ .: "url"))
+    hush
+      ( decodeJson body
+          >>= (_ .: "data")
+          >>= (_ .: "images")
+          >>= (_ .: "downsized")
+          >>= (_ .: "url")
+      )
diff --git a/recipes/ClockReactHooks/spago.dhall b/recipes/ClockReactHooks/spago.dhall
index 5ac767d1..27da9a5c 100644
--- a/recipes/ClockReactHooks/spago.dhall
+++ b/recipes/ClockReactHooks/spago.dhall
@@ -10,6 +10,7 @@
   , "prelude"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/ClockReactHooks/src/Main.purs b/recipes/ClockReactHooks/src/Main.purs
index 7a6e033d..693be70b 100644
--- a/recipes/ClockReactHooks/src/Main.purs
+++ b/recipes/ClockReactHooks/src/Main.purs
@@ -10,51 +10,50 @@ import Data.Number (cos, sin, tau)
 import Effect (Effect)
 import Effect.Exception (throw)
 import Effect.Timer (clearInterval, setInterval)
-import React.Basic.DOM (render)
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.DOM.SVG as SVG
 import React.Basic.Hooks (Component, Hook, JSX, UseEffect, UseState, coerceHook, component, useEffectOnce, useState', (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 type Time = { hours :: Number, minutes :: Number, seconds :: Number }
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      clock <- mkClock
-      render (clock {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkClock :: Component {}
-mkClock = do
+mkApp :: Component {}
+mkApp = do
   now <- JSDate.now >>= getTime
   component "Clock" \_ -> React.do
     { hours, minutes, seconds } <- useCurrentTime now
-    pure
-      $ SVG.svg
-          { viewBox: "0 0 400 400"
-          , width: "400"
-          , height: "400"
-          , children:
-              [ SVG.circle { cx: "200", cy: "200", r: "120", fill: "#1293D8" }
-              , hand 6 60.0 (hours / 12.0)
-              , hand 6 90.0 (minutes / 60.0)
-              , hand 3 90.0 (seconds / 60.0)
-              ]
-          }
+    pure $ SVG.svg
+      { viewBox: "0 0 400 400"
+      , width: "400"
+      , height: "400"
+      , children:
+          [ SVG.circle { cx: "200", cy: "200", r: "120", fill: "#1293D8" }
+          , hand 6 60.0 (hours / 12.0)
+          , hand 6 90.0 (minutes / 60.0)
+          , hand 3 90.0 (seconds / 60.0)
+          ]
+      }
 
 hand :: Int -> Number -> Number -> JSX
 hand width length turns =
   let
     t = tau * (turns - 0.25)
-
     x = 200.0 + length * cos t
-
     y = 200.0 + length * sin t
   in
     SVG.line
@@ -69,7 +68,7 @@ hand width length turns =
 
 newtype UseCurrentTime hooks = UseCurrentTime (UseEffect Unit (UseState Time hooks))
 
-derive instance ntUseCurrentTime :: Newtype (UseCurrentTime hooks) _
+derive instance Newtype (UseCurrentTime hooks) _
 
 useCurrentTime :: Time -> Hook UseCurrentTime Time
 useCurrentTime initialTime =
diff --git a/recipes/ComponentsInputReactHooks/spago.dhall b/recipes/ComponentsInputReactHooks/spago.dhall
index af54add0..3e0277c7 100644
--- a/recipes/ComponentsInputReactHooks/spago.dhall
+++ b/recipes/ComponentsInputReactHooks/spago.dhall
@@ -7,6 +7,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/ComponentsInputReactHooks/src/Main.purs b/recipes/ComponentsInputReactHooks/src/Main.purs
index dc8dd8f4..5e8be53e 100644
--- a/recipes/ComponentsInputReactHooks/src/Main.purs
+++ b/recipes/ComponentsInputReactHooks/src/Main.purs
@@ -6,63 +6,57 @@ import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
 import Effect.Unsafe (unsafePerformEffect)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Events (handler_)
-import React.Basic.Hooks
-  ( Component
-  , Render
-  , UseEffect
-  , UseRef
-  , component
-  , readRef
-  , useEffectAlways
-  , useRef
-  , useState
-  , writeRef
-  , (/\)
-  )
+import React.Basic.Hooks (Component, Render, UseEffect, UseRef, component, readRef, useEffectAlways, useRef, useState, writeRef, (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      container <- mkContainer
-      render (container unit) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkContainer :: Component Unit
-mkContainer = do
+mkApp :: Component {}
+mkApp = do
   display <- mkDisplay
   component "Container" \_ -> React.do
     parentRenders <- useRenderCount
     state /\ setState <- useState 0
-    pure
-      $ R.div_
-          [ R.ul_
-              [ display state
-              , display (state * 2)
-              , display (state * 3)
-              , display (state * 10)
-              , display (state * state)
-              ]
-          , R.button
-              { onClick: handler_ (setState (_ + 1))
-              , children: [ R.text "+1" ]
-              }
-          , R.button
-              { onClick: handler_ (setState (_ - 1))
-              , children: [ R.text "-1" ]
-              }
-          , R.p_
-              [ R.text ("Parent has been rendered " <> show parentRenders <> " time(s)") ]
+    pure $ R.div_
+      [ R.ul_
+          [ display state
+          , display (state * 2)
+          , display (state * 3)
+          , display (state * 10)
+          , display (state * state)
+          ]
+      , R.button
+          { onClick: handler_ (setState (_ + 1))
+          , children: [ R.text "+1" ]
+          }
+      , R.button
+          { onClick: handler_ (setState (_ - 1))
+          , children: [ R.text "-1" ]
+          }
+      , R.p_
+          [ R.text
+              ( "Parent has been rendered "
+                  <> show parentRenders
+                  <> " time(s)"
+              )
           ]
+      ]
 
 mkDisplay :: Component Int
 mkDisplay =
@@ -80,6 +74,5 @@ useRenderCount = React.do
     renders <- readRef rendersRef
     writeRef rendersRef (renders + 1)
     pure mempty
-  let
-    renders = unsafePerformEffect (readRef rendersRef)
+  let renders = unsafePerformEffect (readRef rendersRef)
   pure renders
diff --git a/recipes/ComponentsMultiTypeReactHooks/spago.dhall b/recipes/ComponentsMultiTypeReactHooks/spago.dhall
index 345595c0..833f1e1f 100644
--- a/recipes/ComponentsMultiTypeReactHooks/spago.dhall
+++ b/recipes/ComponentsMultiTypeReactHooks/spago.dhall
@@ -8,6 +8,7 @@
   , "react-basic-dom"
   , "react-basic-hooks"
   , "tuples"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/ComponentsMultiTypeReactHooks/src/Main.purs b/recipes/ComponentsMultiTypeReactHooks/src/Main.purs
index 1f930a56..65d59f6e 100644
--- a/recipes/ComponentsMultiTypeReactHooks/src/Main.purs
+++ b/recipes/ComponentsMultiTypeReactHooks/src/Main.purs
@@ -7,44 +7,30 @@ import Data.Tuple (fst)
 import Effect (Effect)
 import Effect.Exception (throw)
 import Effect.Unsafe (unsafePerformEffect)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.DOM.Events (targetValue)
 import React.Basic.Events (EventHandler, handler, handler_)
-import React.Basic.Hooks
-  ( type (/\)
-  , Component
-  , Hook
-  , Render
-  , UseEffect
-  , UseRef
-  , UseState
-  , component
-  , readRef
-  , useEffectAlways
-  , useRef
-  , useState
-  , useState'
-  , writeRef
-  , (/\)
-  )
+import React.Basic.Hooks (type (/\), Component, Hook, Render, UseEffect, UseRef, UseState, component, readRef, useEffectAlways, useRef, useState, useState', writeRef, (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      container <- mkContainer
-      render (container unit) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkContainer :: Component Unit
-mkContainer = do
+mkApp :: Component {}
+mkApp = do
   componentA <- mkComponentA
   componentB <- mkComponentB
   componentC <- mkComponentC
@@ -140,8 +126,7 @@ mkComponentC =
 useInput :: String -> Hook (UseState String) (String /\ EventHandler)
 useInput initialValue = React.do
   state /\ setState <- useState' initialValue
-  let
-    onChange = handler targetValue \t -> setState (fromMaybe "" t)
+  let onChange = handler targetValue \t -> setState (fromMaybe "" t)
   pure (state /\ onChange)
 
 useRenderCount :: forall a. Render a (UseEffect Unit (UseRef Int a)) Int
@@ -151,6 +136,5 @@ useRenderCount = React.do
     renders <- readRef rendersRef
     writeRef rendersRef (renders + 1)
     pure mempty
-  let
-    renders = unsafePerformEffect (readRef rendersRef)
+  let renders = unsafePerformEffect (readRef rendersRef)
   pure renders
diff --git a/recipes/ComponentsReactHooks/spago.dhall b/recipes/ComponentsReactHooks/spago.dhall
index 483bcf6c..936be463 100644
--- a/recipes/ComponentsReactHooks/spago.dhall
+++ b/recipes/ComponentsReactHooks/spago.dhall
@@ -7,6 +7,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/ComponentsReactHooks/src/Main.purs b/recipes/ComponentsReactHooks/src/Main.purs
index 1e41444f..39f58acf 100644
--- a/recipes/ComponentsReactHooks/src/Main.purs
+++ b/recipes/ComponentsReactHooks/src/Main.purs
@@ -6,39 +6,29 @@ import Data.Maybe (Maybe(..), maybe)
 import Effect (Effect)
 import Effect.Exception (throw)
 import Effect.Unsafe (unsafePerformEffect)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Events (EventHandler, handler_)
-import React.Basic.Hooks
-  ( Component
-  , Render
-  , UseEffect
-  , UseRef
-  , component
-  , readRef
-  , useEffectAlways
-  , useRef
-  , useState
-  , writeRef
-  , (/\)
-  )
+import React.Basic.Hooks (Component, Render, UseEffect, UseRef, component, readRef, useEffectAlways, useRef, useState, writeRef, (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      container <- mkContainer
-      render (container unit) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkContainer :: Component Unit
-mkContainer = do
+mkApp :: Component {}
+mkApp = do
   button <- mkButton
   component "Container" \_ -> React.do
     parentRenders <- useRenderCount
@@ -46,10 +36,9 @@ mkContainer = do
     enabled /\ setEnabled <- useState false
     buttonState /\ setButtonState <- useState Nothing
     let
-      handleClick =
-        handler_ do
-          setCount (_ + 1)
-          setEnabled not
+      handleClick = handler_ do
+        setCount (_ + 1)
+        setEnabled not
     pure
       $ R.div_
           [ button { enabled, handleClick }
@@ -72,8 +61,7 @@ mkContainer = do
 mkButton :: Component { enabled :: Boolean, handleClick :: EventHandler }
 mkButton =
   component "Button" \props -> React.do
-    let
-      label = if props.enabled then "On" else "Off"
+    let label = if props.enabled then "On" else "Off"
     pure
       $ R.button
           { title: label
@@ -88,6 +76,5 @@ useRenderCount = React.do
     renders <- readRef rendersRef
     writeRef rendersRef (renders + 1)
     pure mempty
-  let
-    renders = unsafePerformEffect (readRef rendersRef)
+  let renders = unsafePerformEffect (readRef rendersRef)
   pure renders
diff --git a/recipes/DragAndDropReactHooks/spago.dhall b/recipes/DragAndDropReactHooks/spago.dhall
index e21e85fe..8b0782d4 100644
--- a/recipes/DragAndDropReactHooks/spago.dhall
+++ b/recipes/DragAndDropReactHooks/spago.dhall
@@ -9,6 +9,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-file"
   , "web-html"
   ]
diff --git a/recipes/DragAndDropReactHooks/src/Main.purs b/recipes/DragAndDropReactHooks/src/Main.purs
index 90818794..e6c7b6a2 100644
--- a/recipes/DragAndDropReactHooks/src/Main.purs
+++ b/recipes/DragAndDropReactHooks/src/Main.purs
@@ -6,104 +6,108 @@ import Data.Foldable as Foldable
 import Data.Maybe (Maybe(..))
 import Data.Nullable as Nullable
 import Effect (Effect)
-import Effect.Exception as Exception
+import Effect.Exception (throw)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.DOM.Events as DOM.Events
 import React.Basic.Events as Events
 import React.Basic.Hooks (Component, (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.File.File as File
 import Web.File.FileList as FileList
-import Web.HTML as HTML
+import Web.HTML (window)
 import Web.HTML.Event.DataTransfer as DataTransfer
 import Web.HTML.Event.DragEvent as DragEvent
-import Web.HTML.HTMLDocument as HTMLDocument
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.HTMLElement as HTMLElement
 import Web.HTML.HTMLInputElement as HTMLInputElement
-import Web.HTML.Window as Window
+import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  maybeBody <- HTMLDocument.body =<< Window.document =<< HTML.window
-  case maybeBody of
-    Nothing -> Exception.throw "Could not find body."
-    Just body -> do
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
       app <- mkApp
-      R.render (app unit) (HTMLElement.toElement body)
+      renderRoot reactRoot (app {})
 
-mkApp :: Component Unit
-mkApp = do
-  React.component "App" \_ -> React.do
-    hover /\ setHover <- React.useState' false
-    files /\ setFiles <- React.useState []
-    fileInputRef <- React.useRef Nullable.null
-    let
-      onButtonClick =
-        Events.handler_ do
-          maybeNode <- React.readRefMaybe fileInputRef
-          Foldable.for_ (HTMLElement.fromNode =<< maybeNode) \htmlElement -> do
-            HTMLElement.click htmlElement
-    pure
-      $ R.div
-          { style:
-              R.css
-                { display: "flex"
-                , flexDirection: "column"
-                , alignItems: "center"
-                , justifyContent: "center"
-                , margin: "min(8rem, calc(50vh - 6rem)) auto"
-                , borderRadius: "1rem"
-                , inlineSize: "32rem"
-                , blockSize: "12rem"
-                , borderWidth: "0.4rem"
-                , borderStyle: "dashed"
-                , borderColor: if hover then "purple" else "lightgray"
+mkApp :: Component {}
+mkApp = React.component "App" \_ -> React.do
+  hover /\ setHover <- React.useState' false
+  files /\ setFiles <- React.useState []
+  fileInputRef <- React.useRef Nullable.null
+  let
+    onButtonClick =
+      Events.handler_ do
+        maybeNode <- React.readRefMaybe fileInputRef
+        Foldable.for_ (HTMLElement.fromNode =<< maybeNode) \htmlElement -> do
+          HTMLElement.click htmlElement
+  pure
+    $ R.div
+        { style:
+            R.css
+              { display: "flex"
+              , flexDirection: "column"
+              , alignItems: "center"
+              , justifyContent: "center"
+              , margin: "min(8rem, calc(50vh - 6rem)) auto"
+              , borderRadius: "1rem"
+              , inlineSize: "32rem"
+              , blockSize: "12rem"
+              , borderWidth: "0.4rem"
+              , borderStyle: "dashed"
+              , borderColor: if hover then "purple" else "lightgray"
+              }
+        , onDragEnter:
+            Events.handler_ do
+              setHover true
+        , onDragLeave:
+            Events.handler_ do
+              setHover false
+        , onDragOver:
+            Events.handler DOM.Events.preventDefault \_ -> do
+              setHover true
+        , onDrop:
+            Events.handler (DOM.Events.preventDefault >>> DOM.Events.nativeEvent) \e -> do
+              setHover false
+              let
+                maybeFileList = DataTransfer.files
+                  =<< DragEvent.dataTransfer <$> DragEvent.fromEvent e
+              Foldable.for_ (FileList.items <$> maybeFileList) (setFiles <<< (<>))
+        , children:
+            [ R.button
+                { onClick: onButtonClick
+                , children: [ R.text "Upload Images" ]
                 }
-          , onDragEnter:
-              Events.handler_ do
-                setHover true
-          , onDragLeave:
-              Events.handler_ do
-                setHover false
-          , onDragOver:
-              Events.handler DOM.Events.preventDefault \_ -> do
-                setHover true
-          , onDrop:
-              Events.handler (DOM.Events.preventDefault >>> DOM.Events.nativeEvent) \e -> do
-                setHover false
-                let
-                  maybeFileList = DataTransfer.files =<< DragEvent.dataTransfer <$> DragEvent.fromEvent e
-                Foldable.for_ (FileList.items <$> maybeFileList) (setFiles <<< (<>))
-          , children:
-              [ R.button
-                  { onClick: onButtonClick
-                  , children: [ R.text "Upload Images" ]
-                  }
-              , R.input
-                  { ref: fileInputRef
-                  , hidden: true
-                  , type: "file"
-                  , multiple: true
-                  , accept: "image/*"
-                  , onChange:
-                      Events.handler DOM.Events.currentTarget \target ->
-                        Foldable.for_ (HTMLInputElement.fromEventTarget target) \fileInput -> do
-                          maybeFileList <- HTMLInputElement.files fileInput
-                          Foldable.for_ (FileList.items <$> maybeFileList) (setFiles <<< (<>))
-                  }
-              , R.pre
-                  { style:
-                      R.css
-                        { color: "gray"
-                        , whiteSpace: "break-spaces"
-                        , textAlign: "center"
-                        , overflow: "hidden"
-                        , textOverflow: "ellipsis"
-                        , inlineSize: "100%"
-                        }
-                  , children:
-                      [ R.text (show { hover, files: File.name <$> files })
-                      ]
-                  }
-              ]
-          }
+            , R.input
+                { ref: fileInputRef
+                , hidden: true
+                , type: "file"
+                , multiple: true
+                , accept: "image/*"
+                , onChange:
+                    Events.handler DOM.Events.currentTarget \target ->
+                      Foldable.for_ (HTMLInputElement.fromEventTarget target) \fileInput -> do
+                        maybeFileList <- HTMLInputElement.files fileInput
+                        Foldable.for_ (FileList.items <$> maybeFileList) (setFiles <<< (<>))
+                }
+            , R.pre
+                { style:
+                    R.css
+                      { color: "gray"
+                      , whiteSpace: "break-spaces"
+                      , textAlign: "center"
+                      , overflow: "hidden"
+                      , textOverflow: "ellipsis"
+                      , inlineSize: "100%"
+                      }
+                , children:
+                    [ R.text (show { hover, files: File.name <$> files })
+                    ]
+                }
+            ]
+        }
diff --git a/recipes/FileUploadReactHooks/spago.dhall b/recipes/FileUploadReactHooks/spago.dhall
index d6c84a70..e9d655e8 100644
--- a/recipes/FileUploadReactHooks/spago.dhall
+++ b/recipes/FileUploadReactHooks/spago.dhall
@@ -8,6 +8,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-file"
   , "web-html"
   ]
diff --git a/recipes/FileUploadReactHooks/src/Main.purs b/recipes/FileUploadReactHooks/src/Main.purs
index 2a348457..31280ec6 100644
--- a/recipes/FileUploadReactHooks/src/Main.purs
+++ b/recipes/FileUploadReactHooks/src/Main.purs
@@ -6,31 +6,33 @@ import Data.Foldable (for_)
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.DOM.Events (currentTarget)
 import React.Basic.Events (handler)
 import React.Basic.Hooks (Component, component, fragment, useState', (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.File.File as File
 import Web.File.FileList as FileList
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.HTMLInputElement as HTMLInputElement
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      fileUploadComponent <- mkFileUploadComponent
-      render (fileUploadComponent {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkFileUploadComponent :: Component {}
-mkFileUploadComponent = do
+mkApp :: Component {}
+mkApp = do
   component "FileUploadComponent" \_ -> React.do
     fileList /\ setFileList <- useState' []
     let
diff --git a/recipes/FormsReactHooks/spago.dhall b/recipes/FormsReactHooks/spago.dhall
index e45c610a..4b0dba79 100644
--- a/recipes/FormsReactHooks/spago.dhall
+++ b/recipes/FormsReactHooks/spago.dhall
@@ -7,6 +7,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/FormsReactHooks/src/Main.purs b/recipes/FormsReactHooks/src/Main.purs
index 0d5f62aa..2d76cba5 100644
--- a/recipes/FormsReactHooks/src/Main.purs
+++ b/recipes/FormsReactHooks/src/Main.purs
@@ -5,70 +5,67 @@ import Prelude
 import Data.Maybe (Maybe(..), fromMaybe)
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (css, render)
+import React.Basic.DOM (css)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.DOM.Events (preventDefault, targetValue)
 import React.Basic.Events (EventHandler, handler)
 import React.Basic.Hooks (type (/\), Component, Hook, UseState, component, useState, (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      form <- mkForm
-      render (form {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkForm :: Component {}
-mkForm = do
-  component "Form" \_ -> React.do
-    name /\ onNameChange <- useInput ""
-    password /\ onPasswordChange <- useInput ""
-    passwordAgain /\ onPasswordAgainChange <- useInput ""
-    let
-      renderValidation =
-        if password == passwordAgain then
-          R.div { style: css { color: "green" }, children: [ R.text "OK" ] }
-        else
-          R.div { style: css { color: "red" }, children: [ R.text "Passwords do not match!" ] }
-    pure
-      $ R.form
-          { onSubmit: handler preventDefault mempty
-          , children:
-              [ R.input
-                  { placeholder: "Name"
-                  , value: name
-                  , onChange: onNameChange
-                  }
-              , R.input
-                  { type: "password"
-                  , placeholder: "Password"
-                  , value: password
-                  , onChange: onPasswordChange
-                  }
-              , R.input
-                  { type: "password"
-                  , placeholder: "Re-enter Password"
-                  , value: passwordAgain
-                  , onChange: onPasswordAgainChange
-                  }
-              , renderValidation
-              ]
-          }
+mkApp :: Component {}
+mkApp = component "Form" \_ -> React.do
+  name /\ onNameChange <- useInput ""
+  password /\ onPasswordChange <- useInput ""
+  passwordAgain /\ onPasswordAgainChange <- useInput ""
+  let
+    renderValidation =
+      if password == passwordAgain then
+        R.div { style: css { color: "green" }, children: [ R.text "OK" ] }
+      else
+        R.div { style: css { color: "red" }, children: [ R.text "Passwords do not match!" ] }
+  pure
+    $ R.form
+        { onSubmit: handler preventDefault mempty
+        , children:
+            [ R.input
+                { placeholder: "Name"
+                , value: name
+                , onChange: onNameChange
+                }
+            , R.input
+                { type: "password"
+                , placeholder: "Password"
+                , value: password
+                , onChange: onPasswordChange
+                }
+            , R.input
+                { type: "password"
+                , placeholder: "Re-enter Password"
+                , value: passwordAgain
+                , onChange: onPasswordAgainChange
+                }
+            , renderValidation
+            ]
+        }
 
-useInput
-  :: String
-  -> Hook
-       (UseState String)
-       (String /\ EventHandler)
+useInput :: String -> Hook (UseState String) (String /\ EventHandler)
 useInput initialValue = React.do
   value /\ setValue <- useState initialValue
-  let
-    onChange = handler targetValue (setValue <<< const <<< fromMaybe "")
+  let onChange = handler targetValue (setValue <<< const <<< fromMaybe "")
   pure (value /\ onChange)
diff --git a/recipes/GroceriesReactHooks/spago.dhall b/recipes/GroceriesReactHooks/spago.dhall
index 2a8be941..8fb32168 100644
--- a/recipes/GroceriesReactHooks/spago.dhall
+++ b/recipes/GroceriesReactHooks/spago.dhall
@@ -6,6 +6,7 @@
   , "prelude"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/GroceriesReactHooks/src/Main.purs b/recipes/GroceriesReactHooks/src/Main.purs
index 8b54407c..08189b39 100644
--- a/recipes/GroceriesReactHooks/src/Main.purs
+++ b/recipes/GroceriesReactHooks/src/Main.purs
@@ -5,37 +5,39 @@ import Prelude
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (div_, h1_, li_, render, text, ul_)
+import React.Basic.DOM (div_, h1_, li_, text, ul_)
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Hooks (Component, component)
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Root element not found."
-    Just b -> do
-      groceries <- mkGroceries
-      render (groceries {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkGroceries :: Component {}
-mkGroceries = do
-  component "Groceries" \_ -> React.do
-    pure
-      $ div_
-          [ h1_ [ text "My Grocery List" ]
-          , ul_
-              [ li_ [ text "Black Beans" ]
-              , li_ [ text "Limes" ]
-              , li_ [ text "Greek Yogurt" ]
-              , li_ [ text "Cilantro" ]
-              , li_ [ text "Honey" ]
-              , li_ [ text "Sweet Potatoes" ]
-              , li_ [ text "Cumin" ]
-              , li_ [ text "Chili Powder" ]
-              , li_ [ text "Quinoa" ]
-              ]
-          ]
+mkApp :: Component {}
+mkApp = component "Groceries" \_ -> React.do
+  pure
+    $ div_
+        [ h1_ [ text "My Grocery List" ]
+        , ul_
+            [ li_ [ text "Black Beans" ]
+            , li_ [ text "Limes" ]
+            , li_ [ text "Greek Yogurt" ]
+            , li_ [ text "Cilantro" ]
+            , li_ [ text "Honey" ]
+            , li_ [ text "Sweet Potatoes" ]
+            , li_ [ text "Cumin" ]
+            , li_ [ text "Chili Powder" ]
+            , li_ [ text "Quinoa" ]
+            ]
+        ]
diff --git a/recipes/ImagePreviewsReactHooks/spago.dhall b/recipes/ImagePreviewsReactHooks/spago.dhall
index 3a612999..bfe7d52d 100644
--- a/recipes/ImagePreviewsReactHooks/spago.dhall
+++ b/recipes/ImagePreviewsReactHooks/spago.dhall
@@ -11,6 +11,7 @@
   , "react-basic-dom"
   , "react-basic-hooks"
   , "unsafe-coerce"
+  , "web-dom"
   , "web-file"
   , "web-html"
   ]
diff --git a/recipes/ImagePreviewsReactHooks/src/Main.purs b/recipes/ImagePreviewsReactHooks/src/Main.purs
index 9a70ad04..11180560 100644
--- a/recipes/ImagePreviewsReactHooks/src/Main.purs
+++ b/recipes/ImagePreviewsReactHooks/src/Main.purs
@@ -8,37 +8,41 @@ import Data.Maybe (Maybe(..))
 import Data.Nullable as Nullable
 import Data.Traversable as Traversable
 import Effect (Effect)
-import Effect.Exception as Exception
+import Effect.Exception (throw)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.DOM.Events as DOM.Events
 import React.Basic.Events (SyntheticEvent)
 import React.Basic.Events as Events
 import React.Basic.Hooks (Component, (/\))
 import React.Basic.Hooks as React
 import Unsafe.Coerce as Coerce
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.File.File as File
 import Web.File.FileList (FileList)
 import Web.File.FileList as FileList
 import Web.File.Url as Url
-import Web.HTML as HTML
+import Web.HTML (window)
 import Web.HTML.Event.DataTransfer as DataTransfer
 import Web.HTML.Event.DragEvent (DragEvent)
 import Web.HTML.Event.DragEvent as DragEvent
-import Web.HTML.HTMLDocument as HTMLDocument
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.HTMLElement as HTMLElement
 import Web.HTML.HTMLInputElement as HTMLInputElement
-import Web.HTML.Window as Window
+import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  maybeBody <- HTMLDocument.body =<< Window.document =<< HTML.window
-  case maybeBody of
-    Nothing -> Exception.throw "Could not find body."
-    Just body -> do
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
       app <- mkApp
-      R.render (app unit) (HTMLElement.toElement body)
+      renderRoot reactRoot (app {})
 
-mkApp :: Component Unit
+mkApp :: Component {}
 mkApp = do
   image <- mkImage
   React.component "App" \_ -> React.do
@@ -89,8 +93,7 @@ mkApp = do
         , onDrop:
             Events.handler DOM.Events.preventDefault \e -> do
               setHover false
-              let
-                maybeFileList = DataTransfer.files (DragEvent.dataTransfer (toDragEvent e))
+              let maybeFileList = DataTransfer.files (DragEvent.dataTransfer (toDragEvent e))
               handleFiles maybeFileList
         , children:
             [ R.button
@@ -139,8 +142,7 @@ mkImage = do
         , children:
             [ R.img
                 { src: url
-                , style:
-                    R.css { inlineSize: "100%" }
+                , style: R.css { inlineSize: "100%" }
                 }
             ]
         }
diff --git a/recipes/NumbersReactHooks/spago.dhall b/recipes/NumbersReactHooks/spago.dhall
index 03e9c9c9..b3894f10 100644
--- a/recipes/NumbersReactHooks/spago.dhall
+++ b/recipes/NumbersReactHooks/spago.dhall
@@ -8,6 +8,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/NumbersReactHooks/src/Main.purs b/recipes/NumbersReactHooks/src/Main.purs
index 2ca29dba..7e8ee8f1 100644
--- a/recipes/NumbersReactHooks/src/Main.purs
+++ b/recipes/NumbersReactHooks/src/Main.purs
@@ -6,27 +6,29 @@ import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
 import Effect.Random (randomInt)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Events (handler_)
 import React.Basic.Hooks (Component, component, useState', (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      numbers <- mkNumbers
-      render (numbers {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkNumbers :: Component {}
-mkNumbers = do
+mkApp :: Component {}
+mkApp =
   component "Numbers" \_ -> React.do
     roll /\ setRoll <- useState' 1
     let
diff --git a/recipes/PositionsReactHooks/spago.dhall b/recipes/PositionsReactHooks/spago.dhall
index b60a2264..c78c3b82 100644
--- a/recipes/PositionsReactHooks/spago.dhall
+++ b/recipes/PositionsReactHooks/spago.dhall
@@ -8,6 +8,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/PositionsReactHooks/src/Main.purs b/recipes/PositionsReactHooks/src/Main.purs
index fe9f790d..48fad1f8 100644
--- a/recipes/PositionsReactHooks/src/Main.purs
+++ b/recipes/PositionsReactHooks/src/Main.purs
@@ -6,27 +6,30 @@ import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
 import Effect.Random (randomInt)
-import React.Basic.DOM (css, render)
+import React.Basic.DOM (css)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Events (handler_)
 import React.Basic.Hooks (Component, component, useState', (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      positions <- mkPositions
-      render (positions {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkPositions :: Component {}
-mkPositions = do
+mkApp :: Component {}
+mkApp =
   component "Positions" \_ -> React.do
     { x, y } /\ setPosition <- useState' { x: 100, y: 100 }
     let
diff --git a/recipes/RoutingHashReactHooks/spago.dhall b/recipes/RoutingHashReactHooks/spago.dhall
index 1162f128..ff3b9d70 100644
--- a/recipes/RoutingHashReactHooks/spago.dhall
+++ b/recipes/RoutingHashReactHooks/spago.dhall
@@ -11,6 +11,7 @@
   , "react-basic-hooks"
   , "routing"
   , "strings"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/RoutingHashReactHooks/src/Main.purs b/recipes/RoutingHashReactHooks/src/Main.purs
index 87d0b9b7..d3653ce1 100644
--- a/recipes/RoutingHashReactHooks/src/Main.purs
+++ b/recipes/RoutingHashReactHooks/src/Main.purs
@@ -7,31 +7,36 @@ import Data.Foldable as Foldable
 import Data.Maybe (Maybe(..))
 import Data.String as String
 import Effect (Effect)
-import Effect.Exception as Exception
+import Effect.Exception (throw)
 import React.Basic (JSX)
-import React.Basic as R
-import React.Basic.DOM as R
+import React.Basic (fragment) as R
+import React.Basic.DOM (a, h1_, header_, li_, nav_, p_, text, ul_) as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Hooks (Component, (/\))
 import React.Basic.Hooks as React
 import Routing.Hash as Hash
 import Routing.Match (Match)
 import Routing.Match as Match
+import Web.DOM.NonElementParentNode (getElementById)
+import Web.HTML (window)
 import Web.HTML as HTML
-import Web.HTML.HTMLDocument as HTMLDocument
-import Web.HTML.HTMLElement as HTMLElement
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Location as Location
+import Web.HTML.Window (document)
 import Web.HTML.Window as Window
 
 main :: Effect Unit
 main = do
-  maybeBody <- HTMLDocument.body =<< Window.document =<< HTML.window
-  case maybeBody of
-    Nothing -> Exception.throw "Could not find body."
-    Just body -> do
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
       app <- mkApp
-      R.render (app unit) (HTMLElement.toElement body)
+      renderRoot reactRoot (app {})
 
-mkApp :: Component Unit
+mkApp :: Component {}
 mkApp = do
   postIndex <- mkPostIndex
   post <- mkPost
@@ -79,15 +84,14 @@ mkPostIndex =
     pure (R.ul_ postLinks)
   where
   postLinks =
-    Array.range 1 10
-      <#> \n ->
-        R.li_
-          [ R.a
-              { href: "#/posts/" <> show n
-              , children:
-                  [ R.text ("Post " <> show n) ]
-              }
-          ]
+    Array.range 1 10 <#> \n ->
+      R.li_
+        [ R.a
+            { href: "#/posts/" <> show n
+            , children:
+                [ R.text ("Post " <> show n) ]
+            }
+        ]
 
 mkPost :: Component Int
 mkPost =
diff --git a/recipes/RoutingHashReactHooks/web/index.html b/recipes/RoutingHashReactHooks/web/index.html
index 9fb82398..42ee0fdd 100644
--- a/recipes/RoutingHashReactHooks/web/index.html
+++ b/recipes/RoutingHashReactHooks/web/index.html
@@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>RoutingHashReactHooks</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <title>RoutingHashReactHooks</title>
-</head>
-
-<body>
-  <script type="module" src="./index.js"></script>
-</body>
-
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.js"></script>
+  </body>
 </html>
diff --git a/recipes/RoutingPushReactHooks/spago.dhall b/recipes/RoutingPushReactHooks/spago.dhall
index 7f3cb746..f274cc35 100644
--- a/recipes/RoutingPushReactHooks/spago.dhall
+++ b/recipes/RoutingPushReactHooks/spago.dhall
@@ -13,6 +13,7 @@
   , "react-basic-hooks"
   , "routing"
   , "transformers"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/RoutingPushReactHooks/src/Main.purs b/recipes/RoutingPushReactHooks/src/Main.purs
index 67555f96..ba4a6f63 100644
--- a/recipes/RoutingPushReactHooks/src/Main.purs
+++ b/recipes/RoutingPushReactHooks/src/Main.purs
@@ -9,12 +9,13 @@ import Data.Foldable as Foldable
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Class as Effect.Class
-import Effect.Exception as Exception
+import Effect.Exception (throw)
 import Foreign as Foreign
 import Partial.Unsafe as Partial.Unsafe
 import React.Basic (JSX, ReactContext)
 import React.Basic as React.Basic
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.DOM.Events as DOM.Events
 import React.Basic.Events as Events
 import React.Basic.Hooks (Hook, Render, UseContext, (/\))
@@ -23,23 +24,23 @@ import Routing.Match (Match)
 import Routing.Match as Match
 import Routing.PushState (PushStateInterface)
 import Routing.PushState as PushState
-import Web.HTML as HTML
-import Web.HTML.HTMLDocument as HTMLDocument
-import Web.HTML.HTMLElement as HTMLElement
-import Web.HTML.Window as Window
+import Web.DOM.NonElementParentNode (getElementById)
+import Web.HTML (window)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  maybeBody <- HTMLDocument.body =<< Window.document =<< HTML.window
-  case maybeBody of
-    Nothing -> Exception.throw "Could not find body."
-    Just body -> do
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
       routerContext <- mkRouterContext
       routerProvider <- Reader.runReaderT mkRouterProvider routerContext
       app <- Reader.runReaderT mkApp routerContext
-      R.render
-        (routerProvider [ app unit ])
-        (HTMLElement.toElement body)
+      renderRoot reactRoot (routerProvider [ app {} ])
 
 -- | Note that we are not using `React.Basic.Hooks.Component` here, replacing it
 -- | instead with a very similar type, that has some extra "environment"
@@ -56,7 +57,7 @@ component
   -> Component props
 component name render = ReaderT \_ -> React.component name render
 
-mkApp :: Component Unit
+mkApp :: Component {}
 mkApp = do
   routerContext <- Reader.ask
   postIndex <- mkPostIndex
@@ -99,15 +100,14 @@ mkPostIndex = do
   component "PostIndex" \_ ->
     pure do
       R.ul_
-        ( Array.range 1 10
-            <#> \n ->
-              R.li_
-                [ link
-                    { to: "/posts/" <> show n
-                    , children:
-                        [ R.text ("Post " <> show n) ]
-                    }
-                ]
+        ( Array.range 1 10 <#> \n ->
+            R.li_
+              [ link
+                  { to: "/posts/" <> show n
+                  , children:
+                      [ R.text ("Post " <> show n) ]
+                  }
+              ]
         )
 
 mkPost :: Component Int
@@ -203,13 +203,11 @@ mkRouterProvider = do
   routerContext <- Reader.ask
   nav <- Effect.Class.liftEffect PushState.makeInterface
   component "Router" \children -> React.do
-    let
-      routerProvider = React.Basic.provider routerContext
+    let routerProvider = React.Basic.provider routerContext
     route /\ setRoute <- React.useState' (Just Home)
     React.useEffectOnce do
-      nav
-        # PushState.matches appRoute \_ newRoute -> do
-            setRoute newRoute
+      nav # PushState.matches appRoute \_ newRoute -> do
+        setRoute newRoute
     pure (routerProvider (Just { nav, route }) children)
 
 mkLink :: Component { to :: String, children :: Array JSX }
@@ -221,9 +219,7 @@ mkLink = do
       R.a
         { href: to
         , onClick:
-            Events.handler
-              DOM.Events.preventDefault
-              \_ -> do
-                nav.pushState (Foreign.unsafeToForeign unit) to
+            Events.handler DOM.Events.preventDefault \_ -> do
+              nav.pushState (Foreign.unsafeToForeign unit) to
         , children
         }
diff --git a/recipes/RoutingPushReactHooks/web/index.html b/recipes/RoutingPushReactHooks/web/index.html
index 93e06351..98409604 100644
--- a/recipes/RoutingPushReactHooks/web/index.html
+++ b/recipes/RoutingPushReactHooks/web/index.html
@@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>RoutingPushReactHooks</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <title>RoutingPushReactHooks</title>
-</head>
-
-<body>
-  <script type="module" src="./index.js"></script>
-</body>
-
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.js"></script>
+  </body>
 </html>
diff --git a/recipes/ShapesReactHooks/spago.dhall b/recipes/ShapesReactHooks/spago.dhall
index 631e81c5..ba7b685d 100644
--- a/recipes/ShapesReactHooks/spago.dhall
+++ b/recipes/ShapesReactHooks/spago.dhall
@@ -6,6 +6,7 @@
   , "prelude"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/ShapesReactHooks/src/Main.purs b/recipes/ShapesReactHooks/src/Main.purs
index fd51717d..fcddbcaa 100644
--- a/recipes/ShapesReactHooks/src/Main.purs
+++ b/recipes/ShapesReactHooks/src/Main.purs
@@ -5,25 +5,28 @@ import Prelude
 import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (render, text)
+import React.Basic.DOM (text)
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.DOM.SVG as R
 import React.Basic.Hooks (Component, component)
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      shapesComponent <- mkShapesComponent
-      render (shapesComponent unit) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkShapesComponent :: Component Unit
-mkShapesComponent = do
+mkApp :: Component {}
+mkApp =
   component "ShapesComponent" \_ -> React.do
     pure
       $ R.svg
diff --git a/recipes/TextFieldsReactHooks/spago.dhall b/recipes/TextFieldsReactHooks/spago.dhall
index e9fb4db0..ee548b22 100644
--- a/recipes/TextFieldsReactHooks/spago.dhall
+++ b/recipes/TextFieldsReactHooks/spago.dhall
@@ -9,6 +9,7 @@
   , "react-basic-dom"
   , "react-basic-hooks"
   , "strings"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/TextFieldsReactHooks/src/Main.purs b/recipes/TextFieldsReactHooks/src/Main.purs
index 0a9eaf4d..f1ae32a7 100644
--- a/recipes/TextFieldsReactHooks/src/Main.purs
+++ b/recipes/TextFieldsReactHooks/src/Main.purs
@@ -7,37 +7,37 @@ import Data.Maybe (Maybe(..), fromMaybe)
 import Data.String (fromCodePointArray, toCodePointArray)
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.DOM.Events (targetValue)
 import React.Basic.Events (handler)
 import React.Basic.Hooks (Component, component, useState, (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      textField <- mkTextField
-      render (textField {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkTextField :: Component {}
-mkTextField = do
+mkApp :: Component {}
+mkApp =
   component "TextField" \_ -> React.do
     content /\ setContent <- useState ""
-    let
-      onChange = handler targetValue (setContent <<< const <<< fromMaybe "")
-    pure
-      $ R.div_
-          [ R.input { placeholder: "Text to reverse", value: content, onChange }
-          , R.div_ [ R.text (reverse content) ]
-          ]
+    let onChange = handler targetValue (setContent <<< const <<< fromMaybe "")
+    pure $ R.div_
+      [ R.input { placeholder: "Text to reverse", value: content, onChange }
+      , R.div_ [ R.text (reverse content) ]
+      ]
 
 reverse :: String -> String
 reverse = fromCodePointArray <<< Array.reverse <<< toCodePointArray
diff --git a/recipes/TicTacToeReactHooks/spago.dhall b/recipes/TicTacToeReactHooks/spago.dhall
index 5486021b..53166e1c 100644
--- a/recipes/TicTacToeReactHooks/spago.dhall
+++ b/recipes/TicTacToeReactHooks/spago.dhall
@@ -11,6 +11,7 @@
   , "react-basic"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/TicTacToeReactHooks/src/Main.purs b/recipes/TicTacToeReactHooks/src/Main.purs
index 8b80c51b..035d0053 100644
--- a/recipes/TicTacToeReactHooks/src/Main.purs
+++ b/recipes/TicTacToeReactHooks/src/Main.purs
@@ -15,25 +15,27 @@ import Data.Maybe (Maybe(..), fromMaybe, isJust)
 import Data.Show.Generic (genericShow)
 import Effect (Effect)
 import Effect.Exception (throw)
-import React.Basic.DOM (CSS, css, render)
+import React.Basic.DOM (CSS, css)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Events (EventHandler, handler_)
 import React.Basic.Hooks (Component, JSX, Reducer, component, keyed, mkReducer, useReducer, (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      game <- mkGame
-      render (game unit) (toElement b)
-      mempty
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
 mkSquare :: Component { onClick :: EventHandler, value :: Square }
 mkSquare =
@@ -71,8 +73,7 @@ mkBoard
 mkBoard = do
   square <- mkSquare
   component "Board" \props -> React.do
-    let
-      renderSquare i j = square { value: props.squares i j, onClick: props.onClick i j }
+    let renderSquare i j = square { value: props.squares i j, onClick: props.onClick i j }
     pure
       $ R.div_
           [ R.div
@@ -142,8 +143,8 @@ initialState =
   , xIsNext: true
   }
 
-mkGame :: Component Unit
-mkGame = do
+mkApp :: Component {}
+mkApp = do
   board <- mkBoard
   reducer <- reducerFn
   component "Game" \_ -> React.do
@@ -168,7 +169,9 @@ mkGame = do
       moves :: Array JSX
       moves =
         renderMove "Go to start" 0
-          : Array.mapWithIndex (\i _ -> renderMove ("Go to move #" <> show (i + 1)) (i + 1)) (NonEmpty.tail state.history)
+          : Array.mapWithIndex
+              (\i _ -> renderMove ("Go to move #" <> show (i + 1)) (i + 1))
+              (NonEmpty.tail state.history)
 
       status :: String
       status = case calculateWinner current of
@@ -222,13 +225,7 @@ calculateWinner f =
 
 -- These styles could be provided by a proper stylesheet, we are only
 -- defining them here for the sake of compatibility with TryPureScript
-styles
-  :: { list :: CSS
-     , boardRow :: CSS
-     , square :: CSS
-     , game :: CSS
-     , gameInfo :: CSS
-     }
+styles :: { list :: CSS, boardRow :: CSS, square :: CSS, game :: CSS, gameInfo :: CSS }
 styles =
   { list:
       css
diff --git a/recipes/TimeReactHooks/spago.dhall b/recipes/TimeReactHooks/spago.dhall
index 443eeb8c..21220c33 100644
--- a/recipes/TimeReactHooks/spago.dhall
+++ b/recipes/TimeReactHooks/spago.dhall
@@ -11,6 +11,7 @@
   , "prelude"
   , "react-basic-dom"
   , "react-basic-hooks"
+  , "web-dom"
   , "web-html"
   ]
 , packages = ../../packages.dhall
diff --git a/recipes/TimeReactHooks/src/Main.purs b/recipes/TimeReactHooks/src/Main.purs
index 6e2173bb..1e1a3a7f 100644
--- a/recipes/TimeReactHooks/src/Main.purs
+++ b/recipes/TimeReactHooks/src/Main.purs
@@ -11,28 +11,30 @@ import Data.Newtype (class Newtype)
 import Effect (Effect)
 import Effect.Exception (throw)
 import Effect.Timer (clearInterval, setInterval)
-import React.Basic.DOM (render)
 import React.Basic.DOM as R
+import React.Basic.DOM.Client (createRoot, renderRoot)
 import React.Basic.Hooks (Component, Hook, UseEffect, UseState, coerceHook, component, useEffectOnce, useState', (/\))
 import React.Basic.Hooks as React
+import Web.DOM.NonElementParentNode (getElementById)
 import Web.HTML (window)
-import Web.HTML.HTMLDocument (body)
-import Web.HTML.HTMLElement (toElement)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
 import Web.HTML.Window (document)
 
 type Time = { hours :: Int, minutes :: Int, seconds :: Int }
 
 main :: Effect Unit
 main = do
-  body <- body =<< document =<< window
-  case body of
-    Nothing -> throw "Could not find body."
-    Just b -> do
-      time <- mkTime
-      render (time {}) (toElement b)
+  doc <- document =<< window
+  root <- getElementById "root" $ toNonElementParentNode doc
+  case root of
+    Nothing -> throw "Could not find root."
+    Just container -> do
+      reactRoot <- createRoot container
+      app <- mkApp
+      renderRoot reactRoot (app {})
 
-mkTime :: Component {}
-mkTime = do
+mkApp :: Component {}
+mkApp = do
   now <- JSDate.now >>= getTime
   component "Time" \_ -> React.do
     { hours, minutes, seconds } <- useCurrentTime now
@@ -48,7 +50,7 @@ mkTime = do
 
 newtype UseCurrentTime hooks = UseCurrentTime (UseEffect Unit (UseState Time hooks))
 
-derive instance ntUseCurrentTime :: Newtype (UseCurrentTime hooks) _
+derive instance Newtype (UseCurrentTime hooks) _
 
 useCurrentTime :: Time -> Hook UseCurrentTime Time
 useCurrentTime initialTime =