https://dmitripavlutin.com/use-react-memo-wisely/
مقاله خوبی است که کاربرد React.memo را برای افزایش سرعت renderکردن با یک مثال ساده توضیح داده است.

در ادامه با یک مثال ساده این کار را با هم مرور می کنیم:
ابتدا یک پروژه react ایجاد کنید (به کمک دستورات زیر)

npx create-react-app my-app
cd my-app
npm start

فایل app.js را می خواهیم تغببر دهیم

محتوای فایل را پاک کرده و برنامه زیر را جایگزین کنید
```
import React, { Component } from "react";
import ReactDOM from "react-dom";

const ScotchyComponent = props => <div>{props.message}</div>;

// create a version that only renders on prop changes
const MemoizedScotchyComponent = React.memo(ScotchyComponent);

// counter component
// we need a second moving component to trigger a render on our app
const Counter = props => <strong>{props.count}</strong>;

/
* Main App component
*/
class App extends Component {
state = { count: 0, value: "my message goes here" };

handleChange = e => this.setState({ value: e.target.value });
handleClick = () => this.setState(({ count }) => ({ count: count + 1 }));

render() {
const { count, value } = this.state;

return (
<div className="hero is-fullheight has-text-centered">
<div className="hero-body">
<div className="container">
<h1 className="title">
React.memo(): <Counter count={count} />
</h1>

<button
type="button"
className="button is-warning"
onClick={this.handleClick}
>
Increase Count
</button>

{/* two columns to show components */}
<input
type="text"
className="input"
value={value}
onChange={this.handleChange}
style={{ marginTop: "30px", marginBottom: "30px" }}
/>

{/* two columns to show components */}
<div className="columns is-mobile">
<div className="column">
<ScotchyComponent message={value} />
</div>
<div className="column">
<MemoizedScotchyComponent message={value} />
</div>
</div>
</div>
</div>
</div>
);
}
}


export default App;
‍‍‍‍```

اگر دستور

npm run start

را بزنید خواهیم داشت:

دو پیغام آخر در تصویر بالا از مولفه های بالا ساخته شده اند

همانطور که می بینید دومی memo شده است

خوب تاثیر این ان است که وقتی بر روی دکمه کلیک می کنیم این کامپوننت memo شده render نمی شود (بهبود performance)

در بخش inspect وارد profiler شوید

بر روی reload and start profiler کلیک کنید و سپس stop کنید

در گوشه یک تعداد frameهای commit شده در react می بینید
کنار ۱/۱ با مربع و یا مستطیل نمایش داده می شوند

همانطور که در تصویر مشخص است همه مولفه ها render شده اند (دارای زمان هستند)

حالا یک بار دیگر profiler را راه اندازی می کنیم و بر روی دکنه increase کلیک می کنیم و نتیجه را مقایسه می کنیم

همانطور که در تصویر می بینید مولفه memo شده در شرایطی که ورودی های آن تعییر نکرده است render نمی شوند ( با هاشور سفید رنگ نشان داده شده است)

چرا فقط مولفه غیر memo در این سناریو render شد؟
زیرا پدر مولفه با کلیک تغییر می کند و نیاز به render دارد. مولفه های که به صورت memo است از انجا که مقادیر آن تغییر نکرده است render نمی شود

شرکت همراه مکانیک به دنبال cto است اگر متقاضی هستید و یا فردی را می شناسید لطفا معرفی کنید.

https://www.hamrah-mechanic.com

استک تکنولوژی آنها مایکروسافتی است