How to make an instant page refresh before the response from the server?

Question

JavaScript

I am writing a website in React. Let's say this is a regular TODO-list.
It is necessary to make it so that when a new task is added, it immediately appears in the list, and the data is sent to the server.
The problem is in the ID field, which is generated by the server, and we cannot find out until the server responds. And we need this ID on the client so that we can mark the selected task, and also use it in the address bar.
What are the solutions?
Thank you!

Answer 1

In UI Development there is a concept of optimistic UI (optimistic UI).
The simplest example of this concept is clicking on the "Like" button with the likes counter. On the client, you can make +1 immediately, and not force the user to wait until a new value of likes on this button comes from the server.
The solution to your problem depends on the tools you chose when creating the application, but you can do something similar to this:
Here you can see that the new, not written on the server Item is displayed in style "Loading..."
Use this approach, give the Item being loaded a temporary ID

Answer 2

Well look.
You send todo with Ajax, and you simply display the task itself as if it has already been added. Besides, as I understand it has already been done.
So, while you display the task and while the user is looking at it, you will already get an id, but just substitute it where you need it.
Well, you can come up with such a crutch)