Reset per-post social state on post switch to prevent leakage of likes and comments#65
Reset per-post social state on post switch to prevent leakage of likes and comments#65cto-new[bot] wants to merge 1 commit intomainfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| useEffect(() => { | ||
| // Reset to empty states when selectedId changes | ||
| setLikesCount(0); | ||
| setIsLiked(false); | ||
| setComments([]); | ||
| setNewComment(''); | ||
| setIsSubmittingComment(false); | ||
| }, [selectedId]); |
There was a problem hiding this comment.
🔴 Race condition: Reset effect overwrites cached social data when switching posts
In both Karya.tsx and Profile.tsx, the newly added useEffect that resets social states (likes, comments, etc.) when selectedId changes runs AFTER the effect that syncs from socialData. This causes a race condition:
- When
selectedIdchanges to a previously viewed post, React Query immediately returns cachedsocialData - The
socialDatasync effect (lines 347-353 in Karya.tsx, 243-249 in Profile.tsx) runs and sets the correct values - The reset effect (lines 361-368 in Karya.tsx, 252-259 in Profile.tsx) runs afterward and overwrites the correct data with zeros/empty arrays
This results in:
- User sees correct cached data briefly, then it resets to 0/empty
- After refetch completes, data is restored (causing a flicker)
- If the user interacts (e.g., likes) during this window, they operate on incorrect state
The fix should either:
- Move the reset effect BEFORE the sync effect, or
- Use a ref to track the previous
selectedIdand only reset when actually switching, or - Remove the reset effect entirely and rely on React Query's loading state to show a placeholder
Was this helpful? React with 👍 or 👎 to provide feedback.
| useEffect(() => { | ||
| // Reset to empty states when selectedId changes | ||
| setLikesCount(0); | ||
| setIsLiked(false); | ||
| setComments([]); | ||
| setNewComment(''); | ||
| setIsSubmittingComment(false); | ||
| }, [selectedId]); |
There was a problem hiding this comment.
🔴 Race condition: Reset effect overwrites cached social data when switching posts
Same issue as in Karya.tsx. The newly added useEffect at lines 252-259 resets social states when selectedId changes, but it runs AFTER the effect at lines 243-249 that syncs from socialData. When switching to a previously viewed post with cached data:
- React Query returns cached
socialDataimmediately - The sync effect runs and sets correct values from cache
- The reset effect runs and overwrites with zeros/empty
This causes incorrect display of likes count (showing 0 instead of actual count), isLiked state being wrong (showing not liked when user has liked), and comments being cleared.
The fix should reorder the effects or use a different approach to handle the transition state.
Was this helpful? React with 👍 or 👎 to provide feedback.
Summary
This change fixes an issue where likes and comments were visible across posts due to shared social state. Switching posts now shows correct, per-post interactions.
Details