اصلاح صحیح آرایه‌های وضعیت در React.js

اگر بخواهیم یک عنصر به انتهای یک آرایه در state اضافه کنیم از طریق روش زیر نباید این کار را انجام دهیم:

      this.state.arrayvar.push(newelement);
this.setState({ arrayvar: this.state.arrayvar });

    

استفاده از متد push برای اضافه کردن عناصر به آرایه وضعیت در React، به دلیل تغییر مستقیم وضعیت (State) می‌تواند منجر به بروز مشکلاتی در کد شود. مستندات React به وضوح بیان می‌کند که باید به وضعیت به عنوان یک متغیر غیرقابل تغییر (immutable) نگاه کرد. این بدان معنی است که به جای تغییر وضعیت به صورت مستقیم، باید از یک کپی از وضعیت فعلی استفاده کرد.

روش پیشنهادی برای اضافه کردن یک عنصر به آرایه به این شکل است:

      this.setState(prevState => ({
  arrayvar: [...prevState.arrayvar, newelement]
}));

    

این روش از یک تابع آپدیت‌کننده (updater function) استفاده می‌کند که به جلوگیری از شرایط رقابتی (race conditions) کمک می‌کند. همچنین، به جای استفاده از push، می‌توانید از عملگر گسترش (Spread Operator) استفاده کنید که ساختار کدی تمیزتری ارائه می‌دهد.

اگر به نسخه‌های قدیمی‌تر React کار می‌کنید، می‌توانید از متد concat استفاده کنید که به همین شکل یک آرایه جدید برمی‌گرداند:

      this.setState({
  arrayvar: this.state.arrayvar.concat([newelement])
});

    

فراهم آوردن یک آرایه جدید به جای تغییر مستقیم آن به شما این امکان را می‌دهد که از بروز مشکلاتی مانند عدم فعالیت برخی متدهای چرخه زندگی (lifecycle methods) مانند componentDidUpdate جلوگیری کنید.

در نهایت، توجیه کردن اینکه آیا این رویکرد ممکن است "هزینه" حافظه داشته باشد، در مقایسه با خطاهایی که می‌تواند در نتیجه تغییر غیر استاندارد وضعیت به وجود بیاید، چندان مهم نیست. اطمینان از کارکرد صحیح کد و منطق آن همواره از هزینه‌های جزئی مربوط به حافظه اهمیت بیشتری دارد.