A new frontend coding challenge published by ReactChallenges introduces developers to React 19’s useOptimistic hook through a practical example involving instant UI updates.The challenge focuses on improving user experience by eliminating visible delays between user actions and server responses.

Participants are tasked with building a small interface containing two cards displayed side by side: one representing a successful server update and the other simulating a failed request.Both cards begin with an unliked heart icon.

When users click the heart in the successful example, the UI should immediately display the liked state by turning the heart red, even before the server confirms the change.After the simulated server request succeeds, the heart remains red.

In the second example, the heart also turns red instantly, but because the server request intentionally fails, React automatically restores the original neutral state.

The article highlights how useOptimistic simplifies optimistic UI patterns that previously required manual state rollbacks using setState and try/catch logic.Developers are instructed to combine useOptimistic with startTransition, since React warns if optimistic updates occur outside a transition.

Additional implementation notes explain that only a boolean state is necessary for the optimistic value, while the rest of the data can remain static.

The challenge also includes automated tests that verify rendering behavior, optimistic updates, persistence after successful requests, and rollback behavior after failed requests.

According to the article, the exercise is intended to help frontend developers understand how React 19 can create faster and more responsive interfaces with less boilerplate code.