هوک useId در ریکت

قبل از معرفی هوک useId، برای تولید id یکتا از کتابخانه های جانبی یا توابعی مانند random استفاده میکردیم:

function MyComponent(){
    const id = Math.random();
    return ...
}

کد بالا مشکلاتی برای ما ایجاد میکند از جمله اینکه در هر رندر id بدست آمده متفاوت است و یا استفاده بین client و server هم با مشکل مواجهیم. برای تولید id میتوانیم از هوک useId استفاده میکنیم:

function MyComponent(){
    const id = useId();
    return ...
}

مقدار شناسه یکتا به ازای رندرهای متفاوت یکسان خواهد بود، حتی با رفرش صفحه نیز تغییر نخواهد کرد. از هوک useId برای ایجاد id یکتا برای استفاده در attribute های مربوط به فرمها میتوانیم کمک بگیریم:

function MyInput({label}){
    const id = useId();
    return (<>
        <label htmlFor={id} >{label}</label>
        <input type='text' id={id} />
   </>);
}

اکنون به ازای هر بار استفاده از کامپوننت MyInput المنتهای اینپوت شناسه متفاوتی خواهند گرفت:

function MyForm(){
    return (<form>
        <MyInput label={'first name :'} />
        <MyInput label={'last name :'} />
    </form>);
}

همچنین برای ایجاد شناسه یکتا و استفاده در accessbility attribute ها میتوانیم از این هوک استفاده کنیم:

function PasswordField() {
    const id = useId();
    return (<>
        <input type="password" aria-describedby={id} />
        <p id={id}>
    </>);
}