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

[jungpaeng]

Description

This PR optimizes overlay controller performance by preventing unnecessary re-renders of existing overlays when new overlays are opened.

The solution integrates React.memo to prevent re-rendering and streamlines state management by integrating it directly into the component.

• Why is this change required? Currently, when a new overlay is opened, all existing overlays re-render unnecessarily, causing performance issues.
• What problem does it solve? Eliminates unnecessary re-renders of existing overlays, improving application performance and user experience.
• Dependencies: No additional dependencies required.

Related Issue: Fixes # (issue_number)

Changes

• Added React.memo to overlay controller component to prevent unnecessary re-renders
• Integrated state management directly into the overlay controller component
• Removed redundant props that were causing unnecessary re-renders
• Updated overlay dispatch logic for opening, closing, and unmounting overlays
• Modified reducer logic to ensure optimal state management flow

Motivation and Context

When multiple overlays are present in the application, opening a new overlay would trigger re-renders of all existing overlays, even though their state and props hadn't changed.

This created performance bottlenecks, especially in applications with multiple overlays.
By adding memo and streamlining the state management, we ensure that overlays only re-render when their specific state changes.

How Has This Been Tested?

• Manually tested opening multiple overlays in sequence to verify existing overlays don't re-render

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Documentation update

Checklist

• I have performed a self-review of my own code.
• My code is commented, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings.
• I have added tests that prove my fix is effective or that my feature works.
• New and existing unit tests pass locally with my changes.
• Any dependent changes have been merged and published in downstream modules.

Further Comments

[changeset-bot]

🦋 Changeset detected

Latest commit: 68a7f41

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
overlay-kit	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
overlay-kit	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 4, 2025 3:44am

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 93.99%. Comparing base (579abaf) to head (68a7f41).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #185      +/-   ##
==========================================
- Coverage   94.21%   93.99%   -0.23%     
==========================================
  Files          12       12              
  Lines         346      333      -13     
  Branches       83       80       -3     
==========================================
- Hits          326      313      -13     
  Misses         19       19              
  Partials        1        1              

Components	Coverage Δ
overlay-kit	93.99% <100.00%> (-0.23%)	⬇️

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.