Не популярні, але корисні хуки в React (1/3)

const inputId = useId();

Використовується в динамічних формах для зв'язки input та label, а також в компоненті врапері для label+input якщо ви не хочете прокидувати id як пропс. Безпечний для SSR.

const inputId = useId();
return <>
  <label htmlFor={inputId}>Hello</label>
  <input id={inputId}/>
</>

Деталі: ключ не випадковий, має вигляд :rX: де X просто глобальний counter в React. Якщо (випадково) у вас 2+ реакт застосунків на сторінці - використовуйте identifierPrefix, який передається при ініціалізації React застосунку

Сторонній ефект: Автоматизатори, які покаладються на id елементів вас не люблять. А все тому що треба користуватися data-test-id, а не лізти куди не просять.

Документація

@reactbeginners