This component has accessibility ID issues. Fix it with `useId`.

The issue with using Math.random() (or Date.now()) for generating IDs in React, especially in server-rendered (SSR) applications, is that these functions are non-deterministic.

• Hydration Mismatch: In an SSR environment, the server renders the HTML, including the generated IDs. When the client-side React code then “hydrates” this HTML, it re-renders the components. If Math.random() is used, it will likely generate a different random number on the client than it did on the server. React sees this discrepancy in the generated IDs, leading to a hydration mismatch warning (e.g., “Text content did not match server-rendered HTML”).
• Duplicate IDs: While Math.random() is unlikely to produce duplicates in a single render, it’s not guaranteed. More importantly, if you have multiple instances of the same component, or if the component re-renders, you might accidentally generate the same ID, which breaks the fundamental rule of HTML IDs (they must be unique within the document).

The useId hook, introduced in React 18, is specifically designed to solve this problem. It generates a unique ID that is:

• Stable: The same ID is generated on both the server and the client for a given component instance, preventing hydration mismatches.
• Unique: It guarantees uniqueness across the entire application, even for multiple instances of the same component.

Here is the corrected implementation:

import React, { useState, useId } from 'react';

function CustomCheckbox({ label, checked, onChange }) {
  // FIX: Use useId to generate a stable and unique ID.
  const uniqueId = useId();

  return (
    <div>
      <input
        type="checkbox"
        id={uniqueId}
        checked={checked}
        onChange={onChange}
      />
      <label htmlFor={uniqueId}>{label}</label>
    </div>
  );
}

export default function App() {
  const [isChecked1, setIsChecked1] = useState(false);
  const [isChecked2, setIsChecked2] = useState(true);

  return (
    <div style={{ padding: '20px' }}>
      <h1>Accessibility ID Issues</h1>
      <CustomCheckbox
        label="Enable Feature A"
        checked={isChecked1}
        onChange={() => setIsChecked1(!isChecked1)}
      />
      <CustomCheckbox
        label="Enable Feature B"
        checked={isChecked2}
        onChange={() => setIsChecked2(!isChecked2)}
      />
      <p>Check the console for potential hydration warnings or inspect elements for duplicate IDs.</p>
    </div>
  );
}

By replacing Math.random() with useId(), we ensure that each checkbox instance has a unique and stable ID, resolving both hydration mismatches in SSR and potential duplicate ID issues, thereby improving accessibility.