‏قانونِ react-compiler در Oxlint

به گفتهٔ مستندات، این قانون تحلیلِ React Compiler رو در حالتِ فقط-لینت اجرا می‌کنه و کدی که «قوانینِ React» رو نقض می‌کنه گزارش می‌ده؛ همون تشخیص‌هایی که eslint-plugin-react-compiler می‌داد. دلیلِ اهمیتش اینه که کدی که این قوانینو می‌شکنه ممکنه سرِ اجرا رفتارِ غیرقابل‌پیش‌بینی داشته باشه (UIِ کهنه، حلقهٔ بی‌نهایتِ رندر، ازدست‌رفتنِ state) و جلوی بهینه‌سازیِ خودکارِ کامپایلر رو هم می‌گیره.

مثلاً صداکردنِ شرطیِ یه هوک تخلفه، چون هوک‌ها نباید شرطی صدا زده بشن:

function Component(props) {
  if (props.cond) {
    useState(0); // هوک‌ها نباید شرطی صدا زده بشن
  }
  return <div>{props.text}</div>;
}

شکلِ درستش اینه که هوک رو بی‌قیدوشرط بالای کامپوننت صدا بزنی:

function Component(props) {
  const [state, setState] = useState(0);
  return <button onClick={() => setState(state + 1)}>{props.text}</button>;
}

نمونه‌های دیگهٔ تخلف هم خوندنِ ref حینِ رندر یا تغییرِ props و state‌ه.

یه گزینهٔ پیکربندی به اسم reportAllBailouts داره (پیش‌فرض false) که اگه روشنش کنی، جاهایی که کامپایلر یه کامپوننت یا هوک رو رد کرده—مثلاً به‌خاطرِ سینتکسِ پشتیبانی‌نشده—هم گزارش می‌شن، هرچند این‌ها لزوماً یعنی کدِ غلط نیست. برای فعال‌کردنش تو .oxlintrc.json کافیه پلاگینِ react رو اضافه و قانونِ react/react-compiler رو error کنی، یا تو CLI با فلگِ --deny و --react-plugin. این قانون از نسخهٔ v1.70.0 اضافه شده و هنوز آزمایشیه.

نکات کلیدی:

• قانونِ react/react-compiler در Oxlint تحلیلِ React Compiler رو در حالتِ فقط-لینت اجرا می‌کنه
• تخلف‌ها: هوکِ شرطی، setState موقعِ رندر، خوندنِ ref و تغییرِ props/state حینِ رندر
• رعایتِ قوانین اجازهٔ memoizationِ خودکار توسطِ کامپایلر رو می‌ده
• گزینهٔ reportAllBailouts برای گزارشِ bail-outها؛ آزمایشی و از نسخهٔ v1.70.0