Trying to understand how phx-update="stream" works along with hooks

sreyansjain

I have a table that uses a hook along with streams.

<tbody id="filterable_data" phx-hook="FilterUpdateDataHook" phx-update="stream">
              <tr :for={{id, b} <- @streams.branches} id={id}>
                <td>{b.idx}</td>
                <td>{b.code}</td>
                <td>{b.name}</td>
                <td>{b.zone}</td>
                <td>{b.region}</td>
</tr>
</tbody>

My understanding is that the updated() lifecycle event of the FilterUpdateDataHook would only get called when the stream (branches) gets updated.

But I see that the updated() life cycle event of the Hook gets called, even if some other assigns in the liveview get updated.

Is this expected behavior. If yes, how can I write a hook that only updates when the stream updates?

5 comments

/phoenix #streams #liveview

0 552 5

2025-09-04 16:16:39 UTC

Showing Posts 1 to 5

Show Best Posts
Show All (oldest first)
Show All (newest first)

sreyansjain

For completeness here is the code for the hook -

Hooks.FilterUpdateDataHook = {
  updated() {
    let filter_text = document
      .getElementById("filter_input")
      .value.toLowerCase()
      .trim();
    console.log("Filter text: ", filter_text);
    if (filter_text != "") {
      rows = document.querySelector("#filterable_data").querySelectorAll("tr");
      rows.forEach((row) => {
        row_text = row.innerText.toLowerCase();
        if (filter_text === "" || row_text.includes(filter_text)) {
          row.style.display = "";
        } else {
          row.style.display = "none";
        }
      });
    }
  },
};

Post #1

garrison

I can’t think of a good answer for this off the top of my head (maybe someone else will chime in), but in the case of the hook you provided everything should be fine because the behavior is idempotent. Right?

If you’re concerned about performance I don’t see it being noticeable unless you have an enormous number of rows there.

BTW, you could just use one selector here:

rows = document.querySelectorAll("#filterable_data tr");

Post #2

sreyansjain

Thanks for the tip.

No, its not a performance concern. The code is indeed idempotent.
But I was just being curious as to why is this happening?

If someone can share some insight, it would be really enlightening. Thanks.

Post #3

steffend

Phoenix Core Team

The reason you see updated called is that for morphdom (which LiveView uses under the hood), the stream element actually changed. When the LiveView renders, the HTML morphdom sees actually does NOT contain the stream elements, because streams are reset after each render. This means that morphdom actually considers the element to be updated and wants to remove the child elements. When it tries to remove them though, LiveView steps in and aborts the removal: phoenix_live_view/assets/js/phoenix_live_view/dom_patch.js at b304ad5e97bfa98d4907afb79f503ccc5dba3cce · phoenixframework/phoenix_live_view · GitHub

You could use a MutationObserver in your hook:

Hooks.FilterUpdateDataHook: {
  mounted() {
    this.observer = new MutationObserver((changes) => {
      // something changed
    });
    this.observer.observe(this.el, { subtree: true, childList: true });
  },
  destroyed() {
    this.observer.disconnect();
  }
}

Post #4