()React.memo

- اول باید بدونیم memoization چیه ؟ یه تکنیکه که با جلوگیری کردن از render های غیرضروری باعث بهینه سازی performance میشه :))

- حالا چطوری ؟ وقتی با ()React.memo (که یه HOC هست) یه کامپوننت رو wrap میکنیم React کامپوننت رو render میکنه و نتیجه شو memoize میکنه و قبل از render بعدی ،پراپز رو مقایسه میکنه و اگر تغییری نکرده باشه React از نتیجه حفظ شده استفاده می کنه و از rerender شدن جلوگیری میکنه.

بریم سراغ یه مثال . وارد این لینک شو

توی App.js یه input داریم برای نوشتن و یه دکمه که هر وقت روش کلیک کنی counter یکی زیاد میشه و یه ChildComponent داریم که count رو به عنوان props بهش پاس میدیم

- خب حالا مشکل چیه؟ مشکل اینه که وقتی شما توی input چیزی تایپ میکنی ChildComponent داره بیخودی rerender میشه (یعنی هر وقت App ما rerender بشه ChildComponent هم rerender میشه) در صورتی که فقط اگر روی دکمه Increment کلیک شد باید rerender بشه

- راه حل چیه؟ React.memo

فقط کافیه توی خط ۲۷ ام codesandbox با استفاده از React.memo کامپوننتو wrap کنی

const ChildComponent = React.memo(({ count }) => {
console.log(&quotchild component is rendering&quot);
return (
<div>
<h2>This is a child component.</h2>
<h4>Count: {count}</h4>
</div>
);
});

-کی ازش استفاده نکنیم؟ وقتی کامپوننتمون زیادی سنگین نیست و معمولاً با props های مختلف render میشه، به احتمال زیاد به ()React.memo نیازی نداریم.

در آخر باید بگم که این اولین مقاله من هست و پذیرای هر گونه پیشنهاد و انتقادتون هستم :))