چرا متد set در useState تغییرات را بلافاصله نشان نمیده؟ (React JS)

این مسئله‌ای که باهاش روبه‌رو شدی ناشی از اینه که به‌روزرسانی‌های state در React به صورت ناهم‌زمان (asynchronous) انجام می‌شن. یعنی وقتی تو از متد set برای به‌روزرسانی state استفاده می‌کنی، تغییرات بلافاصله در state اعمال نمی‌شن و این فرآیند ممکنه بعد از اجرای کامل تابع فعلی انجام بشه.

برای اینکه بدونی چرا این اتفاق می‌افته، باید بدونی که React به‌روزرسانی‌های state رو دسته‌بندی می‌کنه تا کارایی بهتری داشته باشه. این یعنی تغییرات state تا زمانی که اجرای فعلی تابع تموم نشه، انجام نمی‌شن.

حالا راه‌حل چیه؟ اگر نیاز داری که بعد از set کردن state، فوراً به مقدار به‌روزشده دسترسی داشته باشی، بهتره از useEffect استفاده کنی. این هوک بهت اجازه می‌ده که بعد از تغییر state، یک اکشن خاص رو اجرا کنی.

مثال:

import React, { useState, useEffect } from 'react';
function MyComponent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
   console.log('Count after update:', count);
   // Your logic here
  }, [count]);
  const handleClick = () => {
   setCount(count + 1);
   // At this point, the state is not updated yet
  };
  return (
   <div>
    <p>{count}</p>
    <button onClick={handleClick}>Increase</button>
   </div>
);
}

در این مثال، هر بار که count تغییر کنه، تابع useEffect اجرا می‌شه و می‌تونی فوراً به مقدار جدید count دسترسی داشته باشی.

بنابراین، برای اطمینان از اینکه تغییرات state به درستی منعکس می‌شن و بعد از به‌روزرسانی فوراً بهشون دسترسی داشته باشی، باید از useEffect استفاده کنی.

این روش تضمین می‌کنه که منطقت بعد از به‌روزرسانی state و رندر مجدد کامپوننت اجرا بشه و مشکل عدم دسترسی به مقدار جدید state رو حل می‌کنه.