چطور بدون استفاده از setState و تغییر حالت یک کامپوننت React را دوباره رندر کنیم؟

فرض کنید که حالتی برایتان پیش آمده که می خواهید کامپوننتی را در React بر اساس تغییر یک وضعیت خارج از کامپوننت مجدد رندر کنید. چون در حالت عادی، یک کامپوننت با تغییر وضعیت داخلی خود، مجدد رندر می شود.

برای این کار در کامپوننت‌های کلاسی، شما می‌توانید از متد this.forceUpdate() برای اجباری کردن رندر دوباره استفاده کنید. این متد به React می‌گوید که باید دوباره متد render را صدا بزند. با این حال، باید توجه داشته باشید که استفاده از forceUpdate به شدت محدود شده و معمولا توصیه نمی‌شود. استفاده بیش از حد از این متد می‌تواند به عنوان نشانه‌ای تلقی شود که شما به روش React در طراحی کامپوننت‌ها پایبند نیستید.

در کامپوننت‌های تابعی، مشابهی برای forceUpdate وجود ندارد، اما می‌توانید با استفاده از hook ها مانند useReducer یک راه حل برای اجباری کردن به‌روزرسانی‌ها ایجاد کنید. به عنوان مثال، با استفاده از یک hook، می‌توانید به سادگی یک تابع به روزرسانی ایجاد کنید که هر بار که برایش صدا زده می‌شود، یک تغییر در state ایجاد کند و این امر سبب می‌شود که کامپوننت دوباره رندر شود.

      function MyComponent(){
  const [, forceUpdate] = useReducer(x => x + 1, 0);

  return (
    <div onClick={forceUpdate}>
      Click me to refresh
    </div>
  );
}

    

روش‌های دیگری نیز وجود دارند که می‌توانند به شما کمک کنند تا بدون استفاده از setState، کامپوننت خود را به‌روزرسانی کنید. یکی از این روش‌ها، تغییر کلید (key) کامپوننت است. به عبارت دیگر، اگر شما کلید المان خود را تغییر دهید، React آن را به عنوان یک کامپوننت جدید می‌شناسد و به این ترتیب آن را دوباره رندر می‌کند. اما دقت کنید که این رویکرد می‌تواند به عوارض جانبی منجر شود و ممکن است باعث پیچیدگی بیشتر در کد شما شود.

به طور کلی، بهترین شیوه‌ها در React بر پایه عدم نیاز به روش‌هایی مانند forceUpdate طراحی شده‌اند. برای سنجش تغییرات بهتر است به state و props تکیه کنید و به جای اجباری کردن رندر، از روش‌های استاندارد مدیریت state استفاده کنید. به همین دلیل، بررسی کد شما و استفاده از منابع immutable می‌تواند به شفاف‌تر و کارآمدتر شدن کدهای شما کمک کند.