| 511 | // prior to the state being updated. This results in onSelectionChange being called multiple times. |
| 512 | // TODO: refactor useComboBoxState to avoid this. |
| 513 | function useValueId(depArray: ReadonlyArray<any> = []): string | undefined { |
| 514 | let id = useId(); |
| 515 | let [exists, setExists] = useState(true); |
| 516 | let [lastDeps, setLastDeps] = useState(depArray); |
| 517 | |
| 518 | // If the deps changed, set exists to true so we can test whether the element exists. |
| 519 | if (lastDeps.some((v, i) => !Object.is(v, depArray[i]))) { |
| 520 | setExists(true); |
| 521 | setLastDeps(depArray); |
| 522 | } |
| 523 | |
| 524 | useEffect(() => { |
| 525 | if (exists && !document.getElementById(id)) { |
| 526 | // oxlint-disable-next-line react-hooks-js/set-state-in-effect |
| 527 | setExists(false); |
| 528 | } |
| 529 | }, [id, exists, lastDeps]); |
| 530 | |
| 531 | return exists ? id : undefined; |
| 532 | } |