fix: resolve vimeo player memory leak and unnecessary re-subscriptions

[saseungmin]

• Extract throttleMs from callbackOrThrottle to optimize useEffect dependencies
• Add controller.off() cleanup logic when last listener is removed
• Prevent memory leaks on component unmount

Summary by CodeRabbit

• Bug Fixes

  • Resolved memory leak issues by ensuring all event listeners are properly removed when no longer needed or when the component unmounts.
  • Improved cleanup logic to prevent unnecessary event re-subscriptions and redundant effect executions.

• New Features

  • Added the ability to explicitly remove specific event listeners from the Vimeo player.

• Refactor

  • Optimized event subscription logic for better performance and resource management.

[changeset-bot]

🦋 Changeset detected

Latest commit: ab9d4cb

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

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

[coderabbitai]

Walkthrough

This update addresses memory leak issues and event listener cleanup in the react-native-vimeo-bridge package. It improves event deregistration by adding explicit off methods to player controllers and embedded player scripts, centralizes throttle extraction in hooks, and ensures listeners are properly removed on component unmount or when no longer needed.

Changes

File(s)	Change Summary
.changeset/quiet-bees-happen.md	Documents the patch addressing memory leaks and event cleanup in the package.
src/VimeoView.tsx	Expands the embedded player's destroy method to remove all event listeners before destroying player; adds off method to player commands.
src/hooks/useVimeoEvent.ts	Centralizes throttle extraction outside the effect; updates effect dependencies for more precise reruns.
src/module/VimeoPlayer.ts	Calls controller.off(eventType) when the last listener for an event is removed, ensuring deregistration.
src/module/WebVimeoPlayerController.ts	Adds an off method to remove event listeners from the Vimeo player.
src/module/WebviewVimeoPlayerController.ts	Adds an async off method to command the webview player to stop listening to specific events.

Sequence Diagram(s)

sequenceDiagram
    participant Component
    participant useVimeoEvent
    participant VimeoPlayer
    participant Controller

    Component->>useVimeoEvent: Mounts and subscribes to event
    useVimeoEvent->>VimeoPlayer: subscribe(event, callback)
    VimeoPlayer->>Controller: on(event, callback)

    Component-->>useVimeoEvent: Unmounts or unsubscribes
    useVimeoEvent->>VimeoPlayer: unsubscribe(event, callback)
    VimeoPlayer->>Controller: off(event)

Loading

Poem

In the garden of code, where the vimeo vines grow,
Rabbits found leaks where old listeners flow.
With nimble new methods and careful event calls,
They cleaned up the thickets and patched all the walls.
Now memory’s fresh, and the streams run clear—
Hopping ahead, with no leaks to fear! 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ce5c431 and ab9d4cb.

📒 Files selected for processing (6)

• .changeset/quiet-bees-happen.md (1 hunks)
• src/VimeoView.tsx (1 hunks)
• src/hooks/useVimeoEvent.ts (3 hunks)
• src/module/VimeoPlayer.ts (1 hunks)
• src/module/WebVimeoPlayerController.ts (2 hunks)
• src/module/WebviewVimeoPlayerController.ts (2 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (2)

src/module/WebVimeoPlayerController.ts (1)

src/types/vimeo.ts (1)

• EventCallback (4-4)

src/module/WebviewVimeoPlayerController.ts (1)

src/types/vimeo.ts (1)

• EventCallback (4-4)

🔇 Additional comments (11)

src/module/WebVimeoPlayerController.ts (2)

1-1: LGTM: Import statement correctly updated

The EventCallback type import is properly added to support the new off method signature.

---

155-157: LGTM: Well-implemented event listener cleanup

The off method correctly delegates to the underlying Vimeo player's off method, providing proper event listener cleanup functionality. The optional callback parameter allows for both specific and general event listener removal.

src/module/WebviewVimeoPlayerController.ts (2)

2-2: LGTM: Import statement correctly updated

The EventCallback type import is properly added to support the new off method signature.

---

100-102: LGTM: Proper webview event listener cleanup implementation

The async off method correctly uses executeCommand to communicate with the webview for event listener removal. The underscore prefix on the _callback parameter properly indicates it's intentionally unused, which is appropriate since the webview implementation likely doesn't support callback-specific removal.

src/hooks/useVimeoEvent.ts (3)

56-56: LGTM: Excellent optimization for effect dependencies

Extracting throttleMs outside the effect is a smart optimization that prevents unnecessary re-subscriptions when the callback function reference changes but the throttle value remains the same.

---

77-77: LGTM: Consistent use of extracted throttleMs

The extracted throttleMs variable is used correctly in the throttling logic.

---

90-90: LGTM: Optimized effect dependencies

The effect dependencies are properly updated to include throttleMs instead of callbackOrThrottle, which will reduce unnecessary effect re-runs and improve performance.

src/module/VimeoPlayer.ts (1)

49-49: LGTM: Essential cleanup logic for memory leak prevention

Adding controller?.off(eventType) when the last listener is removed is crucial for proper event listener cleanup. This ensures that the controller stops listening to events when there are no more internal handlers, preventing memory leaks.

.changeset/quiet-bees-happen.md (1)

1-10: LGTM: Comprehensive changeset documentation

The changeset accurately describes the memory leak fixes and performance optimizations implemented in this PR. The summary covers all the key changes: throttleMs extraction, controller cleanup logic, and memory leak prevention.

src/VimeoView.tsx (2)

176-203: Excellent comprehensive event listener cleanup implementation.

The expanded destroy method now properly removes all event listeners before destroying the player, which effectively prevents memory leaks. The cleanup covers all 22 event types that were registered (lines 125-157), ensuring no listeners remain attached after destruction.

This is a textbook example of proper resource cleanup in JavaScript event handling.

---

204-204: Well-designed selective event listener removal capability.

The new off method provides a clean interface for external code to remove specific event listeners when needed, complementing the comprehensive cleanup in the destroy method. This gives users fine-grained control over event subscription management.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[cloudflare-workers-and-pages]

Deploying react-native-vimeo-bridge-example with    Cloudflare Pages

Latest commit:	ab9d4cb
Status:	✅  Deploy successful!
Preview URL:	https://4988d6dc.react-native-vimeo-bridge-example.pages.dev
Branch Preview URL:	https://fix-vimeo-player-memory-leak.react-native-vimeo-bridge-example.pages.dev

View logs