fix(dialog): keep DialogManagerProvider mounted on first render and stabilize manager identity

Author: MartinCupela

src/components/ChannelList/hooks/useSelectedChannelState.ts

@@ -45,5 +45,5 @@ export function useSelectedChannelState<O>({
     return selector(channel);
   }, [channel, selector]);
 
-  return useSyncExternalStore(subscribe, getSnapshot);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }

src/components/Dialog/__tests__/DialogManagerContext.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { renderToStaticMarkup } from 'react-dom/server';
 import {
   DialogManagerProvider,
   useDialogManager,
@@ -8,6 +9,10 @@ import {
 import '@testing-library/jest-dom';
 import { useDialogIsOpen, useOpenedDialogCount } from '../hooks';
 
+jest.mock('../../../components/Dialog/DialogPortal', () => ({
+  DialogPortalDestination: () => null,
+}));
+
 const TEST_IDS = {
   CLOSE_DIALOG: 'close-dialog',
   DIALOG_COUNT: 'dialog-count',
@@ -90,6 +95,16 @@ describe('DialogManagerContext', () => {
       expect(screen.getByTestId(TEST_IDS.DIALOG_COUNT).textContent).toBe('0');
     });
 
+    it('renders children during SSR when id is provided', () => {
+      const html = renderToStaticMarkup(
+        <DialogManagerProvider id={TEST_MANAGER_ID}>
+          <div>server-rendered-child</div>
+        </DialogManagerProvider>,
+      );
+
+      expect(html).toContain('server-rendered-child');
+    });
+
     it('provides dialog manager to non-child components', () => {
       render(
         <DialogManagerProvider id={MANAGER_1_ID}>

src/context/DialogManagerContext.tsx

@@ -15,19 +15,12 @@ type DialogManagerId = string;
 
 type DialogManagersState = Record<DialogManagerId, DialogManager | undefined>;
 const dialogManagersRegistry: StateStore<DialogManagersState> = new StateStore({});
+const pendingDialogManagersById: Partial<Record<DialogManagerId, DialogManager>> = {};
+const dialogManagerMountCountsById: Partial<Record<DialogManagerId, number>> = {};
 
 const getDialogManager = (id: string): DialogManager | undefined =>
   dialogManagersRegistry.getLatestValue()[id];
 
-const getOrCreateDialogManager = (id: string) => {
-  let manager = getDialogManager(id);
-  if (!manager) {
-    manager = new DialogManager({ id });
-    dialogManagersRegistry.partialNext({ [id]: manager });
-  }
-  return manager;
-};
-
 const removeDialogManager = (id: string) => {
   if (!getDialogManager(id)) return;
   dialogManagersRegistry.partialNext({ [id]: undefined });
@@ -51,23 +44,44 @@ export const DialogManagerProvider = ({
   children,
   id,
 }: PropsWithChildren<{ id?: string }>) => {
-  const [dialogManager, setDialogManager] = useState<DialogManager | null>(() => {
-    if (id) return getDialogManager(id) ?? null;
+  const [dialogManager, setDialogManager] = useState<DialogManager>(() => {
+    if (id) {
+      const manager =
+        getDialogManager(id) ??
+        pendingDialogManagersById[id] ??
+        new DialogManager({ id });
+      pendingDialogManagersById[id] = manager;
+      return manager;
+    }
+
     return new DialogManager(); // will not be included in the registry
   });
 
   useEffect(() => {
     if (!id) return;
-    setDialogManager(getOrCreateDialogManager(id));
+    const manager =
+      getDialogManager(id) ?? pendingDialogManagersById[id] ?? new DialogManager({ id });
+
+    if (!getDialogManager(id)) {
+      dialogManagersRegistry.partialNext({ [id]: manager });
+    }
+    delete pendingDialogManagersById[id];
+
+    setDialogManager((prev) => (prev === manager ? prev : manager));
+    dialogManagerMountCountsById[id] = (dialogManagerMountCountsById[id] ?? 0) + 1;
+
     return () => {
+      const nextMountCount = (dialogManagerMountCountsById[id] ?? 1) - 1;
+      if (nextMountCount > 0) {
+        dialogManagerMountCountsById[id] = nextMountCount;
+        return;
+      }
+
+      delete dialogManagerMountCountsById[id];
       removeDialogManager(id);
-      setDialogManager(null);
     };
   }, [id]);
 
-  // temporarily do not render until a new dialog manager is created
-  if (!dialogManager) return null;
-
   return (
     <DialogManagerProviderContext.Provider value={{ dialogManager }}>
       {children}
@@ -156,7 +170,7 @@ export const useDialogManager = ({
 
         if (!managerInPrevState || managerInNewState?.id !== managerInPrevState.id) {
           setDialogManagerContext((prevState) => {
-            if (prevState?.dialogManager.id === managerInNewState?.id) return prevState;
+            if (prevState?.dialogManager === managerInNewState) return prevState;
             // fixme: need to handle the possibility that the dialogManager is undefined
             return {
               dialogManager:

src/store/hooks/useStateStore.ts

@@ -59,7 +59,11 @@ export function useStateStore<
     };
   }, [store, selector]);
 
-  const state = useSyncExternalStore(wrappedSubscription, wrappedSnapshot);
+  const state = useSyncExternalStore(
+    wrappedSubscription,
+    wrappedSnapshot,
+    wrappedSnapshot,
+  );
 
   return state;
 }