The Product Index (Part-I)

Let's learn how state management is done using mount/render in Phoenix LiveView.

How to mount and render the Product index

The mount/render workflow describes the process in which a LiveView sets its initial state and renders it, along with some markup, for the client. The best way to understand the mount/render workflow is to see it in action. The Product Index feature is our entry point into this workflow. We’ll play around with adding specific data to that LiveView’s socket in order to tweak what’s rendered.

The easiest way to put data into the socket is via the mount/3 function. Look at the LiveView’s mount/3 function which is written in pento/lib/pento_web/live/product_live/index.ex:

Get hands-on with 1200+ tech skills courses.