Here is a dummy LV that replicates some strange behavior I’m seeing in my production application. As you can see, the app renders a mildly complicated HTML paragraph for every number from 0 to 1,000. It then allows you to filter that list to numbers evenly divisible by a user-entered value. That’s it.
defmodule ReadyroomWeb.Speriment do
use Phoenix.LiveView
def render(assigns) do
use Phoenix.HTML
~L"""
<form id="filter-form" phx-change="filter">
<%= text_input(:filter, :value, value: @filter_value, class: "form-control", placeholder: "filter by", phx_debounce: "100") %>
</form>
<%= for i <- @renderable do %>
<p>The number <b><%= i %></b> is <i>evenly</i> divisible by the <strong>number</strong> <code><%= @filter_value %></code>.<p>Here's a nested paragraph</p><div>This is also nested</div><p></p></p>
<% end %>
"""
end
def mount(_params, _session, socket) do
data = 0..1000
{:ok, assign(socket, filter_value: 1, data: data, renderable: data)}
end
def handle_event("filter", %{"filter" => %{"value" => ""}}, socket) do
handle_event("filter", %{"filter" => %{"value" => "1"}}, socket)
end
def handle_event("filter", %{"filter" => %{"value" => filter}}, socket) do
renderable = Enum.filter(socket.assigns.data, &(rem(&1, String.to_integer(filter)) == 0))
{:noreply, assign(socket, renderable: renderable, filter_value: filter)}
end
end
If you run this, it initially renders very quickly. As you type filters, e.g., 10, 100, 1000, 10000, it continues to render quickly. But as you back over the digits in the filter, making it more and more inclusive, (1000, 100, 10, 1) it renders slower and slower. If you simply delete the filter, changing it from 10000 to 1 or blank, it takes (on my machine) nearly seven seconds to render.
Even more unusual, it slows down appreciably every time I stick a junk tag in the output. That’s what those noisy HTML tags are all about. If, for instance, I add an empty div tag to the beginning of the paragraph, the 7 seconds increases to 22 seconds!
I suspect I am missing something fundamental above LV and Morphdom. Any ideas?
