هوک useId ری اکت و بررسی تخصصی useId در React !
هوک useId در ری اکت یکی از باحال ترین و خفن ترین هوک هایی هست که تو نسخه 18 به React اضافه شده . الان که دارم این مقاله رو مینویسم کمتر کسی میدونه که هوک useId ری اکت چیه و چیکار میکنه !
نسخه 18 ری اکت قابلیت ها و هوک های جالبی با خودش بهمراه داشت که یکی از کاربردی ترین هوک های معرفی شده در نسخه 18 ری اکت ، هوک useId بود.
اگه با این هوک کاربردی آشنا نیستین ، با توجه به کارایی خیلی خیلی زیادی که برای ما داره و به عنوان یک React Developer باید بلد باشیم چطور ازش استفاده کنیم ، ادامه این مقاله رو با فِرانت اِندی همراه باشید تا بررسیش کنیم .. 🙂
هوک useId در ری اکت چیست ؟
هوک useId در React به ما در تولید شناسه های یکتا ( Unique key ) کمک میکنه. ( تقریبا شبیه به Math.random یا کتابخانه هایی مثل uuid )
هوک useId همون هوک useOpaqueIdentifier سابق هست که قبلا معرفی شده بود اما مشکلاتی توی این هوک وجود داشت که پس از اعمال برخی تغییرات این هوک به useId تغییر نام پیدا کرد.
تو اپیکیشن هایی که با ری اکت توسعه داده میشن ، خیلی جاها به یک آیدی یا شناسه یکتا و منحصر بفرد نیاز پیدا میکنیم.
خب تا الان این نیاز رو با Math.random یا کتابخانه هایی مثل uuid برطرف میکردیم اما Math.random یا uuid دارای مشکلاتی هستن.
مشکل uuid و Math.random در تولید شناسه یکتا چیست ؟
کتابخانه های زیادی مثل uuid یا خود Math.random برای ما شناسه یکتا تولید میکنن . اما یه مشکل بزرگ دارن !
شناسه یکتا ( Unique key ) تولید شده در Client ( سمت کاربر ) با Server ( سمت سرور ) متفاوت میشه ! و این موضوع منجر به بروز خطاهای ناخواسته میشه.
این موضوع مخصوصا زمانیکه تو اپیکیشن خودتون از Server Component ( کامپوننت های سمت سرور ) استفاده کرده باشید کاملا مشهوده چون بخش هایی از اپیکیشن سمت کلاینت و بخش هایی سمت سرور داره اجرا میشه.
ابزار هایی مثل Math.random نمیتونن یک شناسه یکتا واحد بین کلاینت و سرور تولید کنن.
تولید شناسه یکتا واحد بین کلاینت و سرور
تو برخی پروژه ها رندر کامپوننت های ما بصورت ترکیبی بین کلاینت و سرور صورت میگیره. یعنی ممکنه چند تا از کامپوننت های ما سمت سرور Render بشه و مابقی در Client .
در چنین سناریو هایی باید شناسه های یکتای تولید شده در Client و Server با همدیگه Sync ( یکسان ) باشن.
هوک useId یک شناسه یکتا برای ما تولید میکنه که در سمت کاربر و سمت سرور کاملا یکسانه ! پس مشکلاتی که در Math.random و uuid برای تولید شناسه یکتا داشتیم ، در هوک useId نداریم.
چطور از هوک useId در React استفاده کنیم ؟
استفاده از 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 استفاده کنید :
- هر زمان به شناسه یکتا ( Unique key ) احتیاج داشتید.
- هر موقع خواستیم دو یا چند اِلِمان رو به همدیگه ربط بدیم ( با اختصاص دادن یک شناسه واحد به اون Element ها )
اما چه زمانی نباید از useId استفاده کنیم ؟
- اگه کامپوننت شما از نوع Functional Component نیست !
- اگه میخواید تو Css از این شناسه های یکتا استفاده کنید یا توسط این شناسه یکتا ، استایل به Element بدید ( چون شناسه یکتای تولید شده دارای کاراکتر ; هست و این کاراکتر در Css پشتیبانی نمیشه )
- اگه مقادیر شما immutable هستن.
بیاید یک سناریوی دیگه برای استفاده کردن از useId رو در نظر بگیریم.
هوک useId در فرم ها
کامپوننت زیر ، برای دریافت یک مقدار از کاربر مورد استفاده قرار میگیره:
const Form = () => {
return (
<>
<input id="user" />
</>
)}
اما فرض کنید بخوایم این کامپوننت Form رو چند بار در صفحه استفاده کنیم. چون id تمامی input ها یک مقدار یکسان هست برای ما مشکل ایجاد میکنه.
مثلا زمانیکه میخوایم به id=user دسترسی پیدا کنیم با چندین Element مواجه میشیم !! چون چندین بار این کامپوننت رو فراخوانی کردیم.
برای رفع این مشکل باید id های متفاوتی به این Element بدیم.
یعنی کامپوننت بالا رو بصورت زیر تعریف کنیم :
const Form = () => {
const randomId = useId();
return (
<>
<input id={randomId} />
</>
)}
جمع بندی
تو این مقاله در مورد هوک useId در ری اکت و کاربردش صحبت کردیم.
دیدیم که بزرگترین مزیت این هوک تولید شناسه یکتای واحد بین Client و Server هست. یعنی شناسه یکتای تولید شده سمت کاربر و سرور کاملا یکسانه.
همچنین معایب Math.random و کتابخانه هایی نظیر uuid رو دیدیم که امکان تولید شناسه یکتای واحد بین کلاینت و سرور رو ندارن !
امیدوارم که آموزش هوک useId براتون مفید واقع شده باشه 🙂
اگه دوست دارید هوک های بیشتری رو تو React یادبگیرید ، تو مقاله هوک ها در ری اکت ، 11 هوک ری اکت رو بررسی کردیم.
هوک useId در React یک شناسه یکتا ( Unique key ) برای ما تولید میکنه. تقریبا مشابه Math.random یا uuid.
شناسه یکتای تولید شده در useId بین کلاینت و سرور کاملا یکسانه! بر خلاف uuid که شناسه های یکتای تولید شده ی اون در Server و Client با همدیگه متفاوت هستن. و این موضوع مشکلات زیادی برای ما ایجاد میکنه.
این هوک در نسخه 18 ری اکت معرفی شد .
دیدگاهتان را بنویسید