useElementId is a custom hook to generate ids for DOM elements.


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. By default, those ids are global and there is always a risk of getting a conflict in a large application. To avoid these id conflicts, Arcade exposes useElementId hooks which we also use in our components. It's suited specifically for the DOM elements and supports server-side rendering.

Since hooks can't be used conditionally, we're also optimising useElementId for those cases. 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. We recommend not to use it for any business logic where you need to generate a truly unique id even after page being refreshed multiple times.

Arguments and return value