Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useId spews out identical ids

See original GitHub issue

preact 10.11.2

preact-compat 3.19.0

const C1 = () => {
  const id = useId();
  return <h2> {id} </h2>;
};

const App = () => {
  return (
    <>
      <h1> TEST </h1>
      <div>
        <C1 />
      </div>
      <div>
        <C1 />
      </div>
    </>
  );
};

image

https://codesandbox.io/s/friendly-moon-9xlcfs?file=/src/index.js

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
AlexIIIcommented, Oct 25, 2022

I’ve found yet another suspicious thing about preact’s implementation of useId()

Consider the following code

const C1 = () => {
  const id = useId();
  return <h2> C1 = {id} </h2>;
};
const C2 = () => {
  const id = useId();
  return <h2> C2 = {id} </h2>;
};

const App = () => {
  const [v, setV] = useState(false);
  return (
    <>
      <h1> TEST </h1>
      <div>{!v ? <C1 /> : <C2 />}</div>
      <div>
        <C1 />
      </div>
      <button onClick={() => setV((v) => !v)}>switch</button>
    </>
  );
};

https://codesandbox.io/s/fervent-hopper-33n4ul?file=/src/index.js

image

image

On top of the previous problem, when I press the button, which causes C1 to be replaced with C2, the id stays the same. This can lead to all sorts of problems. It is also inconsistent with the reference implementation of react.

https://codesandbox.io/s/zen-volhard-lfkryj?file=/src/App.js

image

2reactions
SvizelPritulacommented, Oct 25, 2022

Another potential issue:

import { render } from "preact";
import { useId } from "preact/hooks";

function App() {
  const id = useId();
  return <div id={id}>{id}</div>;
}

function mount(component) {
  let root = document.createElement("div");
  document.getElementById("root").appendChild(root);
  render(component, root);
}

mount(<App />);
mount(<App />);

results in:

<body>
  <div id="root">
    <div>
      <div id="P481">P481</div>
    </div>
    <div>
      <div id="P481">P481</div>
    </div>
  </div>
</body>

See: https://codesandbox.io/s/preact-useid-multiple-y0qbwq?file=/src/index.js

Read more comments on GitHub >

github_iconTop Results From Across the Web

JQuery to check for duplicate ids in a DOM - Stack Overflow
I like this because it spits out the actual elements to the console. ... following " + duplicates.length + " ids are used...
Read more >
useId Hook Explained - Web Dev Simplified Blog
The main use case of the useId hook is to generate unique ids for ... be to create an id for an input...
Read more >
React 18 provides useId API for generating unique IDs on ...
React 18 introduces a new hook API - useId, that generates stable ids during server rendering and hydration to avoid mismatches.
Read more >
useId - React Docs
useId is a React Hook for generating unique IDs that can be passed to ... useId requires an identical component tree on the...
Read more >
Acetaminophen (Tylenol®) - Nationwide Children's Hospital
Acetaminophen is used to reduce fever and treat pain. ... If your child gags or chokes and spits out the dose before swallowing...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Uncaught DOMException when having `<!DOCTYPE html>` and setting the `parentDom` to `document` when rendering

Next page

Hydration removes and add nodes again when there are HTML comments just before them