جایگزین شدن useEffect با function در بیشتر موارد

سلام
کاش یه نمونه گذاشته بودید

خب مشکلاتی که پیش میاد بیشتر به این شکل هست که باعث re-render بیش از حد میشه و خوانایی کد رو به شدت پایین میاره!

۱- رندر اضافی و غیرضروری:
وقتی یک state تغییر می‌کند، کامپوننت رندر می‌شود. اگر شما در useEffect یک state دیگر را بروزرسانی کنید (مثلاً مجموع سبد خرید را در useEffect محاسبه و در یک state ذخیره کنید)، باعث یک رندر اضافی می‌شوید. اما اگر مقدار را مستقیماً در حین رندر محاسبه کنید، همان یک رندر کافی است.
۲- پیچیدگی و خوانایی کمتر:
وجود چندین useEffect با وابستگی‌های مختلف، درک جریان داده را سخت می‌کند. در حالی که یک تابع ساده که در بدنه کامپوننت تعریف شده و مقدار را برمی‌گرداند، بسیار خواناتر است.

۳- احتمال خطا در وابستگی‌ها:
فراموش کردن وابستگی صحیح در useEffect می‌تواند باعث رفتارهای عجیب و باگ‌های سخت شود.

function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    const sum = items.reduce((acc, item) => acc + item.price, 0);
    setTotal(sum);
  }, [items]);

  return <div>Total: {total}</div>;
}

خب این کد ۲بار رندر میشه در صورتی که نیاز نیست

اگر شما فانکشن یا متغیر عادی تعریف کنید، منظور از عادی همچین چیزی هست:

const a=10;
let b=12;

function name(){
return "reza"
}

const surname=()=> {
return "parsian"
}

این ها هم با هربار رندر شدن refrence هاشون عوض میشه و متغیر های قبلی نیستند!
بهتره که بیرون از بدنه کامپوننت ساخته بشن یا از

1. useState
2. useMemo
3. useCallback
4. useRef
   استفاده بشه!