LiveView vs LiveComponent vs Component

The official documentation says:

• use Phoenix.Component to compartmentalize/reuse markup
• use Phoenix.LiveComponent to compartmentalize state, markup, and events
• use nested Phoenix.LiveView to compartmentalize state, markup, events, and error isolation

Some Context

• handle_params: A function triggered in the parent LiveView with the url params.

• mount: A function triggered in the parent LiveView and LiveComponents for setting the initial values.

• update: A function triggered in the parent LiveView and LiveComponents for updating the assigns in a component instance.

• preload: A function triggered in the parent LiveView and LiveComponents for updating the assigns in multiple instances of the component.

• handle_event: A function triggered by the HTML/JS side.

• handle_info: A function triggered by using send(self(), args) inside a live_component. Handled by the parent liveview.

• pipeline: A function that is called when defining the live_view or live_component.

• @myself: A target to specify in LiveViews or LiveComponents. phx-target={@myself}

lib/my_web/my_web.ex

def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {MyWeb.Layouts, :app}

      unquote(html_helpers())
    end
end

Used as

defmodule MyWeb.Live.Home do
  use MyWeb, :live_view

This is how I understand the main differences

LiveView

• Creates a socket
• Handlers: handle_event, handle_info, handle_params, mount, update, preload.
• Can use @myself to handle events (requires id)
• Renders html

live_render/3

LiveComponent

• Uses the socket defined in the Parent LiveView
• Handlers: handle_event,mount, update, preload.
• Can use @myself to handle events (requires id)
• Renders html

<.live_component module={MyModule} id="unique_id" {assigns} />

Component

• Only renders html

<MyComponent.render {assigns} />

Comparison