Optimistically Create Deposits with useOptimistic (experimental)
With the experimental_useOptimistic hook we can get optimistic updates to our UI while our mutation completes.
After the mutation completes and the path is revalidated our optimistically added deposit will be replaced with the deposit from the database.
This hook comes with some caveats however, because of it's experimental nature, we need to disable strict mode in React. While this is functionality that will be super useful in the future, it might not be the best idea to start using it right now.
Instructor: [0:00] The last thing that we want to add is optimistic UI. If we come back to our application, we can add the experimental_useOptimistic. Then here, like useState, you get an array with a value. We're going to call this optimisticDeposits, and then our function is addOptimisticDeposits.
[0:18] The first argument to useOptimistic is our data. This will be data.deposits. Then the second argument is a function. In this function, we get our current state. You can call this whatever you want. We'll call it state. Our second will be our newDeposit. Then this will return an array. We'll put the state there, and then we'll give it our newDeposit.
[0:41] We can type both of these. We know that our state should be an array of deposits. Now, if we save this, what we want now is to map over our optimisticDeposits. Instead of the data.deposits, we can say optimisticDeposits. Then now in our action, we want to handle adding an optimistic deposit.
[0:59] If we look at where we map over our optimisticDeposits, all we need is an id, the depositDateFormatted and the amount. Let's come back into our action. We can get formData. Copy all of this for now. We need the amount and the depositDateString. Then now we can build the newDeposit that we want to add to our optimisticDeposits.
[1:22] Then now we can add our newDeposit to our optimisticDeposits with the addOptimisticDeposits function. We come back to our application. What we expect to happen is, when we add a new deposit, it will show up immediately. Then we click Create. We see it still takes it a while.
[1:44] If we come back to our optimisticDeposits, if we log those right here, and now if we add a new deposit, you see it's getting the two deposits we have. Now if we add a new one, when we click this, you'll see that it does add this new deposit. It adds it right here, but then immediately it gets rid of it. This is because we have StrictMode enabled. It renders everything twice.
[2:16] If we remove this and save, we need to restart our server. Let's exit out of our console. Now let's refresh. Now let's add another deposit. Now, you'll see when we click Create, it will be added immediately. There we go. If we add another one, down in the bottom left of the screen, you'll see where it says, localhost:3000/sales/deposits and then the ID.
[2:39] I want to add another one so you can see when we hover over it, it should say new, if we click Create and hover over it. We have to be quick. We click Create, it says new, and then it changes to the new ID.
[2:50] In review, in this lesson, we added the new experimental_useOptimistic hook. Then we used that hook and passed it our deposit data. Then whenever we create a newDeposit, we pass it an object with the information it needs and it creates this deposit instantly. Then as the action runs, it revalidates and adds the actual data from the database.
[3:11] We also saw that we had to disable StrictMode for this to be working. In the future, this shouldn't have to happen, but for now, as this is still experimental, that's what we have to do to get useOptimistic working.