React JS 19 Tutorial in Hindi #49 - useId Hook in Reactjs
What is useId Hook
How to use it
Example
Interview Questions
The useId hook in React is a tool for generating unique IDs within a component. It's particularly useful for tasks like associating labels with form inputs or handling dynamic content where unique identifiers are needed. React 18 introduced useId to ensure IDs are consistent across server and client rendering, simplifying accessibility and dynamic UI management.
import { useId } from "react"
export default function App() {
return(
<div>
<UserForm />
<hr />
<UserForm />
</div>
)
}
function UserForm() {
const user =useId();
return(
<div>
<form action="">
<label htmlFor={user+"name"}>Enter User Name</label>
<input id={user+"name"} type="text" placeholder="enter name" />
<br /><br />
<label htmlFor={user+"password"}>Enter User password</label>
<input id={user+"password"} type="text" placeholder="enter password" />
<br /><br />
<label htmlFor={user+"skills"}>Enter User Skills</label>
<input id={user+"skills"} type="text" placeholder="enter skills" />
<br /><br />
<input id={user+"terms"} type="checkbox" placeholder="enter skills" />
<label htmlFor={user+"terms"}>Terms and Condition</label>
</form>
</div>
)
}