Overview

Learn React's useOptimistic hook by building instant heart toggles that update the UI before the server responds — and revert automatically when requests fail.

Requirements

• Render two cards side by side: one labeled "Successful toggle" and another "Error toggle".
• Both cards start with the heart in a neutral (not liked) state.
• Clicking the heart on the successful toggle card must:
  • Turn the heart red immediately, before the server responds.
  • Keep the heart red after the server confirms the change.
• Clicking the heart on the error toggle card must:
  • Turn the heart red immediately, before the server responds.
  • Revert the heart to neutral after the server responds with an error.
• Use the useOptimistic hook together with startTransition to manage the optimistic state.

Notes

• addOptimistic must be called inside startTransition — otherwise React warns even though the UI still updates.
• The passthrough state only needs to be a boolean (just the like value). The rest of data can stay static.
• toggleFavoriteError always throws. A try/catch with console.error prevents the red error overlay in dev without affecting the optimistic revert.
• The data-testid attributes in the starter are already wired to the tests — don't rename or remove them.

Tests

1. renders the app title
2. renders both cards with labels
3. starts with hearts not liked
4. optimistically toggles the heart immediately and persists on success
5. reverts the heart on server error