useState

سلام روزتون بخیر من چند تا مشکل داشتم که دوتاش ربطی به این جلسه هم نداره

1. این دو مدل نوشتن یکسان هست یا اولی برتری داره که شما از اولی استفاده میکنید

useState((prev) => [...prev, data])
useState([...state, data])

2. لطفا forwardRef و useMemo توضیح میدید

سلام خدمت شما. فکر کنم برای سوال اول منظورتون setState بوده. من ترجیح میدم از روش اول استفاده کنم که خود React هم همینو توصیه کرده که برای استفاده از مقدار قبلی از prev استفاده کنیم.

سوال 2 :

ما توی React بحثی به نام ref داریم که برای دسترسی به DOM استفاده میشه ازش حالا وقتی بخوایم این ref رو لایه‌های پایین Component‌ها ارسال کنیم از forwradRef استفاده می‌کنیم. مثلا یک Component فرزند میخواد به ref والد دسترسی داشته باشه. useMemo برای memoziation استفاده میشه و معنیش این هست که اگر محاسبه یک مقداری وابسته به ورودی‌ها اون هست تا زمانی که ورودی‌ها تغییر نکردن دوباره اون محاسبه انجام نشه. مثلا تا props ورودی Component تغییری نکنه ما محاسبه رو دوباره اجرا نکنیم و این باعث بهینه سازی میشه.

کیوان علی محمدی ۰۴ آذر ۱۳۹۹، ۰۶:۱۴

من توی یه کامپوننتم از datepicker استفاده کردم و اومدم یه customInput براش نوشتم از هیچ ref ای هم استفاده نکردم تو کنسول به من گیر میده که باید واسه کامپونتت customInput بیای از forwardref استفاده کنی

واسه زمانی که context میدیم به یه کامپوننت هم useMemo به درد میخوره من تو یه کامپوننت دیدم اومده بود پارامترهای context توی useMemo گذاشته بود و راستش خیلی درک نکردم چه بهینگی واسش ایجاد میکنه اینکه گفتم این دوتا رو توضیح بدید دلیلش همین بود چون توی عمل واقعا جایی که مثلا سنیور شرکت ما داره استفاده میکنه من اگه میزدم استفاده نمیکردم

زهرا نمازی ۰۴ آذر ۱۳۹۹، ۰۶:۳۰

معمولا توی Component‌های آماده که این مساله رعایت نمیشه این هشدار رو نشون میده و شما هم نمی‌تونید کاری کنید چون دست شما نیست. باید سورس کدهای اون Component اماده تغییر کنه.

توی بحث Context هم چون بر اساس تغییر داده‌های ورودی Context رندر دوباره در تمامی Consumer‌ها اتفاق میفته استفاده از useMemo می‌تونه بهینه سازی و جلوگیری از رندر دوباره بشه.

کیوان علی محمدی ۰۴ آذر ۱۳۹۹، ۰۶:۴۷

به کامپوننت آماده گیر نمیده به کد من گیر میده که اضافه کردم تا ظاهر اینپوت datepicker عوض کنم

const CustomInput = React.forwardRef((props, ref) => (
  <div
    className="input-datepicker"
    onClick={props.onClick}
  >
    {props.value}
    <i className="fa fa-calendar-alt float-right"></i>
  </div>
))

زهرا نمازی ۰۴ آذر ۱۳۹۹، ۰۹:۰۲

توی کدی که قرار دادی باید ref منتقل شده رو استفاده کنید.

const CustomInput = React.forwardRef((props, ref) => (
  <div
    className="input-datepicker"
    onClick={props.onClick}
    ref={ref} // HERE
  >
    {props.value}
    <i className="fa fa-calendar-alt float-right"></i>
  </div>
))

کیوان علی محمدی ۰۴ آذر ۱۳۹۹، ۰۹:۱۴

اگه React.forwardRef نزارم تو کنسول به من ارور میده که این اضافه کنم مشکل من همینه که من نمیخوام از ref استفاده کنم چرا همچین گیری میده و من همینجور الکی اول کامپوننتم گذاشتمش اگه براش دارم این خطا رو میده و این نشون میده من هنوز نمیدونم کجا باید این forwardref بزارم :)

webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:88 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `o`.
    in CustomInput (at SetupDate.js:243)

زهرا نمازی ۰۴ آذر ۱۳۹۹، ۰۹:۲۳

اگر دقت کنید خطای شما داره از فایل setupDate.js میاد و این قطعا برای کتاب خونه ای هست که استفاده کردید. اگر اون Component ای که از کتابخونه میاد نیاز به استفاده از ref داشته باشه و شما اون رو داخل یک Component دیگه wrap کرده باشید شما باید forwardRef رو براش استفاده کنید

کیوان علی محمدی ۰۴ آذر ۱۳۹۹، ۱۶:۰۱