در این قسمت به بررسی هوک useContext می پردازیم . در صورتی که با context در ری اکت آشنایی ندارید میتوانید به داکیومنت رسمی ری اکت مراجعه کنید :
https://reactjs.org/docs/hooks-reference.html#usecontext
کاربرد این هوک به این صورت است که میتوانید به مقادیر یک آبجکت context دسترسی پیدا کنید . توجه کنید که با هر آپدیت مقادیر context کامپوننتی که از این هوک استفاده میکند هم rerender میشود . که برای بهینه سازی بهتر میتوانید از React.memo یا shouldComponentUpdate استفاده کنید .
طبق داکیومنت رسمی ری اکت روش صحیح استفاده از useContext به صورت زیر است :
برای درک بهتر این مثال بهتر است یک مثال عملی تر را بررسی کنیم . ابتدا داخل یک فایل یک context ایجاد میکنیم . ( با مقدار اولیه صفر) :
سپس در یک فایل دیگر یک کامپوننت ایجاد میکنیم و از context که در عکس قبل تعریف کردیم استفاده میکنیم :
سپس باید کامپوننت ShowCurrentValue را ایجاد کنیم . درواقع در این کامپوننت برای دستیابی به مقدار count از useContext استفاده میکنیم. ( با پاس دادن مقدار count هم میتوانیم به مقدار آن دسترسی داشته باشیم ولی در این مقاله هدف، آموزش استفاده از این hook است)
همانطور که در شکل بالا می بینید با استفاده از useContext به مقدار count دسترسی پیدا کردیم . با هر تغییر در مقدار count کامپوننت showCurrentValue نیز rerender میشود .
همانطور که دیدید استفاده از هوک useContext پیچیدگی زیادی ندارد . در صورتی که نظر یا انتقادی دارید حتما کامنت کنید . با تشکر
