mortenlund

mortenlund

LiveView - Live Component - unmount callback

Hi!
I would like to suggest a new callback in the lifecycle of the Live Component which is unmount.

Sometimes it is nice to be able to cleanup subscriptions and such when the component is removed from the page.

An example is a “chat” component I made that subscribes to PubSub.
The component is used in a page with tabs and is only present in one of the tabs.
Being able to unsubscribe from the PubSub in the same way the subscription was made in mount would be very nice.

Most Liked

LostKobrakai

LostKobrakai

How would you decide if a message received for being subscribed to pubsub is meant to be forwarded to the live component? Those messages are in arbitrary shape and don’t include any hint if the source for the subscription might be a child live component or the live view itself. It could even be that both are subscribed to the same pubsub.

LostKobrakai

LostKobrakai

Tbh I think the issue here is that you use a LiveComponent to subscribe to PubSub in the first place. Given LiveComponents are indeed not processes you’re essentially leaking a subscription onto the parent LiveView as a sideeffect, which then materializes by the fact that you cannot clean that up anymore. I agree that this is a limitation to what a LiveComponent can encapsulate, but imo the solution isn’t an unmount callback. Even with that there would still be no handle_info callback as well, so you’re still dependant on the parent LV.

mortenlund

mortenlund

I very much agree on this!

I have another suggestion to allow PubSub to send events directly to the LiveComponent since this is the same way LiveComponent allready gets its message when using send_update.
Then the LiveComponent could be able to use PubSub without involving the parent LiveView.

This could then call update/2 in the same way send_update allready does this :slight_smile:

The way I solve the handle_info in the parent today is to use Phoenix.LiveView.attach_hook/4 function and then use send_update to forward it to the component :slight_smile:
I attach the hook by defining a hook/1 function in my component that is called from the LiveView.mount function :slight_smile:

Where Next?

Popular in Proposals: Ideas Top

moacirbishopcamata
Good morning to the Elixir team. Please excuse me if I’m commenting in the wrong place; please indicate where I should discuss this. I ...
New
andypearson
Hey all, I have been working on some performance improvements for the Phoenix application I work on. As part of this, through trial and...
New
New
zachdaniel
Something we do in various Ash packages is provide routes that the user forwards to in their own application. This is because we are deri...
New
Flo0807
Hello everyone! Phoenix LiveView v0.18 introduced the special attributes :let, :for and :if. In addition to the :if special attribute, I...
New
dkuku
This is a proposal to make the map key mismatch errors a bit better: Every time I have a typo It’s very challenging for me even when I u...
New
superchris
Currently there is no out of the box way to support DOM Custom Events in phoenix. I’ve created a separate library to do this, but I’d lov...
New
mxgrn
As one edits a Phoenix LiveView form in a modal, it’s very easy to accidentally press ‘Esc’ and lose all the edits. Similar to data-conf...
New
dogweather
Hi Phoenix community! First off, huge thanks for an amazing framework - Phoenix has been a joy to work with. I have a small UX suggestio...
New
munksgaard
I’m copying and pasting this issue from @Terbium-135 here verbatim, because I would be interested in such a feature as well, and because ...
New

Other popular topics Top

albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 52341 488
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
klo
Got a question about when to concat vs. prepending items to list then reversing to achieve appending. So i know lists boil down to [1 | ...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

We're in Beta

About us Mission Statement