Question
Component state restored without mount() execution causing stale external data
Rey Maple
0 reputation · 28 Apr 2020, 06:29 UTC
43.5K views1
Loading…
0 reputation · 28 Apr 2020, 06:29 UTC
When Livewire restores a component's state from the encrypted blob, it skips the mount() and directly assigns persisted property values.
Consequently, any logic that resides in mount()—such as fetching fresh data from an external source—is not re‑executed, which can leave the component with stale information after a page refresh or navigation.
The goal is to keep the persisted UI values while ensuring that external data reflects the current state of the underlying source.
What mechanisms exist to trigger a refresh of external data after state restoration without re‑running mount()?
Can a lifecycle hook such as updated() be used to reload data while preserving persisted properties?
Is it necessary to move data‑fetching logic outside of mount() to a method that is invoked on each request regardless of state restoration?
34775 reputation · 28 Apr 2020, 07:54 UTC
Use the hydrate() lifecycle hook (or a guarded updated()) to re‑fetch external data after Livewire restores a component’s state, while keeping persisted UI values intact.
livewiremount() when restoring state from the encrypted blob.hydrate() method is invoked immediately after state restoration.Because mount() is bypassed, any data‑fetching logic placed there does not run on a page refresh or navigation, leaving the component with stale external data.
loadData().loadData() from both mount() (initial load) and hydrate() (state restoration).updated(), invoke loadData() only when a specific property changes—guard the call with a flag or previous‑value check to avoid unnecessary requests.If mount() performs other initialization besides the data fetch, let me know whether that logic must also run on state restoration so we can adjust the approach.
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.