Like Dislike II
Problem statement
Like Dislike II extends the basic toggle with a more realistic product requirement: the component must sync its vote state to a backend API. This introduces optimistic updates — applying the UI change immediately without waiting for the server — and rollback on failure, which is the standard pattern used at every major tech company.
Build the same Like/Dislike UI as Part I, but this time wrap each vote action in an API call simulation. The UI should update instantly (optimistic), and if the API call fails, revert to the previous state and show an error message to the user.
This tests your understanding of async state management, race conditions (what if the user clicks twice before the first request completes?), and error recovery — all critical senior-level React skills.
Requirements & constraints
- Optimistic UI: apply vote immediately before API responds
- Rollback to previous state if API call fails
- Show error message on failure
- Disable buttons while a request is in-flight to prevent race conditions
- API is simulated with a Promise that randomly succeeds or fails
- Loading indicator on the active button during the request
How to approach Like Dislike II
The strategy an interviewer expects you to reach for.
Why This Question Exists Like/Dislike II tests the optimistic update pattern — one of the most important async UI patterns in production React. Every major platform (YouTube, Twitter, Reddit) uses this: apply the change to the UI immediately, send the API request in the background, and roll back if it fails. Waiting for the server before updating the UI creates a 200–800ms delay that makes the app feel sluggish.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.