Fix infinite hydration loop and stabilize global store synchronization
- Refactored layouts to derive account data from stable props instead of reactive stores. - Wrapped store updates in untrack() with deep equality guards to prevent infinite re-renders. - Resolved duplicate untrack declarations and missing imports across the project. - Added fetch safeguards to Element_data_store to prevent redundant API calls. - Standardized hydration patterns to break circular dependencies during initial load.
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from 'svelte';
|
||||
interface Props {
|
||||
/** @type {import('./$types').LayoutData} */
|
||||
data: any;
|
||||
@@ -27,7 +28,9 @@
|
||||
|
||||
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
|
||||
// $slct.account_id = data.account_id;
|
||||
let ae_acct = $derived(data[$slct.account_id]);
|
||||
// NOTE: Derived from data.account_id (prop) instead of $slct.account_id (store)
|
||||
// to prevent circular dependency loops during hydration.
|
||||
let ae_acct = $derived(data[data.account_id]);
|
||||
|
||||
$effect(() => {
|
||||
if (log_lvl) {
|
||||
@@ -43,8 +46,14 @@
|
||||
|
||||
$effect(() => {
|
||||
if (ae_acct) {
|
||||
$events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;
|
||||
$events_slct.event_location_obj_li = ae_acct.slct.event_location_obj_li;
|
||||
untrack(() => {
|
||||
if (JSON.stringify($events_slct.event_session_obj_li) !== JSON.stringify(ae_acct.slct.event_session_obj_li)) {
|
||||
$events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;
|
||||
}
|
||||
if (JSON.stringify($events_slct.event_location_obj_li) !== JSON.stringify(ae_acct.slct.event_location_obj_li)) {
|
||||
$events_slct.event_location_obj_li = ae_acct.slct.event_location_obj_li;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user