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

PragTob
I ran into an interesting problem recently where simple concurrency on the BEAM via Task.async made my application a lot slower and a lot...
New
brainlid
In a 2 day spike, I created my own Elixir-based AI Personal Fitness Trainer! The surprising part for me was how useful and helpful I foun...
New
AstonJ
I think <span class="hashtag-icon-placeholder"></span>liveview is going to be a big topic in the foreseeable future, so wondering whether...
New
New
JEG2
I’m closing out, for now, my series on questions at the heart of development with an analysis of when we need more abstraction. For exam...
New
lawik
Building on other people’s work I bashed things together and suddenly I can know when someone is speaking using Elixir and Membrane.
New
AstonJ
Update: How to use the blogs section You can post in one of the Official Blog Posts threads (like this one), or, via Devtalk and a new t...
New
wmnnd
Here’s the story how one of the world’s first production deployments of LiveView came to be - and how trying to improve it almost caused ...
New
ragamuf
Does the world need another How to create a blog article? Maybe not. But then again, creating something out of nothing is what we love....
New
PragTob
Elixir is a great language, but some behavior can be unintuitive, confusing and in the worst case lead to bugs. So, I took a look at 10 E...
New

Other popular topics Top

lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New
Tee
can someone please explain to me how Enum.reduce works with maps
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 record...
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
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 42633 214
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New

We're in Beta

About us Mission Statement