‏افکت‌های اضافی ری‌اکت رو خودکار پیدا کن

این پروژه یه پلاگین برای ESLint (و Oxlint) هست که موارد «You Might Not Need An Effect» رو تو کد ری‌اکت پیدا می‌کنه؛ یعنی همون جاهایی که برنامه‌نویس از useEffect استفاده کرده ولی اصلاً لازم نبوده. به گفتهٔ نویسنده هدف اینه که کد راحت‌تر دنبال بشه، سریع‌تر اجرا بشه و باگ کمتری داشته باشه. مخصوصاً برای کسایی که تازه دارن مدل ذهنی ری‌اکت رو یاد می‌گیرن خوبه، ولی حتی حرفه‌ای‌ها هم ممکنه سوپرایز بشن.

نویسنده می‌گه قانون رسمی خود ری‌اکت یعنی set-state-in-effect فقط setStateهای همزمان داخل افکت رو می‌گیره، ولی افکت‌های اضافی خیلی فراتر از این هستن. این پلاگین به جاش یه تحلیل عمیق‌تر انجام می‌ده: روی state و props و ref و منشأشون کار می‌کنه و حتی زمان اجرای افکت رو در نظر می‌گیره تا تشخیص بده منطقش واقعاً زائده یا نه. تمرکزش هم روی سینتکس‌ها و حالت‌های خاصه تا نسبت سیگنال به نویز بالا بمونه و الکی هشدار نده.

یکی از معروف‌ترین الگوهایی که می‌گیره no-derived-state هست؛ یعنی وقتی یه مقدار رو می‌شه مستقیم موقع رندر حساب کرد ولی به جاش تو یه state جدا ذخیره‌ش کردی و با افکت آپدیتش می‌کنی:

const [fullName, setFullName] = useState("");
useEffect(() => {
  // ❌ به جای ذخیره‌ی state مشتق‌شده، fullName رو مستقیم موقع رندر حساب کن
  setFullName(firstName + " " + lastName);
}, [firstName, lastName]);

قانون‌های دیگه‌ای هم داره که هرکدوم یه ضدالگوی رایج رو پوشش می‌دن: no-chain-state-updates برای زنجیره‌ای کردن آپدیت‌های state، no-event-handler برای وقتی که از state و افکت به جای هندلر رویداد استفاده می‌کنی، no-adjust-state-on-prop-change و no-reset-all-state-on-prop-change برای دستکاری state موقع تغییر prop، و no-external-store-subscription که پیشنهاد می‌ده به جای subscribe دستی تو افکت از useSyncExternalStore استفاده کنی.

نصبش از طریق npm یا yarn هست و چه با Flat Config چه با کانفیگ قدیمی ESLint و چه با Oxlint قابل تنظیمه؛ می‌تونی همه‌ی قانون‌ها رو با هم به صورت warning یا error روشن کنی یا فقط چندتای خاص رو. نویسنده پیشنهاد می‌کنه react-hooks/exhaustive-deps و no-floating-promises رو هم تو پروژه فعال کنی، چون پلاگین فرض می‌کنه وابستگی‌های افکت‌ها درست تنظیم شدن و این کمک می‌کنه تحلیلش دقیق‌تر باشه.

نکات کلیدی:

• پلاگین ESLint و Oxlint برای پیدا کردن useEffectهای غیرضروری تو ری‌اکت
• state و props و ref و زمان اجرای افکت رو تحلیل می‌کنه تا تشخیص بده منطق اضافیه یا نه
• قانون‌هایی مثل no-derived-state، no-event-handler و no-external-store-subscription داره با راه‌حل پیشنهادی
• قابل تنظیم با Flat Config، کانفیگ قدیمی و Oxlint؛ به صورت warning یا error
• پیشنهاد می‌شه exhaustive-deps هم فعال باشه تا تحلیل دقیق‌تر بشه