Enhance ClientRenderer with cleanup and improved startup behavior

- Added functionality to track rendered React roots for proper cleanup on page unload, preventing memory leaks.
- Implemented unmounting logic for both React 16-17 and 18+ using the appropriate APIs.
- Updated client startup behavior to ensure it only runs in the browser environment, improving execution timing and reliability.

These changes enhance the overall performance and memory management of the application.

Author: AbanoubGhadban

packages/react-on-rails/src/ClientRenderer.ts

@@ -1,14 +1,19 @@
 import type { ReactElement } from 'react';
-import type { RegisteredComponent, RailsContext } from './types/index.ts';
+import type { RegisteredComponent, RailsContext, RenderReturnType } from './types/index.ts';
 import ComponentRegistry from './ComponentRegistry.ts';
 import StoreRegistry from './StoreRegistry.ts';
 import createReactOutput from './createReactOutput.ts';
 import reactHydrateOrRender from './reactHydrateOrRender.ts';
 import { getRailsContext } from './context.ts';
 import { isServerRenderHash } from './isServerRenderResult.ts';
+import { onPageUnloaded } from './pageLifecycle.ts';
+import { supportsRootApi, unmountComponentAtNode } from './reactApis.cts';
 
 const REACT_ON_RAILS_STORE_ATTRIBUTE = 'data-js-react-on-rails-store';
 
+// Track all rendered roots for cleanup
+const renderedRoots = new Map<string, { root: RenderReturnType; domNode: Element }>();
+
 function initializeStore(el: Element, railsContext: RailsContext): void {
   const name = el.getAttribute(REACT_ON_RAILS_STORE_ATTRIBUTE) || '';
   const props = el.textContent !== null ? (JSON.parse(el.textContent) as Record<string, unknown>) : {};
@@ -95,7 +100,9 @@ function renderElement(el: Element, railsContext: RailsContext): void {
 You returned a server side type of react-router error: ${JSON.stringify(reactElementOrRouterResult)}
 You should return a React.Component always for the client side entry point.`);
       } else {
-        reactHydrateOrRender(domNode, reactElementOrRouterResult as ReactElement, shouldHydrate);
+        const root = reactHydrateOrRender(domNode, reactElementOrRouterResult as ReactElement, shouldHydrate);
+        // Track the root for cleanup
+        renderedRoots.set(domNodeId, { root, domNode });
       }
     }
   } catch (e: unknown) {
@@ -162,3 +169,27 @@ export function reactOnRailsComponentLoaded(domId: string): Promise<void> {
   renderComponent(domId);
   return Promise.resolve();
 }
+
+/**
+ * Unmount all rendered React components and clear roots.
+ * This should be called on page unload to prevent memory leaks.
+ */
+function unmountAllComponents(): void {
+  renderedRoots.forEach(({ root, domNode }) => {
+    try {
+      if (supportsRootApi && root && typeof root === 'object' && 'unmount' in root) {
+        // React 18+ Root API
+        root.unmount();
+      } else {
+        // React 16-17 legacy API
+        unmountComponentAtNode(domNode);
+      }
+    } catch (error) {
+      console.error('Error unmounting component:', error);
+    }
+  });
+  renderedRoots.clear();
+}
+
+// Register cleanup on page unload
+onPageUnloaded(unmountAllComponents);

packages/react-on-rails/src/ReactOnRails.client.ts

@@ -194,9 +194,11 @@ globalThis.ReactOnRails = {
 
 globalThis.ReactOnRails.resetOptions();
 
-setTimeout(() => {
-  ClientStartup.clientStartup();
-}, 0);
+if (typeof window !== 'undefined') {
+  setTimeout(() => {
+    ClientStartup.clientStartup();
+  }, 0);
+}
 
 export * from './types/index.ts';
 export default globalThis.ReactOnRails;