Проблемы с новыми id в React

Пусть из базы данных нам пришел следующий массив объектов:

const prods = [
	{id: 1, name: 'product1', cost: 100},
	{id: 2, name: 'product2', cost: 200},
	{id: 3, name: 'product3', cost: 300},
];

Как вы видите, id нумеруются по порядку. Однако, нам следует учитывать, что числа могут иметь пропуски, к примеру, после 3-го может сразу идти 5-тый или 6-той. Из-за этого наш клиентский скрипт не может знать, какой будет следующий id (в нашем случае это не обязательно 4).

Новые id создаются базой данных сервера. Это может вызвать некоторые проблемы при работе на клиенте. Суть в следующем: представим, что с помощью формы мы добавили новый элемент в наш массив. Однако, мы не можем просто взять и добавить данные из формы - ведь мы не знаем какой id будет у нового элемента!

Нам нужно будет отправить запрос на сервер, чтобы он дал нам следующий по порядку id, и только затем добавить элемент в наш массив объектов. Это вызовет задержку с отображением данных на экране: пока данные придут на сервер, пока сервер пришлет нам их обратно - пройдет некоторое время.