Phoenix LiveView conditional phx-hook

I assume you can’t toggle hooks via buttons because they are triggered by mount/update.

You could just connect the hook regardless, and have a data-attribute={@condition} on the hook element then check the data-attribute for true or false and run the code based on the outcome.

This doesn’t sound like a bug to me. You said it in your answer, but the hook isn’t going to active because the JS is only activated on mount. Changing id is a possibly lesser known trick to cause a component to remount.

My first instinct was to agree. But what happens if you do this?

<%= if @foo do %>
  <div id="foo" phx-hook="MyHook" />
<% else %>
  <div id="foo" phx-hook="OtherHook" />
<% end %>

Or this?

<%= if @foo do %>
  <div id="foo" phx-hook="MyHook" data-foo="bar" />
<% else %>
  <div id="foo" phx-hook="MyHook" data-hello="world" />
<% end %>

If changing the hook doesn’t remount the hook, then either both of these must trigger remount or neither must. And I’m not sure if either of those options feels correct to me.

Intuitively I would expect the hook to behave like a component, remounting if it has changed (id or phx-hook has changed), which is also clearly what the OP was expecting. Requiring the id to change is violating the declarative behavior of the API and forcing you to write imperative code (to update the id) in order to update the result, which will cause bugs.

Hey fair enough! I’m coming from more of an XY place (without explicitly asking) as I’ve never run into this myself (nor have I ever changed an id).

I believe what’s actually going on here is that hooks (like LiveComponents) are tied to an id for their lifecycle, meaning you could probably “teleport” them anywhere in the page and they would remain intact if you did it in the same render batch. I don’t know exactly how the internals work, but I believe that’s the general idea.

This is distinct from how components work in, say, React, where the mount/unmount lifecycle is tied to the position in the DOM (and a key for dynamic children). TBH the React version is probably strictly superior, though there are some theoretical advantages for the id approach with LiveView since sending things over the wire is so expensive (i.e. you can pick up a whole subtree and move it).

But in the case of hooks this leads to surprising behavior, where changing the hook does not remount it. At least assuming the OP is correct - I have never tried this either. I think this probably could be fixed by detecting a hook has changed for a given id and remounting it, though again I don’t know the internals very well.

alalalalalalalalalalalalala

It’s definitely not a bug though. OP’s issue is that they are just using Mounted and not using Updated.

let liveSocket = new LiveSocket("/live", Socket, {
  longPollFallbackMs: 2500,
  params: { _csrf_token: csrfToken },
  hooks: {
    DemoHook: {
      mounted() {
        console.log("demo hook mounted");
      },
    },
  },
});

The issue is solved in your example and fits perfectly with Liveviews lifecycle already.
The below makes the div code modular, and will always trigger an Updated() diff due to the conditional rendering.

<%= if @foo do %>
  <.live_component module={Component} id={"id"} hook="newHook" />
<% else %>
  <.live_component module={Component} id={"id"} hook="OtherHook" />
<% end %>

  use AppName, :live_component    

  def render(assigns) do  
    ~H"""
      <div id="hook" phx-hook={@hook}>

I will try that but in my example adding an updated callback won’t solve the issue. Neither is fired when I add the hook conditionally

I didn’t mean to imply that updated() would fix your specific example in its current state. From the looks of it, the issue is that you aren’t doing anything that actually effects the DOM in the non working part, but changing the ID in the working part causes the component to remount.

I meant to show how I would do it for the issue you’re trying to solve. I would create a live_component, pass the hook as an attribute as either a string or nil, then conditionally render the components with whatever your ID system is. I don’t know your exact use case, but if you’re toggling hooks on and off then using mounted() and updated() sounds like it makes more sense to me. But again, don’t know the exact use case so I’m assuming based on the toggle button. I may have jumped the gun on suggesting updated() if your plan is to load one or the other rather than toggle between them frequently in the same session. But still, I would make it a conditionally rendered component rather than add conditions to the hook/ids personally.

This is indeed not supported at the moment: Add a warning to the JS Hook documentation for changing phx-hook by Gazler · Pull Request #3509 · phoenixframework/phoenix_live_view · GitHub