refactor(react): simply render implementations

framework-plugins/react/preview/index.tsx

@@ -57,11 +57,12 @@ export const loadRenderer: RendererLoader = async ({
         return;
       }
       await render(
-        Renderer,
-        getProps({
-          presetGlobalProps: previewableModule.default?.args || {},
-          presetProps: Previewable.args || {},
-        })
+        <Renderer
+          {...getProps({
+            presetGlobalProps: previewableModule.default?.args || {},
+            presetProps: Previewable.args || {},
+          })}
+        />
       );
       if (shouldAbortRender()) {
         return;

framework-plugins/react/preview/render-16.tsx

@@ -1,11 +1,6 @@
-import React from "react";
 import ReactDOM from "react-dom";
 import { rootContainer } from "./root";
 
-export function render(Renderer: React.ComponentType, props: any) {
-  if (!Renderer) {
-    ReactDOM.unmountComponentAtNode(rootContainer);
-    return;
-  }
-  ReactDOM.render(<Renderer {...props} />, rootContainer);
+export function render(node: JSX.Element) {
+  ReactDOM.render(node, rootContainer);
 }

framework-plugins/react/preview/render-18.tsx

@@ -1,19 +1,11 @@
-import React from "react";
 import type { Root } from "react-dom/client";
 import { createRoot } from "react-dom/client";
 import { rootContainer } from "./root";
 
 let root: Root | null = null;
-export function render(Renderer: React.ComponentType, props: any) {
-  if (!Renderer) {
-    if (root) {
-      root.unmount();
-      root = null;
-    }
-    return;
-  }
+export function render(node: JSX.Element) {
   if (!root) {
     root = createRoot(rootContainer);
   }
-  root.render(<Renderer {...props} />);
+  root.render(node);
 }