How to track the variable is being properly changed in LiveView

Phoenix Forum Questions / Help
, ,
1

I created an issue in LiveView GitHub: When `live_flash` is clicked, it cleans `temporary_assigns` inside a `live_component` · Issue #1960 · phoenixframework/phoenix_live_view · GitHub

My problem comes when I click on a live_flash.

I described in this video

And Jose told me:

This is intentional. if you declare something as temporary it will be cleared immediately after rendering and any other event won’t have that date anymore. You need to make sure that the variable is being properly changed tracked so it is not rerendered unless the variable itself changes.

But I could not understand how to track my variable. All the things work but when a user click on live_flash it clears all the temporary_assigns.

Thank you

2

Can you use a regular assign then not a temporary assign?

2 Likes
3

Hi, I think for now no!! Because in my real-project it needs many changes. But as I said when I am using regular assign I have no problems.
Temporary solution that I test in a demo application is using phx-hook to send a request to js and delete the element like this:

let Hooks = {}
Hooks.DeleteFlashMessage = {
    mounted() {
      this.handleEvent("flash_message", ({id}) => {
          console.log(id)
        const element = document.getElementById(id);
        element.remove();
      });
    }
}

As Jose said

I would try to rely more on regular components.

I did not do this in my project, I have many nested LiveView component to create modular UI and let developer create a duplicate page very fast, and it is impossible to change all of them for now.

You are passing the @flash and @notifs to the component, which means that, if any of those change, the other will be re-rendered.
You are also using many stateful components, which means each of them is having their own version of @notifs

Unfortunately, before update t worked for me, but I think some basic context were changed like live_flash can re-render my live_component

For example:

I am using temporary assign in my project because always the selected parts are updated, and I do not want to re-render or re-call all the database to improve my using resource. But some places in my project just was for theory, and they forced me to load all the data again even I used temporary assign there.

After 16 months of working on LiveView every day, I think the context changes are very high and can destroy release time, but another hand it is going to continue very excellent, and I am very grateful of LiveView team.

4

If you use a stateful component you don’t need to hit the database again either. Using temporary assigns this way is not really how they’re intended to be used, you need to be combining them with phx-update=append or prepend. They’re not a way to optimize out DB calls from stateless components.

1 Like
5

Yes I have done like you said, but some places like changing like number of a post in a list are going to be a problem or bookmark a post and change its icon to bookmarked

6

Can you elaborate on what those problems are?

2 Likes
7

For example, you have 50 posts with pagination, every page shows 15 post and somebody in the page 2 like a post and another people like a post in page 1. So I want every client in ever page can see a current like number of a post.
Like Twitter, you can see like number of a tweet real-time. But there is a difference, Twitter push all the tweets in a page, but I have pagination.

Please see this image (it is Persian but the heart is like)

Screen Shot 1401-01-23 at 21.45.25
Screen Shot 1401-01-23 at 21.45.251200×384 43.6 KB

How can update it without re-call from db. I create a Pubsub and push an event and get this in my LiveView handle_info if a post likes changed and my user in a page the like is changed I re-bind.

Code:

8

If you are just trying update a small piece of markup like the “bookmark” icon or something similar, have you considered just handling that manually in js, and using phx-ignore to protect it from LV updates?

1 Like
9

Yes, I did this !! After the problem I sent in first post, I handle my problem with phoenix LiveView hook.

And for Like and Bookmark, I will do with phx-hook in new version of my CMS, but using phx-ignore no I did not, I will try!! For now, phx-hook fixed my issue.

I wanted to do this with LiveView because I have no information with JS security problems

10

Sorry, I was having a hard time understanding the exact nature of your use case. FWIW, I have rarely needed to use temporary_assigns because reloading a paginated set of db records is not usually a very expensive operation. And if it is, you can manually manage the list in other ways. If I am not misunderstanding, it sounds like, as others have pointed out, you have been using temporary_assigns for something it was not intended for and may have been only accidentally working. So if you want to avoid hooks you possibly can just switch to assigns?

2 Likes
11

For now, I do not think so, But can you give me a real world example where you use temporary_assigns?

Thank you for your consideration

12

When you don’t need that data anymore. So you’re either happy to fetch it again or you don’t need it because your pre/appending to the list. See below for the append case.

1 Like