Skip to content

Reset per-post social state on post switch to prevent leakage of likes and comments #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cto-new wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Reset per-post social state on post switch to prevent leakage of likes and comments #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions pages/Karya.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -357,6 +357,16 @@ export const Karya = () => {
setActiveSlide(0);
}, [selectedId]);

// CRITICAL: Clear social states when switching posts to prevent showing wrong comments/likes
useEffect(() => {
// Reset to empty states when selectedId changes
setLikesCount(0);
setIsLiked(false);
setComments([]);
setNewComment('');
setIsSubmittingComment(false);
}, [selectedId]);
Comment on lines +361 to +368
Copy link
Copy Markdown

@devin-ai-integration devin-ai-integration bot Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔴 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:

  1. When selectedId changes to a previously viewed post, React Query immediately returns cached socialData
  2. The socialData sync effect (lines 347-353 in Karya.tsx, 243-249 in Profile.tsx) runs and sets the correct values
  3. 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:

  1. Move the reset effect BEFORE the sync effect, or
  2. Use a ref to track the previous selectedId and only reset when actually switching, or
  3. Remove the reset effect entirely and rely on React Query's loading state to show a placeholder
Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.


const handleToggleLike = async () => {
if (!user || !selectedId) {
alert('Silakan login untuk menyukai karya ini.');
Expand Down
10 changes: 10 additions & 0 deletions pages/Profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,16 @@ export const Profile = () => {
}
}, [socialData]);

// CRITICAL: Clear social states when switching posts to prevent showing wrong comments/likes
useEffect(() => {
// Reset to empty states when selectedId changes
setLikesCount(0);
setIsLiked(false);
setComments([]);
setNewComment('');
setIsSubmittingComment(false);
}, [selectedId]);
Comment on lines +252 to +259
Copy link
Copy Markdown

@devin-ai-integration devin-ai-integration bot Jan 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔴 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:

  1. React Query returns cached socialData immediately
  2. The sync effect runs and sets correct values from cache
  3. 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.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.


const handleToggleLike = async () => {
if (!user || !selectedId) return;
const prevLiked = isLiked;
Expand Down