The Phoenix LiveView LifeCycle Illustrated

LiveView Life Cycle Flow Chart

We can see the path the HTTP request takes from disconnected mount to the stateful render. Remember, a LiveView is just a process and it implements all of the GenServer callbacks as well. The terminate callback is optional and generally not implemented.

Mermaid Markdown

Here’s the markdown if you’re interested in making any modifications!

graph TB
    HTTP_Request["HTTP Request"]
    mount_disconnected["mount/3 Callback (Disconnected)"]
    handle_params_disconnected["handle_params/3 Callback (Disconnected)"]
    render_disconnected["render/1 Callback (Disconnected)"]
    LiveView_Connects["LiveView Connects (Stateful views are spawned)"]
    mount_connected["mount/3 Callback (Connected)"]
    handle_params_connected["handle_params/3 Callback (Connected)"]
    render_connected["render/1 Callback (Connected)"]
    Continuous_Connection["Continuous Connection"]
    handle_event["Callbacks\nhandle_event/3\nhandle_call/3\nhandle_info/2\nhandle_continue/2\nhandle_cast/2\n"]
    Reconnect["Reconnect"]
    terminate["Terminate callback - handle cleanup"]

    HTTP_Request --> mount_disconnected
    mount_disconnected --> handle_params_disconnected
    handle_params_disconnected --> render_disconnected
    render_disconnected --> LiveView_Connects
    LiveView_Connects --> mount_connected
    mount_connected --> handle_params_connected
    handle_params_connected --> render_connected
    render_connected --> Continuous_Connection
    Continuous_Connection --> handle_event
    handle_event --> render_connected
    Continuous_Connection -- "If crash or connection drop" --> Reconnect
    Reconnect --> mount_connected
    Continuous_Connection -- "Patch" --> handle_params_connected