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

Phoenix Forum Questions / Help
, ,
1

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?

2

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";
        }
      });
    }
  },
};
3

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");
1 Like
4

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.

1 Like
5

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();
  }
}
2 Likes
6

Perfect explanation. Thank you so much.