فرق بین useState با useRef در React چیست؟

1. تفاوت‌های اصلی
   1. رندر مجدد
   2. تغییرات همزمان
   3. نگه‌داری داده‌ها
   4. سناریوهای خاص
2. مثال‌ها

تفاوت‌های اصلی

رندر مجدد

بزرگ‌ترین تفاوت بین useState و useRef این است که استفاده از useState باعث رندر مجدد کامپوننت می‌شود، در حالی که useRef چنین تاثیری ندارد. وقتی که یک وضعیت با useState تغییر کند، کامپوننت دوباره رندر می‌شود و این ممکن است برای عملکردهای خاصی که نیازی به رندر مجدد ندارند، کار را پیچیده کند.

تغییرات همزمان

تنظیم مقدار در useRef به صورت همزمان (synchronous) انجام می‌شود، در حالی که تغییر در useState به صورت غیرهمزمان (asynchronous) می‌باشد. این مهم است زیرا ممکن است در سناریو هایی خاص نیاز داشته باشید که از حالت همزمان استفاده کنید، مانند جلوگیری از ایجاد حلقه‌های بی‌نهایت در زمان استفاده از متدهایی که به state وابسته هستند.

نگه‌داری داده‌ها

هر دو useState و useRef می‌توانند داده‌ها را پس از رندرهای مجدد نگه‌داری کنند اما با رفتارهای متفاوت. به طور مثال، وقتی که از useState برای نگه‌داری یک شمارنده استفاده می‌کنید، هر بار که روی دکمه کلیک می‌شود، کامپوننت دوباره رندر می‌شود و مقدار شمارنده به روز می‌شود. از طرف دیگر، با useRef، می‌توان مقدار شمارنده را به روز کرد بدون اینکه کامپوننت دوباره رندر شود.

سناریوهای خاص

• اگر متغیری دارید که فقط می‌خواهید وضعیت آن را پیگیری کنید و لازم نیست که تغییر آن موجب ری رندر بشود، بهتر است از useRef استفاده کنید.
• در مقابل، اگر متغیری دارید که تغییر آن باید باعث تغییر در UI شود (مانند یک شمارنده)، باید از useState استفاده کنید.

مثال‌ها

به عنوان یک مثال، فرض کنید می‌خواهید یک تایمر داشته باشید:

با useRef:

      function Timer() {
  const intervalRef = useRef();
  
  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    intervalRef.current = id;
    return () => {
      clearInterval(intervalRef.current);
    };
  });

  // ...
}

    

با useState:

      function Timer() {
  const [intervalId, setIntervalId] = useState(null);

  useEffect(() => {
    const id = setInterval(() => {
      // ...
    });
    setIntervalId(id);
    return () => {
      clearInterval(intervalId);
    };
  });

  // ...
}