How to gentrate Unique Id in ReactJs

Question

I am new to ReactJS. I want to use Unique Id in my react program. So I create a custom hook, and that hook returns a unique id. But my situation is that when I use this custom hook in my component, at the same time my component is initialized twice. I don't know how to avoid multiple initial loads.

This is my custom Hook

import { useEffect, useReducer } from 'react';

export const CreateUniqueId = () => {
  const [renderId, forceUpdate] = useReducer((x) => x + 1, 0);

  useEffect(() => {
    forceUpdate();
  }, []);

  return renderId;
};

If you know the answer, tell me what I should do.

Thanks in advance.
 

Answer 1

You can use useId to create a distinct ID rather than hardcoding one.:

1. import { useId } from 'react';
2. function PasswordField() {
3. const passwordHintId = useId();
4. return (
5. <>
6. <label>
7. <input.
8. type="password"

For more information, you can refer to our React JS Certification today.