diff --git a/packages/react-renderer/src/index.tsx b/packages/react-renderer/src/index.tsx
index 00fbb56b..7c320825 100644
--- a/packages/react-renderer/src/index.tsx
+++ b/packages/react-renderer/src/index.tsx
@@ -4,11 +4,10 @@ import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
-Renderer.render(
+Renderer.createRoot(document.getElementById('root')).render(
- ,
- document.getElementById('root')
+
);
// If you want to start measuring performance in your app, pass a function
diff --git a/packages/react-renderer/src/renderer/index.ts b/packages/react-renderer/src/renderer/index.ts
index c3ecc0c9..d5b0f85b 100644
--- a/packages/react-renderer/src/renderer/index.ts
+++ b/packages/react-renderer/src/renderer/index.ts
@@ -1,16 +1,20 @@
import type { ReactElement } from 'react';
import Reconciler from './reconciler';
-import type { Container } from './types';
+import type { Container, OpaqueRoot } from './types';
const Renderer = {
- render: (
- element: ReactElement,
+ createRoot: (
container: Container | null,
callback?: Function
- ) => {
+ ): OpaqueRoot => {
if (container) {
const root = Reconciler.createContainer(container, 0, false, null);
- Reconciler.updateContainer(element, root, null);
+
+ root.render = function (element: ReactElement) {
+ Reconciler.updateContainer(element, this, null);
+ };
+
+ return root;
}
},
};
diff --git a/packages/react-renderer/src/renderer/types.ts b/packages/react-renderer/src/renderer/types.ts
index 082fdb80..b7b16a62 100644
--- a/packages/react-renderer/src/renderer/types.ts
+++ b/packages/react-renderer/src/renderer/types.ts
@@ -1,5 +1,9 @@
import type { HTMLProps } from 'react';
-import type { HostConfig as _HostConfig, OpaqueHandle } from 'react-reconciler';
+import type {
+ HostConfig as _HostConfig,
+ OpaqueHandle,
+ OpaqueRoot,
+} from 'react-reconciler';
type Type = string;
type Props = HTMLProps;
@@ -50,6 +54,7 @@ export type {
_ChildSet,
TimeoutHandle,
NoTimeout,
- OpaqueHandle,
HostConfig,
+ OpaqueHandle,
+ OpaqueRoot,
};