createRoot (replacing render)

[andys8]

React 18 was released. It encourages a switch from render to createRoot to benefit from the new implementation.

• https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
• https://github.com/reactwg/react-18/discussions/5

[andys8]

There is this (different lib): https://pursuit.purescript.org/packages/purescript-react-basic-dom/4.2.0/docs/React.Basic.DOM.Concurrent#v:createRoot

But results in

[andys8]

Cross link: https://github.com/lumihq/purescript-react-basic-dom/issues/42#issue-1289387789

[tellnobody1]

"use strict"

import ReactDOMClient from "react-dom/client"

export const createRoot = container => () => ReactDOMClient.createRoot(container)
export const render = root => reactElement => () => root.render(reactElement)

import Effect (Effect)
import Prelude
import React (ReactElement)
import Web.DOM.Element (Element)

foreign import data Root :: Type
foreign import createRoot :: Element -> Effect Root
foreign import render :: Root -> ReactElement -> Effect Unit

import Data.Maybe (fromJust)
import Partial.Unsafe (unsafePartial)
import React (createLeafElement)
import Web.DOM.NonElementParentNode (getElementById)
import Web.HTML (window)
import Web.HTML.HTMLDocument (toNonElementParentNode)
import Web.HTML.Window (document)

main :: Effect Unit
main = do
  doc <- window >>= document
  container <- getElementById "container" $ toNonElementParentNode doc
  root <- createRoot $ unsafePartial $ fromJust container
  render root $ createLeafElement appClass props

<div id="container"></div>
<script src="index.js"></script>