fix: prevent unnecessary re-renders of existing overlays with memo

.changeset/forty-apes-decide.md

@@ -0,0 +1,20 @@
+---
+"overlay-kit": patch
+---
+
+fix: prevent unnecessary re-renders of existing overlays with memo
+
+Prevent unnecessary re-renders of existing overlays when new overlays are opened, improving performance.
+
+### Key Changes
+
+- **Added React.memo**: Applied memo to overlay controller component to prevent re-renders when props haven't changed
+- **Integrated state management**: Streamlined state management by integrating it directly into the component and removing redundant prop passing
+
+### Performance Improvements
+
+- Eliminated unnecessary re-renders of existing overlays when adding new overlays in multi-overlay scenarios
+- Provides more predictable and maintainable state management flow
+- Maintained existing API compatibility while optimizing internal performance
+
+This change maintains backward compatibility and provides performance improvements without requiring any code changes from users. 

packages/src/context/provider/content-overlay-controller.tsx

@@ -1,4 +1,5 @@
-import { type FC, useEffect, useRef } from 'react';
+import { type FC, useEffect, type ActionDispatch, memo } from 'react';
+import { type OverlayReducerAction } from '../reducer';
 
 type OverlayControllerProps = {
   overlayId: string;
@@ -16,40 +17,26 @@ export type OverlayAsyncControllerComponent<T> = FC<OverlayAsyncControllerProps<
 
 type ContentOverlayControllerProps = {
   isOpen: boolean;
-  current: string | null;
   overlayId: string;
-  onMounted: () => void;
-  onCloseModal: () => void;
-  onExitModal: () => void;
+  overlayDispatch: ActionDispatch<[action: OverlayReducerAction]>;
   controller: OverlayControllerComponent;
 };
 
-export function ContentOverlayController({
-  isOpen,
-  current,
-  overlayId,
-  onMounted,
-  onCloseModal,
-  onExitModal,
-  controller: Controller,
-}: ContentOverlayControllerProps) {
-  const prevCurrent = useRef(current);
-  const onMountedRef = useRef(onMounted);
-
-  /**
-   * @description Executes when closing and reopening an overlay without unmounting.
-   */
-  if (prevCurrent.current !== current) {
-    prevCurrent.current = current;
-
-    if (current === overlayId) {
-      onMountedRef.current();
-    }
+export const ContentOverlayController = memo(
+  ({ isOpen, overlayId, overlayDispatch, controller: Controller }: ContentOverlayControllerProps) => {
+    useEffect(() => {
+      requestAnimationFrame(() => {
+        overlayDispatch({ type: 'OPEN', overlayId });
+      });
+    }, [overlayDispatch, overlayId]);
+
+    return (
+      <Controller
+        overlayId={overlayId}
+        isOpen={isOpen}
+        close={() => overlayDispatch({ type: 'CLOSE', overlayId })}
+        unmount={() => overlayDispatch({ type: 'REMOVE', overlayId })}
+      />
+    );
   }
-
-  useEffect(() => {
-    onMountedRef.current();
-  }, []);
-
-  return <Controller overlayId={overlayId} isOpen={isOpen} close={onCloseModal} unmount={onExitModal} />;
-}
+);

packages/src/context/provider/index.tsx

@@ -64,15 +64,8 @@ export function createOverlayProvider() {
             <ContentOverlayController
               key={componentKey}
               isOpen={isOpen}
-              current={overlayState.current}
               overlayId={currentOverlayId}
-              onMounted={() => {
-                requestAnimationFrame(() => {
-                  overlayDispatch({ type: 'OPEN', overlayId: currentOverlayId });
-                });
-              }}
-              onCloseModal={() => overlay.close(currentOverlayId)}
-              onExitModal={() => overlay.unmount(currentOverlayId)}
+              overlayDispatch={overlayDispatch}
               controller={currentController}
             />
           );

packages/src/context/reducer.ts

@@ -20,7 +20,7 @@ export type OverlayData = {
   overlayData: Record<OverlayId, OverlayItem>;
 };
 
-type OverlayReducerAction =
+export type OverlayReducerAction =
   | { type: 'ADD'; overlay: OverlayItem }
   | { type: 'OPEN'; overlayId: string }
   | { type: 'CLOSE'; overlayId: string }