Skip to content

Commit bf45563

Browse files
authored
Merge pull request #530 from stevemao/feature/manage-ids
add How to manage IDs
2 parents ead1767 + 1bd81ca commit bf45563

File tree

1 file changed

+8
-0
lines changed

1 file changed

+8
-0
lines changed

docs/rules/label-has-associated-control.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,14 @@ If the second `label` is in a different part of the HTML, then the second one ca
7373
</label>
7474
```
7575

76+
## How to manage IDs of `input`
77+
78+
A common way to think of `id` with libraries like React is, `id`s should be avoided since it must be unique on the page, and components need to be reusable. Hence it is tempted to generate `id` during render-time if `id` is required. *However:*
79+
80+
IDs shouldn't be generated in the browser, so that server and client rendering are deterministic. Render-time uuids aren't just a hack, they're actually broken and should never be used.
81+
82+
To restate, **every ID needs to be deterministic**, on the server and the client, and guaranteed to be unique on the page. EG: For each input, a required ID prop can be passed down from as far up the tree as possible to guarantee uniqueness.
83+
7684
## Rule details
7785

7886
This rule takes one optional object argument of type object:

0 commit comments

Comments
 (0)