10 اشتباه واکنش شما باید به عنوان یک توسعه دهنده از آن جلوگیری کنید

React قدرتمند است ، اما حتی توسعه دهندگان باتجربه در تله های مشترک قرار می گیرند که می توانند عملکرد را کند کنند و اشکال زدایی را به کابوس تبدیل کنند. بیایید کاوش کنیم ده اشتباهاتی که باید به هر قیمتی از آن جلوگیری کنید!

1 ⃣ اصلاح مستقیم حالت
تغییر مستقیم حالت به جای استفاده setState یا تنظیم کننده حالت در قلاب می تواند باعث رفتار غیر منتظره شود. همیشه حالت را تغییر ناپذیر کنید.

❌ بد:

state.count = state.count + 1; // Wrong ❌

✅ خوب:

setState(prev => ({ count: prev.count + 1 })); // Correct ✅

2 ⃣ استفاده از کلیدها در لیست ها
React از کلیدها برای ردیابی کارآمد عناصر استفاده می کند. پرش از کلیدها در .map () می تواند منجر به مشکلات ارائه شود.

❌ بد:

items.map(item => <li>{item.name}</li>); // No key ❌

✅ خوب:

items.map(item => <li key={item.id}>{item.name}</li>); // Correct ✅

3 ⃣ RENDERS بیش از حد
رندرهای غیر ضروری می توانند به عملکرد آسیب برساند. استفاده کردن useMemoبا useCallbackوت React.memo در صورت لزوم

4⃣ تمیز کردن اثرات
فراموش کردن پاکسازی در useEffect می تواند باعث نشت حافظه شود ، به خصوص در شنوندگان و تایمرهای رویداد.

✅ همیشه پاکسازی:

useEffect(() => {
  const interval = setInterval(() => {
    console.log('Running...');
  }, 1000);

  return () => clearInterval(interval); // Cleanup ✅
}, []);

5⃣ استفاده غیر ضروری استفاده
بعضی اوقات ، useEffect برای کارهایی که بدون آن انجام می شود ، بیش از حد مورد استفاده قرار می گیرد ، مانند تنظیم مستقیم وضعیت در گیرنده های رویداد.

6⃣ نادیده گرفتن آرایه های وابستگی در استفاده
آرایه های وابستگی نادرست می توانند باعث ایجاد حلقه های نامتناهی یا به روزرسانی های مفقود شده شوند.

❌ بد:

useEffect(() => {
  fetchData();
}); // No dependency array ❌

✅ خوب:

useEffect(() => {
  fetchData();
}, [dependency]); // Correct ✅

7⃣ استفاده از حالت در هنگام بهتر شدن یک Ref
به روزرسانی های دولتی باعث ایجاد مجدد می شوند ، اما Refs این کار را نمی کند. اگر نیازی به واکنش پذیری ندارید ، از آن استفاده کنید useRefبشر

❌ بد:

const [count, setCount] = useState(0); // Re-renders on update ❌

✅ خوب:

const countRef = useRef(0); // No re-render ✅

8⃣ به روزرسانی های حالت ناهمزمان
به روزرسانی های گروه های React ، بنابراین با تکیه بر حالت منسوخ می تواند باعث ایجاد اشکالات شود.

❌ بد:

setCount(count + 1); // Might not update correctly ❌
setCount(count + 1); 

✅ خوب:

setCount(prev => prev + 1); // Always correct ✅
setCount(prev => prev + 1);

9⃣ مسدود کردن UI با محاسبات گران قیمت
محاسبات سنگین در رندر می تواند UI را کند کند. استفاده کردن useMemoبشر

❌ بد:

const result = expensiveCalculation(data); // Runs on every render ❌

✅ خوب:

const result = useMemo(() => expensiveCalculation(data), [data]); // Optimized ✅

🔟 به درستی خطاها را انجام ندهید
بدون مرز خطا ، یک تصادف می تواند کل برنامه را بشکند.

✅ همیشه از یک مرز خطا استفاده کنید:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h2>Something went wrong.</h2>;
    }
    return this.props.children;
  }
}

اجزای مانند این را بسته بندی کنید:

<ErrorBoundary>
  <MyComponent /> // component name
</ErrorBoundary>

💡 آیا این موارد مفید را پیدا کردید؟ چه اشتباهات واکنش دیگری را دیده اید؟ در نظرات به اشتراک بگذارید! 👇

💡 نکات واکنش بیشتری می خواهید؟ مرا برای پست های هفتگی در نوشتن کد React Better Recting دنبال کنید!