sreyansjain

sreyansjain

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

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?

Marked As Solved

steffend

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

Also Liked

garrison

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");
sreyansjain

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.

Where Next?

Popular in Questions Top

vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
Kurisu
For example for a current url like http://localhost:4000/cosmetic/products?_utf8=✓&amp;query=perfume&amp;page=2, I would like to get: ...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
jaysoifer
Is there a way to rollback a specific migration and only that one (“skipping” all the other ones)? Would mix ecto.rollback -v 200809061...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New

Other popular topics Top

TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 41989 114
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
Patoshizzle
After calling mix ecto.create I get this error: 17:00:32.162 [error] GenServer #PID&lt;0.412.0&gt; terminating ** (Postgrex.Error) FATAL...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39467 209
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
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
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New

Latest on Elixir Forum

We're in Beta

About us Mission Statement