docs(client): refine renderer-function teardown examples from PR review

Apply review feedback to the renderer-function teardown docs (PR #3585):

- view-helpers-api.md: rewrite the React 18 teardown example as an explicit
  if/else (no double innerHTML read) and add an `if (!domNode) throw` guard so
  a missing element yields a named-id error instead of a cryptic null deref;
  add the same guard to the React 16/17 example.
- view-helpers-api.md: note that a dropped async teardown is logged via
  console.error (diagnosable, not silent), matching the core ClientRenderer.
- render-functions.md: use react-dom/client's hydrateRoot (with import) to
  match the view-helpers example instead of the invalid ReactDOM.hydrateRoot,
  and clarify the LazyHydrate teardown is only registered after hydration runs.

Docs-only; no behavior change.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: justin808

docs/oss/api-reference/view-helpers-api.md

@@ -118,10 +118,15 @@ import ReactDOMClient from 'react-dom/client';
 // Renderer function: 3 params, mounts itself, returns a teardown.
 const MyRenderer = (props, _railsContext, domNodeId) => {
   const domNode = document.getElementById(domNodeId);
-  const root = domNode.innerHTML
-    ? ReactDOMClient.hydrateRoot(domNode, <MyComponent {...props} />)
-    : ReactDOMClient.createRoot(domNode);
-  if (!domNode.innerHTML) {
+  if (!domNode) {
+    throw new Error(`Missing DOM element with id: ${domNodeId}`);
+  }
+
+  let root;
+  if (domNode.innerHTML) {
+    root = ReactDOMClient.hydrateRoot(domNode, <MyComponent {...props} />);
+  } else {
+    root = ReactDOMClient.createRoot(domNode);
     root.render(<MyComponent {...props} />);
   }
 
@@ -137,13 +142,17 @@ import ReactDOM from 'react-dom';
 
 const MyLegacyRenderer = (props, _railsContext, domNodeId) => {
   const domNode = document.getElementById(domNodeId);
+  if (!domNode) {
+    throw new Error(`Missing DOM element with id: ${domNodeId}`);
+  }
+
   ReactDOM.render(<MyComponent {...props} />, domNode);
   return () => ReactDOM.unmountComponentAtNode(domNode);
 };
 ```
 
 > [!NOTE]
-> Synchronous teardowns are always honored. An **async** teardown is best-effort in the open-source package: if a navigation or node replacement happens before the renderer resolves its teardown, that still-pending teardown may be dropped. React on Rails Pro's client renderer awaits the renderer and handles this race reliably.
+> Synchronous teardowns are always honored. An **async** teardown is best-effort in the open-source package: if a navigation or node replacement happens before the renderer resolves its teardown, that still-pending teardown may be dropped (React on Rails logs a `console.error` when this happens, so the dropped teardown is diagnosable rather than silent). React on Rails Pro's client renderer awaits the renderer and handles this race reliably.
 
 ---
 

docs/oss/core-concepts/render-functions.md

@@ -20,6 +20,8 @@ A few important points about the detection:
 - **`fn.renderFunction = true` is an escape hatch** for render functions that don't need `railsContext` but still want to be treated as render functions (e.g., so they can return a hash). Without the flag, a one-parameter function is classified as a regular React component.
 
 ```jsx
+import ReactDOMClient from 'react-dom/client';
+
 // Regular React Component — 0 or 1 params, renders normally
 const HelloMessage = (props) => <div>Hello {props.name}</div>;
 
@@ -42,10 +44,12 @@ HelloHash.renderFunction = true;
 // Optionally return a teardown (or a promise resolving to one); React on Rails runs it on
 // Turbo/Turbolinks navigation (or same-id node replacement) so the root is unmounted, not leaked.
 const LazyHydrate = (props, railsContext, domNodeId) =>
-  // whenVisible is a hypothetical helper that resolves when the element scrolls into view
+  // whenVisible is a hypothetical helper that resolves when the element scrolls into view.
+  // The teardown is registered only after hydration runs, so navigating away before the element
+  // becomes visible leaves nothing mounted to clean up.
   whenVisible(domNodeId).then(() => {
     const domNode = document.getElementById(domNodeId);
-    const root = ReactDOM.hydrateRoot(domNode, <HelloMessage {...props} />);
+    const root = ReactDOMClient.hydrateRoot(domNode, <HelloMessage {...props} />);
     return () => root.unmount();
   });