fix: custom component memory leaks

xiaoluoboding / vue-sonner

🔔 An opinionated toast component for Vue & Nuxt.

https://vue-sonner.robertshaw.id

MIT License

922 stars 45 forks source link

fix: custom component memory leaks #20

Closed wobsoriano closed 1 year ago

wobsoriano commented 1 year ago

This PR fixes custom component usage by:

using markRaw instead of shallowRef so that the component will never be converted to a proxy
emitting close event from the custom component, then the Toast component receives and calls the deleteToast function.

Fixes

Any custom component then can just do $emit('closeToast') and the toast should close. Here's an example:

import { defineComponent, h, markRaw } from 'vue'
import { toast } from 'vue-sonner'

const Custom = defineComponent({
  setup(_props, { emit }) {
    return () =>
      h('button', {
        onClick: () => emit('closeToast')
      }, 'Click me to close')
  }
})

toast(markRaw(Custom))

vercel[bot] commented 1 year ago

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

Name	Status	Preview	Comments	Updated (UTC)
vue-sonner	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 3, 2023 10:07pm

xiaoluoboding commented 1 year ago

LGTM

cjboy76 commented 1 year ago

Hi @wobsoriano , just out of curiosity, what is the major issue that causes memory leaking here? Is it related to shallowRef ?

wobsoriano commented 1 year ago

@cjboy76 For rendering a custom toast, yes. Unlike markRaw, shallowRef still proxies the component.

Not sure about the specifics of why this is happening, though.

ishaiavrahami commented 7 months ago

What is the answer because im STILL getting this error and im running the latest version 1.1.2

toast.custom(markRaw(JobItemWrapper), {
        componentProps: {
          JOB_ID: job.job_id,
        },
        duration: Infinity,
      });

The toast is showing but when i close it using toast.dismiss(0) it returns

Uncaught (in promise) Maximum recursive updates exceeded in component <Toaster>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

Please help me. @wobsoriano @xiaoluoboding @cjboy76

ishaiavrahami commented 4 months ago

@xiaoluoboding any update? its been couple months..