From a5594d18b023edf40b201cb228e9729f0a46fd3a Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Thu, 4 Jan 2024 00:31:03 +0600 Subject: [PATCH 1/9] memo-10% --- src/content/reference/react/memo.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 26fa9ed9c..e6a30530d 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -4,7 +4,7 @@ title: memo -`memo` lets you skip re-rendering a component when its props are unchanged. +`memo` আপনাকে একটি কম্পোনেন্টের পুনরায় রেন্ডারিং এড়াতে দেয় যখন এর প্রপস অপরিবর্তিত থাকে। ``` const MemoizedComponent = memo(SomeComponent, arePropsEqual?) @@ -16,11 +16,11 @@ const MemoizedComponent = memo(SomeComponent, arePropsEqual?) --- -## Reference {/*reference*/} +## রেফারেন্স {/*reference*/} ### `memo(Component, arePropsEqual?)` {/*memo*/} -Wrap a component in `memo` to get a *memoized* version of that component. This memoized version of your component will usually not be re-rendered when its parent component is re-rendered as long as its props have not changed. But React may still re-render it: memoization is a performance optimization, not a guarantee. +একটি কম্পোনেন্টকে `memo`-তে মোড়ানো হলে এর *memoized* সংস্করণ পাওয়া যায়। এই মেমোয়াইজড কম্পোনেন্ট সাধারণত তার parent কম্পোনেন্ট পুনরায় রেন্ডার হলেও পুনরায় রেন্ডার করা হয় না, যদি তার প্রপস অপরিবর্তিত থাকে। তবে React তারপরও এটি পুনরায় রেন্ডার করতে পারেঃ মেমোয়াইজেশন একটি পারফরম্যান্স অপ্টিমাইজেশন, গ্যারান্টি নয়। ```js import { memo } from 'react'; @@ -30,7 +30,7 @@ const SomeComponent = memo(function SomeComponent(props) { }); ``` -[See more examples below.](#usage) +[নিচে আরো উদাহরণ দেখুন।](#usage) #### Parameters {/*parameters*/} From 6ec36bfa75b331fb8cbaae82829930ed65db3ccd Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Thu, 4 Jan 2024 00:36:49 +0600 Subject: [PATCH 2/9] memo-20% --- src/content/reference/react/memo.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index e6a30530d..9ff404cdb 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -32,21 +32,21 @@ const SomeComponent = memo(function SomeComponent(props) { [নিচে আরো উদাহরণ দেখুন।](#usage) -#### Parameters {/*parameters*/} +#### প্যারামিটারস {/*parameters*/} -* `Component`: The component that you want to memoize. The `memo` does not modify this component, but returns a new, memoized component instead. Any valid React component, including functions and [`forwardRef`](/reference/react/forwardRef) components, is accepted. +* `Component`: যে কম্পোনেন্টটি আপনি মেমোয়াইজ করতে চান। `memo` এই কম্পোনেন্টকে পরিবর্তন করে না, বরং এর পরিবর্তে একটি নতুন, মেমোয়াইজড কম্পোনেন্ট রিটার্ন করে। যেকোনো বৈধ React কম্পোনেন্ট, ফাংশন এবং [`forwardRef`](/reference/react/forwardRef) কম্পোনেন্টসহ, গ্রহণযোগ্য। -* **optional** `arePropsEqual`: A function that accepts two arguments: the component's previous props, and its new props. It should return `true` if the old and new props are equal: that is, if the component will render the same output and behave in the same way with the new props as with the old. Otherwise it should return `false`. Usually, you will not specify this function. By default, React will compare each prop with [`Object.is`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) +* **ঐচ্ছিক** `arePropsEqual`: দুটি আর্গুমেন্ট গ্রহণকারী একটি ফাংশন: কম্পোনেন্টের পূর্ববর্তী প্রপস এবং এর নতুন প্রপস। যদি পুরানো এবং নতুন প্রপস একই হয়ঃ অর্থাৎ, যদি কম্পোনেন্ট নতুন প্রপসের সাথে পুরানো প্রপসের মতোই আউটপুট দেয় এবং আচরণ করে, তাহলে এটি `true` রিটার্ন করবে। অন্যথায় এটি `false` রিটার্ন করবে। সাধারণত, আপনি এই ফাংশনটি নির্দিষ্ট করবেন না। ডিফল্ট হিসাবে, React প্রতিটি প্রপকে [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)-এর সাথে তুলনা করবে। -#### Returns {/*returns*/} +#### রিটার্নস {/*returns*/} -`memo` returns a new React component. It behaves the same as the component provided to `memo` except that React will not always re-render it when its parent is being re-rendered unless its props have changed. +`memo` একটি নতুন React কম্পোনেন্ট ফেরত দেয়। এটি `memo`-তে প্রদত্ত কম্পোনেন্টের মতোই আচরণ করে, তবে React সবসময় এটিকে তার প্যারেন্ট পুনরায় রেন্ডার হলে পুনরায় রেন্ডার করবে না, যদি না তার প্রপস পরিবর্তিত হয়। --- -## Usage {/*usage*/} +## ব্যবহার {/*usage*/} -### Skipping re-rendering when props are unchanged {/*skipping-re-rendering-when-props-are-unchanged*/} +### প্রপস অপরিবর্তিত থাকলে রি-রেন্ডারিং এড়ানো {/*skipping-re-rendering-when-props-are-unchanged*/} React normally re-renders a component whenever its parent re-renders. With `memo`, you can create a component that React will not re-render when its parent re-renders so long as its new props are the same as the old props. Such a component is said to be *memoized*. From 67e2d15668e5f1bd7104164837ccd3b557498df5 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Thu, 4 Jan 2024 01:04:03 +0600 Subject: [PATCH 3/9] memo-35% --- src/content/reference/react/memo.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 9ff404cdb..75e91d555 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -48,9 +48,9 @@ const SomeComponent = memo(function SomeComponent(props) { ### প্রপস অপরিবর্তিত থাকলে রি-রেন্ডারিং এড়ানো {/*skipping-re-rendering-when-props-are-unchanged*/} -React normally re-renders a component whenever its parent re-renders. With `memo`, you can create a component that React will not re-render when its parent re-renders so long as its new props are the same as the old props. Such a component is said to be *memoized*. +React সাধারণত একটি কম্পোনেন্ট পুনরায় রেন্ডার করে যখন এর প্যারেন্ট পুনরায় রেন্ডার হয়। `memo` দ্বারা, আপনি এমন একটি কম্পোনেন্ট তৈরি করতে পারেন যা React তার প্যারেন্ট পুনরায় রেন্ডার হলেও পুনরায় রেন্ডার করবে না, যতক্ষণ না এর নতুন প্রপস পুরানো প্রপসের সাথে একই থাকে। এমন একটি কম্পোনেন্টকে *মেমোয়াইজড* বলা হয়। -To memoize a component, wrap it in `memo` and use the value that it returns in place of your original component: +একটি কম্পোনেন্টকে মেমোয়াইজ করতে, এটিকে `memo`-এ wrap korun মোড়ান এবং এর রিটার্ন করা মানটি আপনার মূল কম্পোনেন্টের পরিবর্তে ব্যবহার করুনঃ ```js const Greeting = memo(function Greeting({ name }) { @@ -60,9 +60,9 @@ const Greeting = memo(function Greeting({ name }) { export default Greeting; ``` -A React component should always have [pure rendering logic.](/learn/keeping-components-pure) This means that it must return the same output if its props, state, and context haven't changed. By using `memo`, you are telling React that your component complies with this requirement, so React doesn't need to re-render as long as its props haven't changed. Even with `memo`, your component will re-render if its own state changes or if a context that it's using changes. +একটি React কম্পোনেন্টের সবসময় [pure রেন্ডারিং লজিক](/learn/keeping-components-pure) থাকা উচিত। এর অর্থ এটি একই আউটপুট ফেরত দেবে যদি এর প্রপস, স্টেট এবং কন্টেক্স্ট পরিবর্তিত না হয়। `memo` ব্যবহার করে, আপনি React-কে জানাচ্ছেন যে আপনার কম্পোনেন্ট এই প্রয়োজনীয়তাটি পূরণ করে, তাই React-এর প্রপস পরিবর্তিত না হলে পুনরায় রেন্ডার করতে হবে না। `memo` ব্যবহার করলেও, আপনার কম্পোনেন্ট তার নিজের স্টেট পরিবর্তন হলে অথবা ব্যবহৃত কন্টেক্স্ট পরিবর্তন হলে পুনরায় রেন্ডার করবে। -In this example, notice that the `Greeting` component re-renders whenever `name` is changed (because that's one of its props), but not when `address` is changed (because it's not passed to `Greeting` as a prop): +এই উদাহরণে, লক্ষ্য করুন যে `Greeting` কম্পোনেন্টটি `name` পরিবর্তিত হলে পুনরায় রেন্ডার হয় (কারণ এটি এর একটি প্রপ), কিন্তু `address` পরিবর্তন হলে নয় (কারণ এটি `Greeting`-এ প্রপ হিসেবে পাস করা হয় না): @@ -104,7 +104,7 @@ label { -**You should only rely on `memo` as a performance optimization.** If your code doesn't work without it, find the underlying problem and fix it first. Then you may add `memo` to improve performance. +**আপনি কেবল কর্মক্ষমতা অপ্টিমাইজেশন হিসাবে `memo`-এর উপর নির্ভর করা উচিত।** যদি আপনার কোড `memo` ছাড়া কাজ না করে, তাহলে প্রথমে মৌলিক সমস্যাটি খুঁজে বের করুন এবং তা ঠিক করুন। তারপর আপনি কর্মক্ষমতা উন্নতির জন্য `memo` যোগ করতে পারেন। From a06231c7479540c6af152331176026496aec63ae Mon Sep 17 00:00:00 2001 From: nafistiham Date: Thu, 4 Jan 2024 17:44:19 +0600 Subject: [PATCH 4/9] memo-50% --- src/content/reference/react/memo.md | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index 75e91d555..ab89a3ea2 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -110,15 +110,24 @@ label { -#### Should you add memo everywhere? {/*should-you-add-memo-everywhere*/} +#### আপনি কি সর্বত্র `memo` যোগ করবেন? {/*should-you-add-memo-everywhere*/} -If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful. +যদি আপনার অ্যাপ এই সাইটের মতো হয়, এবং বেশিরভাগ ইন্টারেকশন ভারী (যেমন একটি পৃষ্ঠা বা পুরো অংশ প্রতিস্থাপন করা) হয়, তাহলে মেমোয়াইজেশন সাধারণত অপ্রয়োজনীয়। অন্যদিকে, যদি আপনার অ্যাপ একটি ড্রয়িং এডিটরের মতো হয়, এবং বেশিরভাগ ইন্টারেকশন সূক্ষ্ম (যেমন shape সরানো), তাহলে মেমোয়াইজেশন আপনার কাছে খুব উপকারী মনে হতে পারে। -Optimizing with `memo` is only valuable when your component re-renders often with the same exact props, and its re-rendering logic is expensive. If there is no perceptible lag when your component re-renders, `memo` is unnecessary. Keep in mind that `memo` is completely useless if the props passed to your component are *always different,* such as if you pass an object or a plain function defined during rendering. This is why you will often need [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) and [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) together with `memo`. +`memo` দ্বারা অপ্টিমাইজেশন তখনই মূল্যবান যখন আপনার কম্পোনেন্ট একই নির্দিষ্ট প্রপসের সাথে প্রায়শই পুনরায় রেন্ডার হয়, এবং এর পুনরায় রেন্ডার লজিক খরচবহুল। যদি আপনার কম্পোনেন্ট পুনরায় রেন্ডার হওয়ার সময় কোনো লক্ষণীয় ধীরতা না থাকে, তাহলে `memo` অপ্রয়োজনীয়। মনে রাখবেন, যদি আপনার কম্পোনেন্টের পাস করা প্রপস *সর্বদা আলাদা* হয়, যেমন যদি আপনি একটি অবজেক্ট বা রেন্ডারিং সময় ডিফাইন করা একটি সাধারণ ফাংশন পাস করেন। এই কারণে আপনার প্রায়শই [`useMemo`](/reference/react/useMemo#skipping-re-rendering-of-components) এবং [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) এর সাথে `memo` ব্যবহার করা প্রয়োজন হবে। -There is no benefit to wrapping a component in `memo` in other cases. There is no significant harm to doing that either, so some teams choose to not think about individual cases, and memoize as much as possible. The downside of this approach is that code becomes less readable. Also, not all memoization is effective: a single value that's "always new" is enough to break memoization for an entire component. +`memo` দ্বারা একটি কম্পোনেন্ট wrap করার অন্যান্য ক্ষেত্রে কোনো উপকার নেই। এটি করলে বিশেষ কোনো ক্ষতি হয় না, তাই কিছু টিম প্রতিটি ক্ষেত্রে ভেবে না দেখে যথাসম্ভব মেমোয়াইজ করতে চায়। এই পদ্ধতির নেতিবাচক দিক হল কোড কম পাঠযোগ্য হয়ে যায়। এছাড়াও, সব মেমোয়াইজেশন কার্যকর নয়ঃ একটি "সর্বদা নতুন" মান পুরো কম্পোনেন্টের মেমোয়াইজেশন ভেঙ্গে দেবার জন্য যথেষ্ট। + +**ব্যবহারিকভাবে, কয়েকটি নীতি অনুসরণ করে আপনি ক্ষেত্রবিশেষে অনেক মেমোয়াইজেশন অপ্রয়োজনীয় করে তুলতে পারেনঃ** + +1. যখন একটি কম্পোনেন্ট অন্যান্য কম্পোনেন্টগুলিকে দৃশ্যত জড়িয়ে রাখে, তখন এটিকে [JSX চাইল্ড হিসাবে গ্রহণ করতে দিন](/learn/passing-props-to-a-component#passing-jsx-as-children)। এর ফলে, যখন র‍্যাপার কম্পোনেন্ট নিজের স্টেট আপডেট করে, React জানে যে এর চাইল্ডগুলিকে পুনরায় রেন্ডার করার প্রয়োজন নেই। +1. স্থানীয় স্টেটকে প্রাধান্য দিন এবং [স্টেট উপরে তোলা](/learn/sharing-state-between-components) প্রয়োজনের চেয়ে বেশি না করা ভালো। উদাহরণস্বরূপ, ফর্ম এবং কোনো আইটেম উপরে হোভার করা নিয়ে অস্থায়ী স্টেট আপনার ট্রির শীর্ষে বা একটি গ্লোবাল স্টেট লাইব্রেরিতে রাখবেন না। +1. আপনার [রেন্ডারিং লজিক শুদ্ধ](/learn/keeping-components-pure) রাখুন। যদি কোনো কম্পোনেন্ট পুনরায় রেন্ডার করা সমস্যা সৃষ্টি করে বা কোনো লক্ষণীয় দৃশ্য সমস্যা তৈরি করে, তাহলে এটি আপনার কম্পোনেন্টের বাগ! মেমোয়াইজেশন যোগ করার পরিবর্তে বাগটি ঠিক করুন। +1. [অপ্রয়োজনীয় ইফেক্ট যা স্টেট আপডেট করে](/learn/you-might-not-need-an-effect) এড়িয়ে চলুন। বেশিরভাগ React অ্যাপের কর্মক্ষমতা সমস্যা এমন আপডেট চেইন থেকে উদ্ভূত হয় যা ইফেক্ট থেকে আসে এবং আপনার কম্পোনেন্টগুলিকে বারবার রেন্ডার করায়। +1. আপনার ইফেক্ট থেকে [অপ্রয়োজনীয় নির্ভরতা সরিয়ে ফেলার](/learn/removing-effect-dependencies) চেষ্টা করুন। উদাহরণস্বরূপ, মেমোয়াইজেশনের পরিবর্তে, কোনো অবজেক্ট বা ফাংশনকে একটি ইফেক্টের মধ্যে বা কম্পোনেন্টের বাইরে সরান৤ + +যদি কোনো নির্দিষ্ট ইন্টারেকশন এখনও ধীর অনুভূত হয়, [React Developer Tools প্রোফাইলার ব্যবহার করুন](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) যে -**In practice, you can make a lot of memoization unnecessary by following a few principles:** 1. When a component visually wraps other components, let it [accept JSX as children.](/learn/passing-props-to-a-component#passing-jsx-as-children) This way, when the wrapper component updates its own state, React knows that its children don't need to re-render. 1. Prefer local state and don't [lift state up](/learn/sharing-state-between-components) any further than necessary. For example, don't keep transient state like forms and whether an item is hovered at the top of your tree or in a global state library. From ec83c3bac4bb870b437bf5790fe3aa6dfe6dafc2 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Sat, 6 Jan 2024 20:46:16 +0600 Subject: [PATCH 5/9] memo-80% --- src/content/reference/react/memo.md | 52 ++++++++++++++++------------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index ab89a3ea2..a477b85ad 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -126,24 +126,15 @@ label { 1. [অপ্রয়োজনীয় ইফেক্ট যা স্টেট আপডেট করে](/learn/you-might-not-need-an-effect) এড়িয়ে চলুন। বেশিরভাগ React অ্যাপের কর্মক্ষমতা সমস্যা এমন আপডেট চেইন থেকে উদ্ভূত হয় যা ইফেক্ট থেকে আসে এবং আপনার কম্পোনেন্টগুলিকে বারবার রেন্ডার করায়। 1. আপনার ইফেক্ট থেকে [অপ্রয়োজনীয় নির্ভরতা সরিয়ে ফেলার](/learn/removing-effect-dependencies) চেষ্টা করুন। উদাহরণস্বরূপ, মেমোয়াইজেশনের পরিবর্তে, কোনো অবজেক্ট বা ফাংশনকে একটি ইফেক্টের মধ্যে বা কম্পোনেন্টের বাইরে সরান৤ -যদি কোনো নির্দিষ্ট ইন্টারেকশন এখনও ধীর অনুভূত হয়, [React Developer Tools প্রোফাইলার ব্যবহার করুন](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) যে - - -1. When a component visually wraps other components, let it [accept JSX as children.](/learn/passing-props-to-a-component#passing-jsx-as-children) This way, when the wrapper component updates its own state, React knows that its children don't need to re-render. -1. Prefer local state and don't [lift state up](/learn/sharing-state-between-components) any further than necessary. For example, don't keep transient state like forms and whether an item is hovered at the top of your tree or in a global state library. -1. Keep your [rendering logic pure.](/learn/keeping-components-pure) If re-rendering a component causes a problem or produces some noticeable visual artifact, it's a bug in your component! Fix the bug instead of adding memoization. -1. Avoid [unnecessary Effects that update state.](/learn/you-might-not-need-an-effect) Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over. -1. Try to [remove unnecessary dependencies from your Effects.](/learn/removing-effect-dependencies) For example, instead of memoization, it's often simpler to move some object or a function inside an Effect or outside the component. - -If a specific interaction still feels laggy, [use the React Developer Tools profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) to see which components would benefit the most from memoization, and add memoization where needed. These principles make your components easier to debug and understand, so it's good to follow them in any case. In the long term, we're researching [doing granular memoization automatically](https://www.youtube.com/watch?v=lGEMwh32soc) to solve this once and for all. +যদি কোনো নির্দিষ্ট ইন্টারেকশন এখনও ধীর অনুভূত হয়, [React Developer Tools প্রোফাইলার ব্যবহার করুন](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) যেগুলি কম্পোনেন্টগুলি মেমোয়াইজেশন থেকে সর্বাধিক উপকার পাবে তা দেখার জন্য, এবং প্রয়োজনমতো মেমোয়াইজেশন যোগ করুন। এই নীতিগুলি আপনার কম্পোনেন্টগুলিকে ডিবাগ করা এবং বোঝা সহজ করে তোলে, তাই যেকোনো অবস্থায় এগুলি অনুসরণ করা ভালো। দীর্ঘমেয়াদে, আমরা [স্বয়ংক্রিয়ভাবে সূক্ষ্ম মেমোয়াইজেশন করা](https://www.youtube.com/watch?v=lGEMwh32soc) নিয়ে গবেষণা করছি যা এই সমস্যাটি একবারের জন্য সমাধান করবে। --- -### Updating a memoized component using state {/*updating-a-memoized-component-using-state*/} +### স্টেট ব্যবহার করে মেমোয়াইজড কম্পোনেন্ট আপডেট করা {/*updating-a-memoized-component-using-state*/} -Even when a component is memoized, it will still re-render when its own state changes. Memoization only has to do with props that are passed to the component from its parent. +যদিও একটি কম্পোনেন্ট মেমোয়াইজ করা হয়, এটি তবুও পুনরায় রেন্ডার হবে যখন এর নিজের স্টেট বদলায়। মেমোয়াইজেশন শুধুমাত্র প্যারেন্ট কম্পোনেন্ট থেকে পাস করা প্রপস নিয়ে কাজ করে। @@ -212,13 +203,13 @@ label { -If you set a state variable to its current value, React will skip re-rendering your component even without `memo`. You may still see your component function being called an extra time, but the result will be discarded. +যদি আপনি একটি স্টেট ভেরিয়েবলকে এর বর্তমান মানে সেট করেন, React আপনার কম্পোনেন্টের পুনরায় রেন্ডার করা এড়িয়ে যাবে, এমনকি `memo` ছাড়াও। আপনি হয়তো দেখতে পাবেন যে আপনার কম্পোনেন্ট ফাংশনটি অতিরিক্ত সময় কল করা হচ্ছে, কিন্তু ফলাফলটি বাতিল করা হবে। --- -### Updating a memoized component using a context {/*updating-a-memoized-component-using-a-context*/} +### একটি কনটেক্সট ব্যবহার করে মেমোয়াইজড কম্পোনেন্ট আপডেট করা {/*updating-a-memoized-component-using-a-context*/} -Even when a component is memoized, it will still re-render when a context that it's using changes. Memoization only has to do with props that are passed to the component from its parent. +যদিও একটি কম্পোনেন্ট মেমোয়াইজ করা হয়, এটি তবুও পুনরায় রেন্ডার হবে যখন এর ব্যবহার করা কনটেক্সট পরিবর্তন হয়। মেমোয়াইজেশন শুধুমাত্র অভিভাবক কম্পোনেন্ট থেকে পাস করা প্রপস নিয়ে কাজ করে। @@ -272,11 +263,11 @@ label { -To make your component re-render only when a _part_ of some context changes, split your component in two. Read what you need from the context in the outer component, and pass it down to a memoized child as a prop. +আপনার কম্পোনেন্টকে কেবল তখনই পুনরায় রেন্ডার করতে দিন যখন কোনো কনটেক্সটের _একটি অংশ_ পরিবর্তন হয়, আপনার কম্পোনেন্টকে দুই ভাগে ভাগ করুন। বাইরের কম্পোনেন্টে কনটেক্সট থেকে প্রয়োজনীয় তথ্য পড়ুন এবং এটি একটি মেমোয়াইজড চাইল্ডে প্রপ হিসেবে পাস করুন। --- -### Minimizing props changes {/*minimizing-props-changes*/} +### প্রপস পরিবর্তন সর্বনিম্ন করা {/*minimizing-props-changes*/} When you use `memo`, your component re-renders whenever any prop is not *shallowly equal* to what it was previously. This means that React compares every prop in your component with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Note that `Object.is(3, 3)` is `true`, but `Object.is({}, {})` is `false`. @@ -352,13 +343,6 @@ function arePropsEqual(oldProps, newProps) { } ``` -If you do this, use the Performance panel in your browser developer tools to make sure that your comparison function is actually faster than re-rendering the component. You might be surprised. - -When you do performance measurements, make sure that React is running in the production mode. - - - -If you provide a custom `arePropsEqual` implementation, **you must compare every prop, including functions.** Functions often [close over](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) the props and state of parent components. If you return `true` when `oldProps.onClick !== newProps.onClick`, your component will keep "seeing" the props and state from a previous render inside its `onClick` handler, leading to very confusing bugs. Avoid doing deep equality checks inside `arePropsEqual` unless you are 100% sure that the data structure you're working with has a known limited depth. **Deep equality checks can become incredibly slow** and can freeze your app for many seconds if someone changes the data structure later. @@ -370,3 +354,23 @@ Avoid doing deep equality checks inside `arePropsEqual` unless you are 100% sure ### My component re-renders when a prop is an object, array, or function {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} React compares old and new props by shallow equality: that is, it considers whether each new prop is reference-equal to the old prop. If you create a new object or array each time the parent is re-rendered, even if the individual elements are each the same, React will still consider it to be changed. Similarly, if you create a new function when rendering the parent component, React will consider it to have changed even if the function has the same definition. To avoid this, [simplify props or memoize props in the parent component](#minimizing-props-changes). + +এটি করলে, আপনার ব্রাউজার ডেভেলপার টুলসের পারফরম্যান্স প্যানেল ব্যবহার করে নিশ্চিত করুন যে আপনার comparison ফাংশনটি কম্পোনেন্টের পুনরায় রেন্ডার করার চেয়ে দ্রুত হচ্ছে। আপনি অবাক হয়ে যেতে পারেন। + +যখন আপনি পারফরম্যান্স পরিমাপ করবেন, নিশ্চিত করুন যে React প্রোডাকশন মোডে চলছে। + + + +যদি আপনি কাস্টম `arePropsEqual` implementation সরবরাহ করেন, **আপনাকে প্রতিটি প্রপ, ফাংশনসহ তুলনা করতে হবে।** ফাংশনগুলি প্রায়শই প্যারেন্ট কম্পোনেন্টের প্রপস এবং স্টেটের উপর [ক্লোজ করে](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)। যদি আপনি `oldProps.onClick !== newProps.onClick` হলে `true` ফেরত দেন, আপনার কম্পোনেন্ট তার `onClick` হ্যান্ডলারে আগের রেন্ডারের প্রপস এবং স্টেট দেখতে থাকবে, যা খুব বিভ্রান্তিকর বাগের জন্ম দেয়। + +`arePropsEqual`-এ গভীর সমতুল্য চেক করা এড়িয়ে চলুন, যদি না আপনি 100% নিশ্চিত হন যে আপনি যে ডেটা স্ট্রাকচার নিয়ে কাজ করছেন তার একটি পরিচিত সীমিত গভীরতা রয়েছে। **গভীর সমতুল্য চেক অত্যন্ত ধীর হতে পারে** এবং যদি কেউ পরে ডেটা স্ট্রাকচার পরিবর্তন করে তাহলে আপনার অ্যাপটি অনেক সেকেন্ড ধরে জমে থাকতে পারে। + + + +--- + +## ট্রাবলশুটিং {/*troubleshooting*/} +### আমার কম্পোনেন্ট পুনরায় রেন্ডার হয় যখন একটি প্রপ অবজেক্ট, অ্যারে, অথবা ফাংশন হয় {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} + +React পুরানো এবং নতুন প্রপসগুলি পৃষ্ঠতুল্য সমতুল্যতা দ্বারা তুলনা করে: অর্থাৎ, এটি বিবেচনা করে যে প্রতিটি নতুন প্রপ পুরানো প্রপের সাথে রেফারেন্স-সমান কিনা। যদি আপনি প্রতিবার অভিভাবক পুনরায় রেন্ডার হলে একটি নতুন অবজেক্ট বা অ্যারে তৈরি করেন, এমনকি যদি প্রতিটি উপাদান একই হয়, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে। একইভাবে, যদি আপনি অভিভাবক কম্পোনেন্ট রেন্ডার করার সময় একটি নতুন ফাংশন তৈরি করেন, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে, এমনকি যদি ফাংশনের সংজ্ঞা একই হয়। এটি এড়াতে, [প্রপসগুলি সরলীকরণ করুন অথবা প্যারেন্ট কম্পোনেন্টে প্রপসগুলি মেমোয়াইজ করুন](#minimizing-props-changes)। + From 85ad0670143124f109286cb679d484b5806273b3 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Sat, 6 Jan 2024 20:50:00 +0600 Subject: [PATCH 6/9] memo-90% --- src/content/reference/react/memo.md | 16 ++-------------- 1 file changed, 2 insertions(+), 14 deletions(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index a477b85ad..dd843a1ac 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -343,18 +343,6 @@ function arePropsEqual(oldProps, newProps) { } ``` - -Avoid doing deep equality checks inside `arePropsEqual` unless you are 100% sure that the data structure you're working with has a known limited depth. **Deep equality checks can become incredibly slow** and can freeze your app for many seconds if someone changes the data structure later. - - - ---- - -## Troubleshooting {/*troubleshooting*/} -### My component re-renders when a prop is an object, array, or function {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} - -React compares old and new props by shallow equality: that is, it considers whether each new prop is reference-equal to the old prop. If you create a new object or array each time the parent is re-rendered, even if the individual elements are each the same, React will still consider it to be changed. Similarly, if you create a new function when rendering the parent component, React will consider it to have changed even if the function has the same definition. To avoid this, [simplify props or memoize props in the parent component](#minimizing-props-changes). - এটি করলে, আপনার ব্রাউজার ডেভেলপার টুলসের পারফরম্যান্স প্যানেল ব্যবহার করে নিশ্চিত করুন যে আপনার comparison ফাংশনটি কম্পোনেন্টের পুনরায় রেন্ডার করার চেয়ে দ্রুত হচ্ছে। আপনি অবাক হয়ে যেতে পারেন। যখন আপনি পারফরম্যান্স পরিমাপ করবেন, নিশ্চিত করুন যে React প্রোডাকশন মোডে চলছে। @@ -363,7 +351,7 @@ React compares old and new props by shallow equality: that is, it considers whet যদি আপনি কাস্টম `arePropsEqual` implementation সরবরাহ করেন, **আপনাকে প্রতিটি প্রপ, ফাংশনসহ তুলনা করতে হবে।** ফাংশনগুলি প্রায়শই প্যারেন্ট কম্পোনেন্টের প্রপস এবং স্টেটের উপর [ক্লোজ করে](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)। যদি আপনি `oldProps.onClick !== newProps.onClick` হলে `true` ফেরত দেন, আপনার কম্পোনেন্ট তার `onClick` হ্যান্ডলারে আগের রেন্ডারের প্রপস এবং স্টেট দেখতে থাকবে, যা খুব বিভ্রান্তিকর বাগের জন্ম দেয়। -`arePropsEqual`-এ গভীর সমতুল্য চেক করা এড়িয়ে চলুন, যদি না আপনি 100% নিশ্চিত হন যে আপনি যে ডেটা স্ট্রাকচার নিয়ে কাজ করছেন তার একটি পরিচিত সীমিত গভীরতা রয়েছে। **গভীর সমতুল্য চেক অত্যন্ত ধীর হতে পারে** এবং যদি কেউ পরে ডেটা স্ট্রাকচার পরিবর্তন করে তাহলে আপনার অ্যাপটি অনেক সেকেন্ড ধরে জমে থাকতে পারে। +`arePropsEqual`-এ deep equality চেক করা এড়িয়ে চলুন, যদি না আপনি শতভাগ নিশ্চিত হন যে আপনি যে ডেটা স্ট্রাকচার নিয়ে কাজ করছেন তার একটি পরিচিত সীমিত গভীরতা রয়েছে। **Deep equality চেক অত্যন্ত ধীর হতে পারে** এবং যদি কেউ পরে ডেটা স্ট্রাকচার পরিবর্তন করে তাহলে আপনার অ্যাপটি অনেক সেকেন্ড ধরে আটকে থাকতে পারে। @@ -372,5 +360,5 @@ React compares old and new props by shallow equality: that is, it considers whet ## ট্রাবলশুটিং {/*troubleshooting*/} ### আমার কম্পোনেন্ট পুনরায় রেন্ডার হয় যখন একটি প্রপ অবজেক্ট, অ্যারে, অথবা ফাংশন হয় {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} -React পুরানো এবং নতুন প্রপসগুলি পৃষ্ঠতুল্য সমতুল্যতা দ্বারা তুলনা করে: অর্থাৎ, এটি বিবেচনা করে যে প্রতিটি নতুন প্রপ পুরানো প্রপের সাথে রেফারেন্স-সমান কিনা। যদি আপনি প্রতিবার অভিভাবক পুনরায় রেন্ডার হলে একটি নতুন অবজেক্ট বা অ্যারে তৈরি করেন, এমনকি যদি প্রতিটি উপাদান একই হয়, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে। একইভাবে, যদি আপনি অভিভাবক কম্পোনেন্ট রেন্ডার করার সময় একটি নতুন ফাংশন তৈরি করেন, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে, এমনকি যদি ফাংশনের সংজ্ঞা একই হয়। এটি এড়াতে, [প্রপসগুলি সরলীকরণ করুন অথবা প্যারেন্ট কম্পোনেন্টে প্রপসগুলি মেমোয়াইজ করুন](#minimizing-props-changes)। +React পুরানো এবং নতুন প্রপসগুলি shallow equality দ্বারা তুলনা করেঃ অর্থাৎ, এটি বিবেচনা করে যে প্রতিটি নতুন প্রপ পুরানো প্রপের সাথে রেফারেন্স-সমান কিনা। যদি আপনি প্রতি বার প্যারেন্ট পুনরায় রেন্ডার হলে একটি নতুন অবজেক্ট বা অ্যারে তৈরি করেন, এমনকি যদি প্রতিটি উপাদান একই হয়, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে। একই ভাবে, যদি আপনি প্যারেন্ট কম্পোনেন্ট রেন্ডার করার সময় একটি নতুন ফাংশন তৈরি করেন, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে, এমনকি যদি ফাংশনের ডেফিনিশন একই হয়। এটি এড়াতে, [প্রপসগুলি সরল করুন অথবা প্যারেন্ট কম্পোনেন্টে প্রপসগুলি মেমোয়াইজ করুন](#minimizing-props-changes)। From ba2c40b10a600ccd00d7af6b7b311f3806515a4d Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Sun, 7 Jan 2024 01:15:31 +0600 Subject: [PATCH 7/9] memo-done --- src/content/reference/react/memo.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index dd843a1ac..f541b3310 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -269,10 +269,9 @@ label { ### প্রপস পরিবর্তন সর্বনিম্ন করা {/*minimizing-props-changes*/} -When you use `memo`, your component re-renders whenever any prop is not *shallowly equal* to what it was previously. This means that React compares every prop in your component with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. Note that `Object.is(3, 3)` is `true`, but `Object.is({}, {})` is `false`. +`memo` ব্যবহার করলে, আপনার কম্পোনেন্ট পুনরায় রেন্ডার হয় যখন যেকোনো প্রপ আগের থেকে *shallowly equal* নয়। এর অর্থ হলো React আপনার কম্পোনেন্টের প্রতিটি প্রপকে এর আগের মানের সাথে [`Object.is` comparison](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) ব্যবহার করে তুলনা করে। লক্ষ্য করুন যে `Object.is(3, 3)` `true` হলেও, `Object.is({}, {})` `false`। - -To get the most out of `memo`, minimize the times that the props change. For example, if the prop is an object, prevent the parent component from re-creating that object every time by using [`useMemo`:](/reference/react/useMemo) +`memo` থেকে সর্বাধিক উপকার পেতে, প্রপস পরিবর্তনের সংখ্যা সর্বনিম্ন করুন। উদাহরণস্বরূপ, যদি প্রপটি একটি অবজেক্ট হয়, তাহলে প্যারেন্ট কম্পোনেন্ট প্রতিবার সেই অবজেক্টটি পুনরায় তৈরি করা থেকে বিরত থাকতে [`useMemo`](/reference/react/useMemo) ব্যবহার করুনঃ ```js {5-8} function Page() { @@ -292,7 +291,7 @@ const Profile = memo(function Profile({ person }) { }); ``` -A better way to minimize props changes is to make sure the component accepts the minimum necessary information in its props. For example, it could accept individual values instead of a whole object: +প্রপস পরিবর্তন আরও কমানোর ভালো উপায় হলো নিশ্চিত করা যে কম্পোনেন্টটি তার প্রপসে কেবল সর্বনিম্ন প্রয়োজনীয় তথ্য গ্রহণ করে। উদাহরণস্বরূপ, এটি একটি পুরো অবজেক্টের পরিবর্তে পৃথক মানগুলি গ্রহণ করতে পারেঃ ```js {4,7} function Page() { @@ -306,7 +305,7 @@ const Profile = memo(function Profile({ name, age }) { }); ``` -Even individual values can sometimes be projected to ones that change less frequently. For example, here a component accepts a boolean indicating the presence of a value rather than the value itself: +এমনকি পৃথক মানগুলিও কখনও কখনও কম পরিবর্তিত হওয়া মানগুলিতে project করা যেতে পারে। উদাহরণস্বরূপ, এখানে একটি কম্পোনেন্ট একটি মানের উপস্থিতি নির্দেশ করা একটি বুলিয়ান গ্রহণ করেঃ ```js {3} function GroupsLanding({ person }) { @@ -319,13 +318,13 @@ const CallToAction = memo(function CallToAction({ hasGroups }) { }); ``` -When you need to pass a function to memoized component, either declare it outside your component so that it never changes, or [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) to cache its definition between re-renders. +যখন আপনার মেমোয়াইজড কম্পোনেন্টে একটি ফাংশন পাস করতে হবে, তখন এটি হয় আপনার কম্পোনেন্টের বাইরে declare করুন যাতে এটি কখনই পরিবর্তিত না হয়, অথবা এর definition পুনরায় রেন্ডারের মধ্যে cache করতে [`useCallback`](/reference/react/useCallback#skipping-re-rendering-of-components) ব্যবহার করুন। --- -### Specifying a custom comparison function {/*specifying-a-custom-comparison-function*/} +### কাস্টম তুলনা ফাংশন নির্দিষ্ট করা {/*specifying-a-custom-comparison-function*/} -In rare cases it may be infeasible to minimize the props changes of a memoized component. In that case, you can provide a custom comparison function, which React will use to compare the old and new props instead of using shallow equality. This function is passed as a second argument to `memo`. It should return `true` only if the new props would result in the same output as the old props; otherwise it should return `false`. +বিরল ক্ষেত্রে মেমোয়াইজড কম্পোনেন্টের প্রপস পরিবর্তন সর্বনিম্ন করা অসম্ভব হতে পারে। সেক্ষেত্রে, আপনি একটি কাস্টম তুলনা ফাংশন দিতে পারেন, যা React পুরানো এবং নতুন প্রপসের তুলনা করতে ব্যবহার করবে shallow equality এর পরিবর্তে। এই ফাংশনটি `memo`-র দ্বিতীয় আর্গুমেন্ট হিসেবে পাস করা হয়। এটি কেবল `true` ফেরত দেবে যদি নতুন প্রপস পুরানো প্রপসের মতোই আউটপুট তৈরি করে; অন্যথায় এটি `false` ফেরত দেবে। ```js {3} const Chart = memo(function Chart({ dataPoints }) { From 42d13ad560b123b826ad404e85e338a2ebebe1e5 Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Sun, 7 Jan 2024 01:16:35 +0600 Subject: [PATCH 8/9] memo-done --- src/content/reference/react/memo.md | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index f541b3310..b82f7c109 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -271,6 +271,7 @@ label { `memo` ব্যবহার করলে, আপনার কম্পোনেন্ট পুনরায় রেন্ডার হয় যখন যেকোনো প্রপ আগের থেকে *shallowly equal* নয়। এর অর্থ হলো React আপনার কম্পোনেন্টের প্রতিটি প্রপকে এর আগের মানের সাথে [`Object.is` comparison](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) ব্যবহার করে তুলনা করে। লক্ষ্য করুন যে `Object.is(3, 3)` `true` হলেও, `Object.is({}, {})` `false`। + `memo` থেকে সর্বাধিক উপকার পেতে, প্রপস পরিবর্তনের সংখ্যা সর্বনিম্ন করুন। উদাহরণস্বরূপ, যদি প্রপটি একটি অবজেক্ট হয়, তাহলে প্যারেন্ট কম্পোনেন্ট প্রতিবার সেই অবজেক্টটি পুনরায় তৈরি করা থেকে বিরত থাকতে [`useMemo`](/reference/react/useMemo) ব্যবহার করুনঃ ```js {5-8} From cabd5e82e2b8ae6dcf4fb663b5795180e8951dcd Mon Sep 17 00:00:00 2001 From: Nafis Tiham Date: Sun, 7 Jan 2024 01:17:52 +0600 Subject: [PATCH 9/9] memo-done --- src/content/reference/react/memo.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/reference/react/memo.md b/src/content/reference/react/memo.md index b82f7c109..a4dd45c50 100644 --- a/src/content/reference/react/memo.md +++ b/src/content/reference/react/memo.md @@ -361,4 +361,3 @@ function arePropsEqual(oldProps, newProps) { ### আমার কম্পোনেন্ট পুনরায় রেন্ডার হয় যখন একটি প্রপ অবজেক্ট, অ্যারে, অথবা ফাংশন হয় {/*my-component-rerenders-when-a-prop-is-an-object-or-array*/} React পুরানো এবং নতুন প্রপসগুলি shallow equality দ্বারা তুলনা করেঃ অর্থাৎ, এটি বিবেচনা করে যে প্রতিটি নতুন প্রপ পুরানো প্রপের সাথে রেফারেন্স-সমান কিনা। যদি আপনি প্রতি বার প্যারেন্ট পুনরায় রেন্ডার হলে একটি নতুন অবজেক্ট বা অ্যারে তৈরি করেন, এমনকি যদি প্রতিটি উপাদান একই হয়, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে। একই ভাবে, যদি আপনি প্যারেন্ট কম্পোনেন্ট রেন্ডার করার সময় একটি নতুন ফাংশন তৈরি করেন, React এটিকে পরিবর্তিত হিসেবে বিবেচনা করবে, এমনকি যদি ফাংশনের ডেফিনিশন একই হয়। এটি এড়াতে, [প্রপসগুলি সরল করুন অথবা প্যারেন্ট কম্পোনেন্টে প্রপসগুলি মেমোয়াইজ করুন](#minimizing-props-changes)। -