useElementId is a custom hook to generate ids for DOM elements.
Provides unique ids for the page accessibility attributes


When building interfaces you'll see a lot of cases when you need to link elements together with an id, especially for implementing accessibility related features. Those ids are global and there is always a risk of getting a conflict in a large application. To avoid id conflicts, Arcade exposes useElementId hook which is suited specifically for the DOM elements and supports server-side rendering.

Since hooks can't be used conditionally, useElementId supports working with both random and manually defined ids. In case your component has an optional id property – you can just pass it along to useElementId and it will either use the passed id if it's defined or will generate a random one.

Note: useElementId generates simple ids using an internal counter. Don't use it for any business logic where you need to generate a truly unique id that stays the same across multiple page renders.

Arguments and return value