React Hook for Generated HTML ID (useful for accessible component implementation)

sample-component.jsx

import React from 'react';
import { useGeneratedHtmlId } from './use-generated-html-id';

export const SampleComponent = () => {
  const id = useGeneratedHtmlId('sample');
  
  return (
    <>
      <label htmlFor={id}>Sample component</label>
      <input id={id} type="text" />
    </>
  );
}

use-generated-html-id.js

import { useRef } from 'react';

export const generateHtmlId = (prefix) =>
  `${prefix}-${Date.now()
    .toString(36)
    .substr(3, 10)}`;

export const useGeneratedHtmlId = (prefix) => {
  const idRef = useRef(null);

  if (!idRef.current) {
    idRef.current = generateHtmlId(prefix);
  }

  return idRef.current;
};