Hello

I’m trying to implement something similar to a shopping cart.
I’ve got two LV.

• Page LV
• SecondPage LV

They both need to render the CartComponent (in the future a full-featured cart, right now only a %{ total: X}.
The component is stateful and handles the events (see component-click event within CartComponent).

I originally followed this very interesting thread regarding not un-mounting components upon a LV change via routing, however I couldn’t make the proposed solution work. Regardless I’m giving it a try via localStorage instead, so I figure that’s a different solution.
My goal is by steps:

1. User lands in either of the LVs (which make use of CartComponent)
2. JS hooks load localStorage.shoppingCart --> forward it to LV
3. LV receives the socketParams and forwards it to the CartComponent whose update re-renders with new value.
4. Whatever new event in the cart logic --> CartComponent handles it and it is appropriately updated.

The problem I’m encountering is with the first render of all. Something like this happens.

1. User lands in PageLive --> renders CartComponent with empty shoppingCart
2. Second time PageLive is mounted when the connected?(socket) is true --> receives new shoppingCart from JS hook.
3. CartComponent's update does fire and receives the updated shoppingCart post-socket connected.
4. CartComponent's UI render does not update
5. Manually try to fire a component-click event --> CartComponent handles and UI is properly updated.

This is the very test repo i’m running

Thanks!