infinite loop and page freeze caused by async Alpine.effect#1
Merged
jissereitsma merged 1 commit intomasterfrom Mar 2, 2026
Merged
infinite loop and page freeze caused by async Alpine.effect#1jissereitsma merged 1 commit intomasterfrom
jissereitsma merged 1 commit intomasterfrom
Conversation
WHY:
Since version 1.1.19 (Feb 16, 2026), Alpine.store('LocalStorage').get()
became asynchronous, but the Message store was using it incorrectly inside
Alpine.effect(), causing:
1. Infinite reactivity loops - Alpine.effect() expects synchronous functions
for proper dependency tracking. Using async causes the effect to return
a Promise immediately, preventing Alpine from tracking reactive dependencies.
2. The effect modifies this.messages inside itself, triggering re-runs
infinitely as Alpine tries to track the dependency on this.messages.
3. Page freezes and high CPU usage as the browser gets stuck in the loop.
4. saveMessage() was calling getMessagesFromStore() without await, causing
it to try pushing to a Promise instead of an array.
HOW:
1. Replaced Alpine.effect(async () => {...}) with a single-run event listener:
- Listen for 'loki:init:localstorage-store' event (dispatched by
LocalStorage store when initialized)
- Use { once: true } to ensure it only runs once
- Load messages asynchronously without reactive tracking issues
- No infinite loops since we're not inside Alpine's reactivity system
2. Made saveMessage() async and added await before getMessagesFromStore()
to properly handle the Promise returned by the async method.
RESULT:
- Messages load correctly from LocalStorage once on initialization
- No infinite loops or page freezes
- Proper async/await pattern throughout
- Compatible with async LocalStorage.get() from base 1.1.19+
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
WHY:
Since version 1.1.19 (Feb 16, 2026), Alpine.store('LocalStorage').get() became asynchronous, but the Message store was using it incorrectly inside Alpine.effect(), causing:
Infinite reactivity loops - Alpine.effect() expects synchronous functions for proper dependency tracking. Using async causes the effect to return a Promise immediately, preventing Alpine from tracking reactive dependencies.
The effect modifies this.messages inside itself, triggering re-runs infinitely as Alpine tries to track the dependency on this.messages.
Page freezes and high CPU usage as the browser gets stuck in the loop.
saveMessage() was calling getMessagesFromStore() without await, causing it to try pushing to a Promise instead of an array.
HOW:
Replaced Alpine.effect(async () => {...}) with a single-run event listener:
Made saveMessage() async and added await before getMessagesFromStore() to properly handle the Promise returned by the async method.
RESULT: