React Native: useId To Prevent Duplicate ID
Tags: reactnative, javascript, typescript, reactjsdevelopment
Published: 2024-04-23 14:00:00

## Introduction
Hello, I’m Haruhikonyan from **WESEEK, Inc.** in Japan. I write everything from yaml to CSS.

Have you ever had any problems with duplicate id when you use a form or other component on the same page? In such case, you may be able to solve it by using a hook `useId` provided by React. 

However, there are some points to remember when using this hook, so I would like to introduce it with some concrete examples.

---

## What is useId?
Simply put, it creates a string that serves as an `id` without duplication within the same React-based application.

![useld](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0s6e2dj57o7udgiyspd.png)

A string is generated with incremented numbers enclosed in `:` and it is guaranteed that there are no duplicates.

For more details, please refer to the [official documentation](https://react.dev/reference/react/useId).

---

## Specific Usage
The following is an example of official Usage as a concrete usage.

![Specific Usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzmd6qupeh87elmaa4yx.png)

Here’s the finished code from the example.

What makes me happy is that if you are using two generalized components on the same page (where you need to enter two different passwords), and you use a fixed `id` instead of `useId`, you will have more than one `id` on the HTML, which violates the HTML rule HTML rules are violated.

---
## String generated by useId cannot be used as a selector?
First, take a look at this component.

This is a fairly simplified version of the code I wrote in my first job using `useId`.

![Use useId](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6tvqqt6ebzpezylaconu.png)

`UncontrolledTooltip` is a component provided by [Reactstrap](https://reactstrap.github.io/?path=%2Fdocs%2Fcomponents-tooltip--tooltip) that displays the content passed to `children` when the element with the `id` specified as `target` is hovered over.
Using this component, you can place a tooltip anywhere. (You may think you can use `UncontrolledTooltip`, but this is just an example.)

The advantage is that you don’t have to decide the `id` value yourself and it will always match since you use `useId`.

However, this code gives an error.

![error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fyfxaf9o935e43g1f11.png)

I read through the library code and found this.
https://github.com/reactstrap/reactstrap/blob/master/src/utils.js#L293

I went pretty deep, but the `id` that could be passed on to `target` is being passed to `querySelectorAll`. The [documentation](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) says to escape the `:` since it does not follow standard CSS syntax.

Here is the escaped component.

![escaped component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gvb34ol1tmqo4qzhghz.png)

Thus, the `escape` function provided by the CSS class can be used to properly escape the `:` character.

---

## Extra Information: How the `:` was added to useId

I’m sure you can read the discussion for more details:
https://github.com/facebook/react/pull/23360

Also, there is a comment that catches my eye:

> _there are workarounds or alternative solutions._

It is quite bold, but it is also quite interesting because I agree with it. 

The React worldview is one in which logic is written declaratively, without the need to set selectors and apply actions to them, as is often the case with JQuery and plain js, so the library does not need to take things like querySelector into account. 

I thought that the fact that the library does not need to take things querySelector into account conveys the philosophy, both good and bad.

---

## About Us💡

In addition, we want to introduce a little more about GROWI, an open software developed by **WESEEK, Inc**.

**GROWI** is a wiki service with features-rich support for efficient information storage within the company. It also boasts high security and various authentication methods are available to simplify authentication management, including **LDAP/OAuth/SAML**.

**GROWI** originated in Japan and GROWI OSS is **FREE** for anyone to [download](https://docs.growi.org/en/admin-guide/?utm_source=dev+community&utm_medium=referral&utm_campaign=React_Native_useId_To_Prevent_Duplicate_ID) and use **in English**.

For more information, go to [GROWI.org](https://growi.org/en/?utm_source=dev+community&utm_medium=referral&utm_campaign=React_Native_useId_To_Prevent_Duplicate_ID) to learn more about us. You can also follow our [Facebook](https://www.facebook.com/people/GROWIcloud/100089272547238/) to see updates about our service.

![GROWI.org](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rhpa0qcdukeall2vfsj.png)