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.

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

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.