هوک useId در ری اکت یکی از باحال ترین و خفن ترین هوک هایی هست که تو نسخه 18 به React اضافه شده . الان که دارم این مقاله رو مینویسم کمتر کسی میدونه که هوک useId ری اکت چیه و چیکار میکنه !
نسخه 18 ری اکت قابلیت ها و هوک های جالبی با خودش بهمراه داشت که یکی از کاربردی ترین هوک های معرفی شده در نسخه 18 ری اکت ، هوک useId بود.
اگه با این هوک کاربردی آشنا نیستین ، با توجه به کارایی خیلی خیلی زیادی که برای ما داره و به عنوان یک React Developer باید بلد باشیم چطور ازش استفاده کنیم ، ادامه این مقاله رو با فِرانت اِندی همراه باشید تا بررسیش کنیم .. ?
هوک useId در React به ما در تولید شناسه های یکتا ( Unique key ) کمک میکنه. ( تقریبا شبیه به Math.random یا کتابخانه هایی مثل uuid )
هوک useId همون هوک useOpaqueIdentifier سابق هست که قبلا معرفی شده بود اما مشکلاتی توی این هوک وجود داشت که پس از اعمال برخی تغییرات این هوک به useId تغییر نام پیدا کرد.
کتابخانه های زیادی مثل uuid یا خود Math.random برای ما شناسه یکتا تولید میکنن . اما یه مشکل بزرگ دارن !
شناسه یکتا ( Unique key ) تولید شده در Client ( سمت کاربر ) با Server ( سمت سرور ) متفاوت میشه ! و این موضوع منجر به بروز خطاهای ناخواسته میشه.
استفاده از useId خیلی آسونه !
تو تیکه کد زیر من توسط useId یک شناسه یکتا تولید کردم و همون شناسه یکتا رو به کاربر نشون دادم :
import { useId } from 'react'; function App() { const uniqueId = useId(); // تولید شناسه یکتا return <h3> my unique Key : {uniqueId} </h3> } export default App;
تو خط 4 به کمک هوک useId در React یک شناسه یکتا تولید کردیم و به کاربر نشون دادیم.
میتونیم همین شناسه یکتا رو به عنوان key برای Element های خودمون استفاده کنیم . مثل :
<div key={uniqueKey}> فِرانت اِندی </div>
در اینکه هوک useId خیلی مفید و کاربردیه هیچ شکی نیست ! در موارد زیر میتونید از هوک useId استفاده کنید :
تو این مقاله در مورد هوک useId در ری اکت و کاربردش صحبت کردیم.
دیدیم که بزرگترین مزیت این هوک تولید شناسه یکتای واحد بین Client و Server هست. یعنی شناسه یکتای تولید شده سمت کاربر و سرور کاملا یکسانه.
تو این مقاله امکان درج تمامی مثال ها + تیکه کد ها وجود نداره ، لطفا برای مطالعه نسخه کامل این مقاله روی لینک آموزش هوک useId در ری اکت کلیک کنید.
