chore: update sn-hello-react (#858)

examples/sn-hello-react/package.json

@@ -18,12 +18,12 @@
     "start": "nebula serve"
   },
   "peerDependencies": {
-    "@nebula.js/stardust": ">=2.8.0"
+    "@nebula.js/stardust": ">=2.12.0"
   },
   "devDependencies": {
-    "@nebula.js/cli": "2.8.0",
-    "@nebula.js/cli-build": "2.8.0",
-    "@nebula.js/cli-serve": "2.8.0",
+    "@nebula.js/cli": "2.12.0",
+    "@nebula.js/cli-build": "2.12.0",
+    "@nebula.js/cli-serve": "2.12.0",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-plugin-import": "2.24.2",

examples/sn-hello-react/src/components/Hello.jsx

@@ -2,6 +2,12 @@ import React from 'react';
 
 import './style.css';
 
-export default function Hello(/* props */) {
-  return <div className="my-unique-class">Hello React</div>;
+export default function Hello(props) {
+  const { layout } = props;
+  return (
+    <div className="my-unique-class">
+      Hello React
+      {layout.title}
+    </div>
+  );
 }

examples/sn-hello-react/src/components/root.jsx

@@ -1,12 +1,14 @@
-import ReactDOM from 'react-dom';
 import React from 'react';
+import { createRoot } from 'react-dom/client';
 
 import Hello from './Hello';
 
 export function render(element, props) {
-  ReactDOM.render(<Hello {...props} />, element);
+  const root = createRoot(element);
+  root.render(<Hello layout={props.layout} />);
+  return root;
 }
 
-export function teardown(element) {
-  ReactDOM.unmountComponentAtNode(element);
+export function teardown(root) {
+  root.unmount();
 }

examples/sn-hello-react/src/index.js

@@ -15,14 +15,12 @@ export default function supernova(/* env */) {
       const el = useElement();
       const layout = useLayout();
 
-      useEffect(
-        () => () => {
-          teardown(el);
-        },
-        []
-      );
-
-      render(el, { layout });
+      useEffect(() => {
+        const root = render(el, { layout });
+        return () => {
+          teardown(root);
+        };
+      }, [layout]);
     },
   };
 }