در React، memoization با React.memo، useMemo و useCallback برای کاهش رندرهای غیرضروری استفاده میشود. با این حال، حتی با این ابزارها، استفاده از arrow function مستقیم در JSX میتواند باعث شکستن بهینه سازی شود.
import { memo, useCallback } from 'react';
const Item = memo(({ click }) => {
console.log('Item rendered');
return <button ={click}>Click me</button>;
});
function App({ value }) {
const handleClick = useCallback(() => {
}, [value]);
return <Item click={)()=>handleClick()} />;
}
export default App;
در کد بالا، handleClick با useCallback ساخته شده و تا وقتی تغییر نکند، تابع ثابت میماند. این باعث میشود memoization روی handleClick کارآمد باشد و از رندرهای غیرضروری جلوگیری شود.
<Item ={() => handleClick()} />
اما مشکل اینجاست که وقتی از arrow function استفاده میکنیم هر بار که مؤلفه رندر میشود، یک تابع جدید میسازد. درسته که از useCallback استفاده کردیم اما هر بار که تابع را می سازیم دارای یک مرجع (reference) جدید است.
تابع handleClick به عنوان یک prop به مؤلفه Item پاس داده میشود.
هر بار که مؤلفه والد رندر میشود، arrow function جدید ساخته میشود و مرجع آن تغییر میکند.
چون Item با React.memo نوشته شده است، React props قبلی و جدید را مقایسه میکند.
از آنجا که مرجع تابع تغییر کرده، React فکر میکند props تغییر کرده و Item دوباره رندر میشود.
نتیجه: memoization کار نمیکند، Item همیشه رندر میشود و تمام بهینهسازیها از بین میرود.
