brainlid

brainlid

Phoenix Blog Post: Restore LiveView State on Startup

You are storing some Phoenix LiveView state in the browser. You want to retrieve that saved state as early as possible to improve the user experience.

The approach we used earlier waits for the LiveView to request the client to send the data. In your situation, you know you want the data, so why wait around to be asked for it? Can you have it automatically pushed from the client without being requested? Can you do it in a way that is reusable for other pages and other LiveViews and not just this one page?

This recipe improves the design and even makes it work for multiple LiveViews in the same application!

Most Liked

derek-zhou

derek-zhou

Very nice. I always pass at least 2 pieces of info in params: the locale and the timezone of the client; there is no better way to pass them.

The params can be either an object or a function returning an object. The second way is the best as used in the article. because during the LV session you could change any of your stored value so they would need to be re-evaluated in run-time, this is why it need to be a function.

ani

ani

Note that when the live view is mounted via a live_redirect (vs initial full page render), the element node passed to the params function will not have the full subtree, so node.querySelector("div[data-state-restore='true']") will return null and the restore data won’t be available in the connect params.

Where Next?

Popular in Blog Posts Top

victorbjorklund
I’m showing you how you can customise the phx.new generator to give you a new Phoenix project the way YOU want it. In this post I show yo...
New
brainlid
You are storing some Phoenix LiveView state in the browser. You want to retrieve that saved state as early as possible to improve the use...
New
brainlid
There is a new community resource available on writing “Safe Ecto Migrations”. When we get a migration wrong, it can lock up your product...
New
ragamuf
A little halloween hocus-pocus on the value proposition of having a reliable test suite in place. You are not scared, are you?
New
bemesa21
Sorting and deleting many-to-many associations made easy with Ecto’s :sort_param and :delete_param options from cast_assoc, powered by Li...
New
brainlid
Dialyzer is a tool that you’ve probably heard about in the Elixir community. You may have even used it. However, adding Dialyzer to an ex...
New
ConnorRigby
Just finished a post for Embedded Elixir and I thought it should be cross-posted here: I’ll update this thread as posts get published. ...
New
New
lawik
One of the Erlang ecosystem’s spiciest nerd snipes are hot code updates. Because it can do it. In ways that almost no other runtime can.
New
SmartLogic
Season four of the Elixir Wizards podcast launches today! This season we’re focused on system and application architecture. We’ll be doin...
New

Other popular topics Top

JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 45766 226
New
sergio_101
I am VERY much an elixir newbie. I have taken one elixir course and one phoenix course on Udemy. During that course, I saw the instructor...
New
_russellb
I want to try my hand at web scraping. What tools/libraries do I need to use. I’m hoping to turn this into something professional so don’...
New
lk-geimfari
What is most correct way to open, read and parse JSON file with poison? For example if we have example.json file in root of some projec...
New
mgjohns61585
Could someone help me? I'm making my first elixir program, number guessing game. I can't figure out how to convert the user's guess from ...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
AstonJ
by Lance Halvorsen Elixir and Phoenix are generating tremendous excitement as an unbeatable platform for building modern web application...
460 27162 124
New

We're in Beta

About us Mission Statement