Adding optimistic UI updates in Remix

In this section, we will review our BeeRich application and discuss which user actions would profit the most from adding optimistic UI updates. Then, we will go ahead and make the required code changes.

Creating an expense

Run BeeRich locally by executing npm run dev in the project’s root and navigate to the expense overview page (http://localhost:3000/dashboard/expenses). Now, create a new expense.

Notice that after submitting the expense creation form, we are redirected to the expense details page. The URL now includes the new expense identifier. After the redirect, we have access to the newly created expense loader data, including the expense identifier. All further updates to the expense require the expense identifier.

Adding optimistic UI updates to the expense creation form may become quite complicated. One way to achieve this would be to optimistically update the look and feel of the creation form so that it looks like...