Что делает функция генерации уникального id (uid)

Что проверяют

Понимаете ли вы, что «уникальный» бывает разной силы, и умеете ли подобрать способ под нужную область: одна загрузка страницы, одна сессия, вся база. Вопрос часто задают по чужому коду в репозитории, поэтому заодно проверяют умение читать незнакомую функцию вслух.

Как отвечать

Такая функция возвращает строку, которая не должна совпасть с уже выданными. Всё остальное определяется областью, в которой требуется уникальность:

• счётчик в модуле: let n = 0; const uid = () => "u" + (++n). Уникален в пределах одной загрузки страницы и обнуляется при перезагрузке. Этого достаточно для служебных id у полей формы и aria-labelledby;
• crypto.randomUUID(): 128 случайных бит, встроен в браузер, доступен только в защищённом контексте (https или localhost). Подходит, когда идентификатор уезжает на сервер;
• Math.random().toString(36).slice(2): самый частый самодельный вариант, энтропии в нём мало, на десятках тысяч записей коллизии становятся реальными;
• время плюс случайная часть: даёт сортируемость по моменту создания, так устроены ULID и похожие схемы.

В React для атрибутов доступности есть useId(): он отдаёт стабильное значение, одинаковое на сервере и после гидратации.

Где спотыкаются

Генерируют идентификатор прямо в рендере и подставляют его в key списка. На каждом рендере ключ новый, React считает элементы новыми и перемонтирует их: состояние полей и фокус теряются, анимации перезапускаются. Ключ берут из данных, а идентификатор присваивают один раз при создании записи.

Путают уникальность с непредсказуемостью и называют uid мерой безопасности. Значение из Date.now() со счётчиком угадывается перебором, для секретов нужен crypto.getRandomValues, а права всё равно проверяются на сервере.

Забывают про серверный рендеринг: функция отработала на сервере, потом заново на клиенте, значения разошлись, React ругается на несовпадение разметки. Это ровно та задача, ради которой и появился useId.