OpenCut-app / OpenCut-app/OpenCut
fix: carousel reInit event listener not removed on unmount (memory leak)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 89.8k
- Forks
- 8.9k
- PR merge metrics
- No merged PRs in 30d
Description
Bug
In apps/web/src/components/ui/carousel.tsx (lines 97–106), the useEffect registers two Embla carousel event listeners but the cleanup function only removes one of them:
React.useEffect(() => {
if (!api) return
onSelect(api)
api.on("reInit", onSelect) // registered
api.on("select", onSelect) // registered
return () => {
// api?.off("reInit", onSelect) ← missing
api?.off("select", onSelect)
}
}, [api, onSelect])
The reInit listener is never unsubscribed, causing it to accumulate in memory on each mount/unmount cycle.
Fix
return () => {
api?.off("reInit", onSelect)
api?.off("select", onSelect)
}
Fix is ready on a fork branch:
https://github.com/josephdscs/OpenCut/tree/fix/carousel-missing-reinit-cleanup
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open apps/web/src/components/ui/carousel.tsx around lines 97–106 and compare the effect cleanup with the two registered Embla listeners. The linked fork branch already contains a proposed fix; done means both listeners are removed on unmount, followed by the project's existing checks.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 30/100