Optimistic likes with rollback and a double-click guard
Both likes show instantly. The second click on the first post is ignored while its request is in flight. The server rejects the like on p2, so it is rolled back and an announced status explains why.
A news feed is an endless, personalised list that keeps growing at the top while the user scrolls down; the design rests on cursor pagination, a normalised store, a virtualised list, a new-posts banner instead of jumping content, optimistic likes and careful image loading.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add an end-of-feed message to the cursor example: when cursor is null after at least one page, show You're all caught up.
Make the like rollback announce the error and clear it after the next successful like.
Explain it without notes
Why do feeds use cursor pagination instead of offset pagination?
What does it mean to normalise feed data, and what does it buy you?
How would you handle new posts arriving while the user is reading?
Design the like button: what happens on click, on failure, and on a double click?
How do you keep a feed fast after the user has scrolled through 1,000 posts?
Preview
Console
Nothing logged yet.Expected console output
ignored second click on p1
right after clicks: ♥ 5 | ♥ 6
server confirmed p1
rolled back p2: This post was removed
after the server: ♥ 5 | ♡ 5