I don't understand the difference between Phoenix.Component and Phoenix.LiveComponent

Kinsua

Both will change the @something value when it’s changed in real time. Both are “live”.

So what is the difference?

Isn’t the naming a bit unfortunate? Because the normal components change in the live process as well in real time.

This part from docs is super confusing, I don’t know when it’s about compoents and when about liveComponents:

Components have their own mount/3 and handle_event/3 callbacks, as well as their own state with change tracking support. Components are also lightweight as they “run” in the same process as the parent LiveView. However, this means an error in a component would cause the whole view to fail to render. See Phoenix.LiveComponent for a complete rundown on components.

8 comments

/phoenix #learning-elixir #liveview #live-component

1 1177 8

2024-11-09 00:49:14 UTC

Showing Posts 1 to 8

Show Best Posts
Show All (oldest first)
Show All (newest first)

APB9785

Creator of ECSx

LiveComponent stores mutable state similar to LiveView/GenServer. You can change the state with events that include phx-target={@myself} and defining event handlers in the LiveComponent module.

Phoenix.Component holds no state. It receives inputs, but cannot change those inputs. It is purely “functional”. These functional components cannot be targets of events, and cannot define the event handler logic which would be required to change the state.

Assuming your app has some state:

LiveComponent will handle (store and update) the state without its parent needing to know what’s going on
Phoenix.Component will require the parent to manage the state, and the component doesn’t have any idea about how the state changes

Post #1

sodapopcan

I agree the docs wording is confusing. Under one section it talks about both function components and live components. At one point it starts referring to live components as simply “components.” While it can be inferred from context, I found myself thinking it’s referring back to function components before going on to talk about live components.

I can work on a PR to clarify a little.

Post #2

D4no0

The documentation is mixed because live components used to be located in liveview documentation, there were no functional components back then.

I guess when liveview was added officially to the framework as a default, the documentations got merged and it’s a mess even to this day, as you don’t understand where one feature ends and another starts.

Post #3

LostKobrakai

Nothing got merged there. LiveComponents as well as function components are a feature of phoenix_live_view and always have been. But the point about LiveComponents having existed for longer than function components does still stand. If things would’ve been the other way round things would certainly look different.

Post #4

D4no0

Hmm, I always thought that functional components come from classical phoenix and not liveview as they have nothing in common with what liveview does, but it seems you are right.

Post #5

LostKobrakai

They need to be in live view because change tracking is a concept of live view, which heex integrates with.

Post #6

D4no0

It’s pretty strange that heex is still part of liveview. So what, you can’t use heex templates in a classic phoenix project without adding liveview as dependency?

Post #7

steffend

Phoenix Core Team

This is correct. You cannot use HEEx without depending on LiveView. HEEx directly integrates into the LiveView custom EEx engine and is intertwined with LiveView’s change tracking. Trying to separate this would be a lot of work and probably not worth the effort.

Post #8

— All posts loaded —