React.memo() এর ব্যবহার

শুধুমাত্র parent component এর মধ্যে অন্য কোন component বা pareent component এর re-render এর জন্য অযথা অন্য কোন component যেটির মধ্যে কোন পরিবর্তন হয়নি তারপরেও re-render হতে থাকে আর সেটিকে বন্ধ করতে চাই, তখন React.memo() আমাদেরকে help করে থাকে।

নিচের কোডে দেখা যাচ্ছে HeadingComponent কে memo এর মধ্যে রেখে export করা হচ্ছে, এটাকে বলে Higher Order Component । এর ফলে react কোথাও মেমরিতে cache করে রেখে দিবে। যতক্ষণ এই component এর মধ্যে কোন পরিবর্তন না হবে, ততক্ষণ এটি আর re-render হবে না।

import React from "react";
 
const HeadingComponent = (props) => {
  return <h1>{props.title}</h1>;
};
 
export default React.memo(HeadingComponent);