An Introduction to the useId() Hook in React 18 The useId hook helps generate a unique Id on both the client-side and server-side.

import React from "react";
import "./styles.css";
export default function App() {
  const FullName = React.unstable_useOpaqueIdentifier();
  const email = React.unstable_useOpaqueIdentifier();
  const term = React.unstable_useOpaqueIdentifier();
return (
   <div className="card">
     <div>
        <label htmlFor={FullName}>Full Name</label>
        <input type="text" id={FullName} name="Full Name" />  {" "}
     </div>
     <div>
         <label htmlFor={email}>Enter Email</label>
         <input type="email" id={email} name="email" />
      </div>
      <div>
          <input type="checkbox" id={term} name="term" />
          <label htmlFor={term}>Agree with term</label>
      </div>
        <input type="submit" value="Submit" />
     </div>
);}

The React team has not provided documentation for React 18 yet because it’s still in its beta version.

The useId hook takeaways

• useId is a hook
• useId returns string
• useId returns a unique id for client and server-side.
• useId has been introduced as a full function in React 18.

What’s the requirement of a useId hook?

As we know, the useId hook generates a unique id for the app. We join two HTML elements with help Id in HTML most of the time. But now, we can use the useId hook to join two elements in React. For example, we can join the label and input tag with the idand for. Every id should be unique on the HTML page.

<label for="FullName">Full Name</label><br>
  <input type="text" id="FullName" name="Full Name"> <br><br>

  <label for="email">Enter Email</label><br>
  <input type="email" id="email" name="email"> <br><br>

Where and why do we use the useId hook?

We use the useId hook only for joining two HTML elements. If you think you can use it for id generation, it is perfect but makes sure you do not target id in CSS because its unique id generates different ids every time for you.

Conclusion

The useId hook is new in React 18; I'm very happy for the React team and community. You use the useId hook for aria-labelId, and some HTML attribute.

The useId hook has many possible uses. In the future, we will also see more use cases of the useId hook. My article is based on my study and experiments. Complete information comes with the React docs.