Remounting `phx-hook` when `phx-hook` attribute changes in a view

I have a template with variable phx-hook attribute:

<div phx-hook="<%= @hook %>"></div>

When it changes, the old hook stays around and the new one doesn’t get mounted. I’ve moved the hooks into a “unified” hook which updates the hook in the updated callback, but it might be nice to not have to do that and rely on liveview to tear down the old hook and mount a new one.

We don’t support dynamically changing the hook. What you should do instead is provide a new id to the element when you assign the hook.

3 Likes

Sorry, I don’t understand what id means here, how would that look like in code?

<div id="hook-<%= @hook %>" phx-hook="<%= @hook %>"></div>

Note that all hooks require IDs, and the js console would have been complaining without it :slight_smile:

4 Likes

Hm, I’m on 0.12.1 and there are no warnings in the console, I’ll probably need to “refresh” node_modules.

I didn’t have ids on my phx-hooks either and was not receiving warnings (with liveSocket.enableDebug() and everything…)
(liveview 0.12.1)

I’ve just created a new mix phx.new --live project to showcase another liveview question and there are no warnings either.