React Native: useId To Prevent Duplicate ID
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 useIdprovided 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.
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.
Specific Usage
The following is an example of official Usage as a concrete usage.
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.
UncontrolledTooltip is a component provided by Reactstrap that displays the content passed to children when the element with the idspecified as target is hovered over.
Using this component, you can place a tooltip anywhere. (You may think you can useUncontrolledTooltip, 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.
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 says to escape the : since it does not follow standard CSS syntax.
Here is the escaped component.
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 and use in English.
For more information, go to GROWI.org to learn more about us. You can also follow our Facebook to see updates about our service.
