Skip to content

Commit d127180

Browse files
Merge branch 'main' into dependabot/npm_and_yarn/glob-12.0.0
2 parents aa3e4c8 + ce802e0 commit d127180

File tree

1 file changed

+41
-7
lines changed

1 file changed

+41
-7
lines changed

src/routes/reference/component-apis/create-unique-id.mdx

Lines changed: 41 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,57 @@ tags:
99
- ssr
1010
- forms
1111
- utilities
12-
version: '1.0'
12+
version: "1.0"
1313
description: >-
1414
Generate unique IDs that are stable across server and client with
1515
createUniqueId. Essential for accessible forms and SSR-compatible components.
1616
---
1717

18-
```ts
19-
import { createUniqueId } from "solid-js"
18+
The `createUniqueId` function generates a unique ID that remains consistent across both server and client renders.
19+
It is commonly used with HTML `id` and `for` attributes to ensure stable hydration.
20+
21+
`createUniqueId` does *not* generate a cryptographically secure ID and is not suitable for security-sensitive data.
22+
Additionally, it should not be used in scenarios that require uniqueness across a distributed system.
23+
24+
:::note
25+
`createUniqueId` relies on a counter-based mechanism to generate IDs.
26+
It must be called the same number of times on both the server and client.
27+
28+
Calling `createUniqueId` only on the server or only on the client, such as when using [`isServer`](/reference/rendering/is-server) or [`<NoHydration>`](/reference/components/no-hydration), may lead to hydration errors.
29+
:::
2030

21-
function createUniqueId(): string
31+
## Import
2232

33+
```ts
34+
import { createUniqueId } from "solid-js";
2335
```
2436

25-
A universal id generator that is stable across server/browser.
37+
## Type
2638

2739
```ts
28-
const id = createUniqueId()
40+
function createUniqueId(): string;
2941
```
3042

31-
**Note:** on the server this only works under hydratable components.
43+
## Parameters
44+
45+
This function does not take any parameters.
46+
47+
## Returns
48+
49+
`createUniqueId` returns a unique `string` that is stable across server and client renders.
50+
51+
## Examples
52+
53+
### Basic Usage
54+
55+
```tsx
56+
import { createUniqueId } from "solid-js";
57+
58+
type InputProps = {
59+
id?: string;
60+
};
61+
62+
function Input(props: InputProps) {
63+
return <input id={props.id ?? createUniqueId()} />;
64+
}
65+
```

0 commit comments

Comments
 (0)