I have this sample project called tweet_comment which basically displays an editable comment box. If the comment contains a link to a tweet, the comment box is able to unfurl the tweet url and display an oembed styled with twitter widgets. At the moment the comment box is a stateful live view component and all events related to the comment box are handled inside this component. The issue that I am facing is that, while editing the comment, the tweet widgets seem to reload on every key stroke even though the url hasn’t changed. This is because I have implemented a hook which reloads the twitter widgets every time the comment box component is updated. To avoid this, In the part of the code where I handle the phx-change event, I tried to return the same socket back if the url inside the comment has not changed hoping that the live view component will not be re-rendered if the assigns haven’t changed. However this doesn’t seem to be the case. Changing the live view component to just a live view, I was able to see that the live view will not be re-rendered if the assigns of the socket have not changed, and this doesn’t seem to be the case for stateful live view components. My question is, is this a design decision for stateful live view components to always re-render even though the assigns to the socket have not changed or is there a way to avoid this?
The form receives css loading classes when the child inputs of the form have changed. That’s why your hook is called.
Uncommenting this would give a working example using live view as a source of truth https://github.com/myak2h/tweet_comment/blob/master/lib/tweet_comment_web/templates/layout/app.html.eex#L24
@sfusato could you elaborate more? I am also wondering why this doesn’t happen when implementing it with the live view as source of truth.
You might be on to something. It seems that phx-hook is reacting differently in two almost identical scenarios if not for the difference that one is a liveview and one a stateful component.
