Updates, add some todos

Author: NullVoxPopuli

text/1099-renderComponent.md

@@ -133,32 +133,16 @@ The element to render the compnoent into.
 
 The args to pass to the component
 
-### Usage
+### Behaviors
 
-via modifier:
-```gjs
-import { modifier } from 'ember-modifier';
-import { destroy } from '@ember/destroyable';
-import { renderComponent from '@ember/renderer';
-
-const Demo = <template>hi</template>;
-const render = modifier((element) => {
-    let result = renderComponent(Demo, {
-        owner,
-        env: { document: document, isInteractive: true },
-        into: element,
-    });
+TODO: 
+- rendering multiple renderComponent on the page
+  - who creates tracking frames / how do they interop? all of them? are they coordinated?
+- shared reactive state between multiple renderComponents
 
-    return result.destroy();
-});
-
-
-<template>
-    <div {{render}}></div>
-</template>
-```
+### Usage
 
-via `template()`:
+via `template()` in JSBin:
 
 ```html
 <DOCTYPE html>
@@ -181,6 +165,57 @@ via `template()`:
 </html>
 ```
 
+rendering ember in React:
+```jsx
+import { renderComponent } from '@ember/renderer';
+import { template } from "@ember/template-compiler";
+import React, { useEffect, useRef } from 'react';
+
+const GreetingComponent = template(`Hello World`);
+
+const RunOnceComponent = () => {
+    const myRef = useRef(null);
+
+    useEffect(() => {
+        if (myRef.current) {
+            renderComponent(GreetingComponent, {
+                into: myRef.current,
+            });
+        } 
+    }, []); 
+
+    return (
+        <div ref={myRef}></div>
+    );
+};
+
+export default RunOnceComponent;
+```
+
+if we wanted to render ember in ember via modifier (silly):
+```gjs
+import { modifier } from 'ember-modifier';
+import { destroy } from '@ember/destroyable';
+import { renderComponent from '@ember/renderer';
+
+const Demo = <template>hi</template>;
+const render = modifier((element) => {
+    let result = renderComponent(Demo, {
+        owner,
+        env: { document: document, isInteractive: true },
+        into: element,
+    });
+
+    return () => result.destroy();
+});
+
+
+<template>
+    <div {{render}}></div>
+</template>
+```
+
+
 ## How we teach this
 
 `renderComponent` is meant as an integration-enabling API and would not be added to the guides, or need any documentation beyond what would live in source on the function itself.