If you already created LiveView pages without this, read this article.
Tags: liveview, elixir, programming, discuss
Published: 2022-08-03 19:14:00

# Greeting

Hello #devElixir!!! Welcome to #FullStackElxpro

Here we discuss strategies and tips for your Elixir learning journey. This is from scratch until your first wave as an elixir developer.

I am Gustavo, and today&amp;#39;s theme is \*\*LiveView Pages\*\*.

**Do you want to learn Elixir in three months? https://elxpro.com/sell**

_ps: You can follow the Article with **[a VIDEO](https://www.youtube.com/watch?v=MEQbfw9OItE)**_

_Want to learn more about Elixir on a Telegram channel?_

https://elxpro.com/subscribe-elxcrew

## What is temporary_assign?

You can read **temporary_assign** on [Elixir Documentation](https://hexdocs.pm/phoenix_live_view/dom-patching.html#temporary-assigns), but for me, it was really hard to understand. I will explain it to you using what is temporary_assign for me, and you can get your conclusion.

For me, **temporary_assign** with **phx-update** is a simpler way to prevent bugs in your LiveView pages when you have lists and possible real-time interactions with your pages, defining the best behavior with your team, product owners, and UX.

## How do I figure that out?

When you are building LiveView pages, you probably just care about getting things done or getting the expected behavior; when you load/reload pages, your list will work normally, and the default behavior is a prepend on the list. But some bugs appear when necessary to update a list, and the elements are the same.

## Why is temporary_assign so important?

It is so straightforward to use and can avoid many future problems. With a couple of lines implemented, you only need to define what is important in your list and what is a possible expected behavior when you update that.

## Why temporary_assign can get consistent LiveView pages.

Because you can only define the expected behavior when new elements come, and if you don`t have this feature, for now, you can prevent kind of a bug in the future with only a few ways to think in your elements when you use **temporary_assign** and **phx-updates**.

## How to use temporary_assign to get consistent LiveView Pages.


### Without temporary_assigns example

If you use temporary_assigns and add new elements to your screen, the default behavior will be prepended and does not matter the ID.

...Live do
```
  def mount(_, _, socket) do
    messages = Enum.map(1..3, &%{id: &1, username: "gus #{&1}", text: "pumpkin  #{&1}"})
    socket = assign(socket, messages: messages)
    {:ok, socket}
  end

  def handle_info({:u_msg, message}, socket) do
    {:noreply, update(socket, :messages, fn messages -> [message | messages] end)}
  end
```

...html.heex
```
    <%= self |> :erlang.pid_to_list %>
    <ul>
        <%= for message <- @messages do %>
        <li>
            <p><span><%= message.username %>:</span> <%= message.text %></p>
        </li>
        <% end %>
    </ul>
```

```
iex(4)> pid = pid("0.698.0")
#PID<0.698.0>
iex(5)>  msg = %{username: "gus 234234", text: "pumpkin 1", id: :rand.uniform(10_000)}
%{id: 870, text: "pumpkin 1", username: "gus 234234"}
iex(6)> send pid, {:u_msg, msg}      
{:u_msg, %{id: 870, text: "pumpkin 1", username: "gus 234234"}}
iex(7)> send pid, {:u_msg, msg}      
{:u_msg, %{id: 870, text: "pumpkin 1", username: "gus 234234"}}
iex(8)> 

```


### Only temporary_assigns example

After defining what property element is temporary_assign and what will happen after receiving a new element, LiveView will delete every element and include the new one happening because now we have started using the default behavior `replace.` Now, define what you expect when a new element is added to your list using the useful article LiveView documentation provides us on the link below.

https://hexdocs.pm/phoenix_live_view/dom-patching.html


```
  def mount(_, _, socket) do
    messages = Enum.map(1..3, &%{id: &1, username: "gus #{&1}", text: "pumpkin  #{&1}"})
    socket = assign(socket, messages: messages)
    {:ok, socket, temporary_assigns: [messages: []]}
  end
```

```
 msg = %{username: "gus #{:rand.uniform(10_000)}", text: "pumpkin #{:rand.uniform(10_000)}", id: :rand.uniform(10_000)}
%{id: 9282, text: "pumpkin 7151", username: "gus 5213"}
iex(35)> send pid, {:u_msg, msg}                                                                {:u_msg, %{id: 9282, text: "pumpkin 7151", username: "gus 5213"}}
iex(36)> 


```



### The power of temporary_assigns and DOM patching. 


When you use `phx-update` with `temporary_assign,` magic happens. You can define how to order your elements, not repeat the same element on your screen and define the best behavior for your user by simply adding phx-update. 

Of course, you need to include an ID attribute in your `phx-update,` and every element in your list must also have an ID attribute.


```
    <ul phx-update="prepend" id="msgs">
        <%= for message <- @messages do %>
        <li id={Integer.to_string(message.id)}>
            <p><span><%= message.username %>:</span> <%= message.text %></p>
        </li>
        <% end %>
    </ul>

```

Take a look an try by your self :D


```

iex(33)> send pid, {:u_msg, msg}      
{:u_msg, %{id: 6719, text: "pumpkin 2150", username: "gus 8319"}}
iex(34)>  msg = %{username: "gus #{:rand.uniform(10_000)}", text: "pumpkin #{:rand.uniform(10_000)}", id: :rand.uniform(10_000)}
%{id: 9282, text: "pumpkin 7151", username: "gus 5213"}
iex(35)> send pid, {:u_msg, msg}                                                                {:u_msg, %{id: 9282, text: "pumpkin 7151", username: "gus 5213"}}
iex(36)> 
```


#THE END.

After this article, I hope you understand how important it is to use temporary_assigns and phx-update. See you next time BYE!!!

Social networks:

- Gustavo Oliveira - https://www.linkedin.com/in/gustavo-oliveira-642b23aa/
- Elxpro Linkedin - https://www.linkedin.com/company/36977430
- Twitter - https://twitter.com/elx_pro
- ElxproBr - https://www.youtube.com/channel/UCl_BBK2sXZzQy_3ziNU7-XA
- Elxpro - https://www.youtube.com/channel/UCLzHBFuE6oxPdP6t9iqpGpQ