The LiveView Lifecycle

Before we build our first LiveView, let’s take a deeper dive into the LiveView lifecycle. We’ll go through how LiveView manages the state of your single-page app in a data structure called a socket, as well as how LiveView starts up, renders the page for the user, and responds to events. Once we understand the LiveView lifecycle, we’ll be ready to build out this lifecycle and use it to manage the state of our own LiveViews.

We’ll begin by examining how LiveView represents the state via Phoenix.LiveView.Socket structs. Understanding how the socket struct is constructed and updated will give us the tools we need to establish and change the state of our LiveViews.

Holding state in LiveView sockets

LiveView manages state in structs called sockets. The module Phoenix.LiveView.Socket creates these structs. Whenever we see one of these socket structs as a variable or an argument within a LiveView, we should immediately recognize it as the data that constitutes the LiveView’s state.

Let’s take a closer look at a socket struct now.

Open up an IEx session for our application by typing the following in the terminal below: