Search code examples
reactjsrescript

How to do ReactDOM.createRoot?

I wrote this code

switch (ReactDOM.querySelector("#myapp")) {
| Some(myapp) => ReactDOM.createRoot(myapp).render(<MyComponent />)
| None => Js.log("we could not find myapp div!"); ()
};

However Rescript compiler complains The value createRoot can't be found in ReactDOM but I am googling and I find that this is the correct way and older ReactDOM.render call raises a warning.

How to solve?

Edit: I tried ReactDOM.Experimental.createRoot(myapp).render(<MyComponent />) but now it says The record field render can't be found.

Solution

  • Support for React@18 has been merged, but not yet released.

    The easiest way to address your question directly might be to just copy these bindings directly from the unreleased rescript-react source code.

    Alternatively, you could install and try out the latest release candidate, currently 0.11-rc.3. But it also includes other breaking changes related to JSX that might require also using a pre-release version of the compiler. See the release notes for details.

    Finally, you could just wait for 0.11 to be released. And in the meantime either downgrade to React 17, or just ignore the warning. It shouldn't make any functional difference.