Using LiveComponent .live_component vs MyLiveComponent.render

[csokun]

Hi,

I’m skimming through Livebook code base and found this usage of LiveComponent:

livebook-dev/livebook/blob/main/lib/livebook_web/live/settings_live.ex#L113-L116

And I thought LiveComponent should be used like this:

<.live_component module={HeroComponent} id="hero" content={@content} />

Are these two the same? or are there any trade-off between the two?

[josevalim]

In this case it is the same because it has no state whatsoever but a PR that changes to .live_component will be appreciated.

[codeanpeace]

This question just sent me down a fun rabbit hole! @.@

From some sleuthing, FileSystemsComponent was initially created as a LiveComponent most likely because it used Phoenix.LiveView.Helpers.live_patch/2, a LiveView helper function recently deprecated as of v0.18.0 in favor of the unified Phoenix.Component.link/1.

So because FileSystemsComponent didn’t need the full LiveComponent treatment since it wasn’t really a stateful component to begin with, it made sense to render it like a functional stateless Phoenix.Component. This saves on the overhead that comes with rendering a stateful LiveComponent vs stateless Component and is something that is possible to do because LiveComponents are built on top of regular Components.

Edited to add:

@josevalim

In this case it is the same because it has no state whatsoever but a PR that changes to .live_component will be appreciated.

Ahh, only saw your response after that code spelunking – would it make sense to “un-alive” the component assuming there aren’t any plans to make it stateful?

[josevalim]

@codeanpeace

Ahh, only saw your response after that code spelunking – would it make sense to “un-alive” the component assuming there aren’t any plans to make it stateful?

Honestly, I think both approaches are totally fine for this case. The idea of keeping it as is was mostly for consistency with a similar component that already exists there.