React: What is useId hook and when to use it?

1import { useId } from "react";
2
3function LoginForm() {
4  const emailId = useId();
5  const passwordId = useId();
6  const errorId = useId();
7
8  return (
9    <form>
10      <div>
11        <label htmlFor={emailId}>Email</label>
12        <input id={emailId} type="email" aria-describedby={errorId} />
13      </div>
14      <div>
15        <label htmlFor={passwordId}>Password</label>
16        <input id={passwordId} type="password" />
17      </div>
18      <span id={errorId} role="alert" />
19      <button type="submit">Login</button>
20    </form>
21  );
22}

1function SearchBox() {
2  const inputId = useId();
3  const descriptionId = useId();
4  const resultsId = useId();
5
6  return (
7    <div>
8      <label htmlFor={inputId}>Search products</label>
9      <input
10        id={inputId}
11        type="search"
12        aria-describedby={descriptionId}
13        aria-controls={resultsId}
14        aria-autocomplete="list"
15      />
16      <span id={descriptionId}>
17        Type to search across all products
18      </span>
19      <div id={resultsId} role="listbox">
20        {/* Search results here */}
21      </div>
22    </div>
23  );
24}