Using LiveComponent .live_component vs MyLiveComponent.render


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

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?

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

1 Like

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

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:

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?

1 Like

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.

1 Like