Phoenix LiveComponent does not re-render with assigns changed

Phoenix Forum Questions / Help
,
1

New to elixir, phoenix and liveview.
So it maybe silly question but stuck in a few hours.

What I’m trying to do is to update list view according to window resize event.
Everything is fine except, re-rendering. Pasted code below.
Trying to make fake mansonry with chunk.

defmodule VirtualGridComponent do
  use Phoenix.LiveComponent

  def render(assigns) do
    size = get_size(assigns.size)
    chunks = get_chunks(assigns.jjals, size)
    IO.puts("size #{size} #{assigns.size} #{length(chunks)}")

    ~L"""
    <section class="flex flex-row">
      <%= for jjals <- chunks do %>
        <div class="flex flex-col w-<%= div(12, size) %>/12">
          <%= for jjal <- jjals do %>
            <%= live_component @socket, JjalComponent, title: jjal["title"], imageUrl: jjal["imageUrl"] %>
          <% end %>
        </div>
      <% end %>
    </section>
    """
  end

  defp get_size(size) do
    case size do
      :xl -> 4
      :lg -> 4
      :md -> 3
      _ -> 2
    end
  end

  defp get_chunks(list, desired_amount_of_sublists) do
    total_length = length(list)
    chunk_length = Integer.floor_div(total_length, desired_amount_of_sublists)

    list
    |> Enum.chunk(chunk_length)
  end
end

Log printed properly. Accepted :size calculated proper chunk length, chunks are fine.

size 4 lg 4
size 2 sm 2
size 3 md 3
size 4 lg 4

But view is never re-rendered. Did I do something wrong?

2

You’re not using the size from the assigns. That would be @size. Be sure to read the pitfalls of liveview: https://hexdocs.pm/phoenix_live_view/assigns-eex.html#liveeex-pitfalls

2 Likes
3

Oh… Now I understand the concept.
In case someone has same question here’s my changes.

  def update(assigns, socket) do
    size = get_size(assigns.size)
    chunks = get_chunks(assigns.jjals, size)

    {:ok, assign(socket, size: size, chunks: chunks)}
  end

  def render(assigns) do
    ~L"""
    <section class="flex flex-row">
      <%= for jjals <- @chunks do %>
        <div class="flex flex-col w-<%= div(12, @size) %>/12">
          <%= for jjal <- jjals do %>
            <%= live_component @socket, JjalComponent, title: jjal["title"], imageUrl: jjal["imageUrl"] %>
          <% end %>
        </div>
      <% end %>
    </section>
    """
  end