-
Notifications
You must be signed in to change notification settings - Fork 64
Flush sync #78
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Flush sync #78
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -4,13 +4,13 @@ title: flushSync | |||||
|
|
||||||
| <Pitfall> | ||||||
|
|
||||||
| Using `flushSync` is uncommon and can hurt the performance of your app. | ||||||
| `flushSync` এর ব্যবহার খুব একটা হয় না এবং এটা আপনার অ্যাপের পারফরম্যান্সে বিরূপ প্রভাব ফেলতে পারে। | ||||||
|
|
||||||
| </Pitfall> | ||||||
|
|
||||||
| <Intro> | ||||||
|
|
||||||
| `flushSync` lets you force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately. | ||||||
| `flushSync` আপনাকে সাহায্য করবে যদি আপনি কোন একটি কলব্যাকের মধ্যকার যেকোন আপডেট সিঙ্ক্রোনাসভাবে flush করার জন্য React কে বাধ্য করতে চান। এটা নিশ্চিত করে যে DOM সাথে সাথে আপডেট হয়ে যাচ্ছে। | ||||||
|
|
||||||
| ```js | ||||||
| flushSync(callback) | ||||||
|
|
@@ -22,11 +22,11 @@ flushSync(callback) | |||||
|
|
||||||
| --- | ||||||
|
|
||||||
| ## Reference {/*reference*/} | ||||||
| ## রেফারেন্স {/*reference*/} | ||||||
|
|
||||||
| ### `flushSync(callback)` {/*flushsync*/} | ||||||
|
|
||||||
| Call `flushSync` to force React to flush any pending work and update the DOM synchronously. | ||||||
| কোন একটি pending কাজ ফ্লাশ করার জন্য এবং একই সাথে DOM আপডেট করার জন্য React কে বাধ্য করতে এবং `flushSync` কল করুন। | ||||||
|
|
||||||
| ```js | ||||||
| import { flushSync } from 'react-dom'; | ||||||
|
|
@@ -36,33 +36,33 @@ flushSync(() => { | |||||
| }); | ||||||
| ``` | ||||||
|
|
||||||
| Most of the time, `flushSync` can be avoided. Use `flushSync` as last resort. | ||||||
| বেশির ভাগ সময়, `flushSync` এর ব্যবহার এড়িয়ে চলা যায়। `flushSync` কে ব্যবহার করুন last resort হিসেবে। | ||||||
|
|
||||||
| [See more examples below.](#usage) | ||||||
| [নিচে আরো উদাহরণ দেখুন।](#usage) | ||||||
|
|
||||||
| #### Parameters {/*parameters*/} | ||||||
| #### প্যারামিটার {/*parameters*/} | ||||||
|
|
||||||
|
|
||||||
| * `callback`: A function. React will immediately call this callback and flush any updates it contains synchronously. It may also flush any pending updates, or Effects, or updates inside of Effects. If an update suspends as a result of this `flushSync` call, the fallbacks may be re-shown. | ||||||
| * `callback`: একটি ফাংশন। React সাথে সাথে এই কলব্যাক কল দিবে এবং এর মধ্যে থাকা যেকোন আপডেট সিঙ্ক্রোনাসভাবে ফ্লাশ করে দিবে। এটা একই সাথে যেকোন পেন্ডীং আপডেট, Effect অথবা Effect এর মধ্যকার আপডেট ফ্লাশ করে দিতে পারে। যদি এই `flushSync` কলের জন্য একটি আপডেট সাসপেন্ড হয়ে যায়, ফলব্যাক আবার দেখা যেতে পারে। | ||||||
|
|
||||||
| #### Returns {/*returns*/} | ||||||
| #### রিটার্ন {/*returns*/} | ||||||
|
|
||||||
| `flushSync` returns `undefined`. | ||||||
| `flushSync` রিটার্ন করে `undefined`। | ||||||
|
|
||||||
| #### Caveats {/*caveats*/} | ||||||
| #### সতর্কতা {/*caveats*/} | ||||||
|
|
||||||
| * `flushSync` can significantly hurt performance. Use sparingly. | ||||||
| * `flushSync` may force pending Suspense boundaries to show their `fallback` state. | ||||||
| * `flushSync` may run pending effects and synchronously apply any updates they contain before returning. | ||||||
| * `flushSync` বেশ উল্লেখজনকভাবে পারফরম্যান্স কমিয়ে দিতে পারে, কম ব্যবহারের চেষ্টা করুন। | ||||||
| * `flushSync` পেন্ডিং সাসপেন্স বাউন্ডারিগুলোকে তাদের `fallback` state দেখাতে বাধ্য করতে পারে। | ||||||
| * `flushSync` পেন্ডিং Effect গুলো রান করতে পারে এবং সিঙ্ক্রোনাসভাবে may run pending effects and synchronously apply any updates they contain before returning. | ||||||
| * `flushSync` may flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback. | ||||||
|
|
||||||
| --- | ||||||
|
|
||||||
| ## Usage {/*usage*/} | ||||||
| ## ব্যবহার {/*usage*/} | ||||||
|
|
||||||
| ### Flushing updates for third-party integrations {/*flushing-updates-for-third-party-integrations*/} | ||||||
| ### থার্ড পার্টি ইন্টিগ্রেশনের জন্য flushing updates {/*flushing-updates-for-third-party-integrations*/} | ||||||
|
|
||||||
| When integrating with third-party code such as browser APIs or UI libraries, it may be necessary to force React to flush updates. Use `flushSync` to force React to flush any <CodeStep step={1}>state updates</CodeStep> inside the callback synchronously: | ||||||
| যখন থার্ড-পার্টি কোড যেমন ব্রাউজার API বা UI লাইব্রেরির সাথে ইন্টিগ্রেট করা হয়, React কে আপডেট flush করার জন্য বাধ্য করার প্রয়োজন পড়তে পারে। কলব্যাকের মধ্যে যেকোন <CodeStep step={1}>state আপডেটের</CodeStep> synchronously flush করার জন্য React কে বাধ্য করতে `flushSync` ব্যবহার করুনঃ | ||||||
|
|
||||||
| ```js [[1, 2, "setSomething(123)"]] | ||||||
| flushSync(() => { | ||||||
|
|
@@ -71,15 +71,15 @@ flushSync(() => { | |||||
| // By this line, the DOM is updated. | ||||||
| ``` | ||||||
|
|
||||||
| This ensures that, by the time the next line of code runs, React has already updated the DOM. | ||||||
| এটা নিশ্চিত করে যে, যতক্ষণে এর পরের লাইনের কোড রান হচ্ছে, ততক্ষণে যেন React DOM আপডেট করে ফেলে। | ||||||
|
|
||||||
| **Using `flushSync` is uncommon, and using it often can significantly hurt the performance of your app.** If your app only uses React APIs, and does not integrate with third-party libraries, `flushSync` should be unnecessary. | ||||||
| **`flushSync` এর ব্যবহার বিরল, এর নিয়মিত ব্যবহার আপনার অ্যাপের পারফরম্যান্স উল্লেখযোগ্য ভাবে কমিয়ে ফেলতে পারে।** যদি আপনার অ্যাপ কেবল মাত্র React APIs ব্যবহার করে, এবং থার্ড পার্টি লাইব্রেরির সাথে ইন্টিগ্রেট না করে, `flushSync` এর প্রয়োজন হবার কথা না। | ||||||
|
|
||||||
| However, it can be helpful for integrating with third-party code like browser APIs. | ||||||
| তবে, ব্রাউজার API এর মত থার্ড পার্টি কোডের সাথে ইন্টিগ্রেশনের জন্য এটা কাজে লাগতে পারে। | ||||||
|
|
||||||
| Some browser APIs expect results inside of callbacks to be written to the DOM synchronously, by the end of the callback, so the browser can do something with the rendered DOM. In most cases, React handles this for you automatically. But in some cases it may be necessary to force a synchronous update. | ||||||
| কিছু ব্রাউজার API প্রত্যাশা করে কলব্যাকের মধ্যকার রেজাল্ট DOM এ সিঙ্ক্রোনাসভাবে লেখা হয়ে যাবে, কলব্যাক শেষ হবার আগেই, যাতে ব্রাউজার রেন্ডার হওয়া DOM ব্যবহার করে কিছু করতে পারে। বেশিরাভগ ক্ষেত্রে React এটা আপনার জন্য স্বয়ংক্রিয়ভাবে হ্যান্ডেল করবে। কিন্তু কিছু কিছু ক্ষেত্রে একটা সিঙ্ক্রোনাস আপডেট জোর করে করা জরুরী হতে পারে। | ||||||
|
|
||||||
| For example, the browser `onbeforeprint` API allows you to change the page immediately before the print dialog opens. This is useful for applying custom print styles that allow the document to display better for printing. In the example below, you use `flushSync` inside of the `onbeforeprint` callback to immediately "flush" the React state to the DOM. Then, by the time the print dialog opens, `isPrinting` displays "yes": | ||||||
| উদাহরণস্বরূপ, ব্রাউজার `onbeforeprint` API আপনাকে প্রিন্ট ডায়ালগ খুলার ঠিক আগ মুহুর্তে পেইজ বদলাতে দয়েয়। যেসব কাস্টম প্রিন্ট স্টাইল ডকুমেন্টের প্রিন্টিং সুন্দর করে ডিসপ্লে করতে দয়েয় সেগুলো এপ্লাই করার জন্য এটা কাজে লাগে। নিচের উদাহরণে, `onbeforeprint` কলব্যাকের মধ্যে DOM এ তৎক্ষণাৎ React state "flush" করে দেবার জন্য `flushSync` ব্যবহার করুন। তারপর, যতক্ষণে প্রিন্ট ডায়ালগ খুলছে, `isPrinting` "yes" দেখাবে। | ||||||
|
||||||
| উদাহরণস্বরূপ, ব্রাউজার `onbeforeprint` API আপনাকে প্রিন্ট ডায়ালগ খুলার ঠিক আগ মুহুর্তে পেইজ বদলাতে দয়েয়। যেসব কাস্টম প্রিন্ট স্টাইল ডকুমেন্টের প্রিন্টিং সুন্দর করে ডিসপ্লে করতে দয়েয় সেগুলো এপ্লাই করার জন্য এটা কাজে লাগে। নিচের উদাহরণে, `onbeforeprint` কলব্যাকের মধ্যে DOM এ তৎক্ষণাৎ React state "flush" করে দেবার জন্য `flushSync` ব্যবহার করুন। তারপর, যতক্ষণে প্রিন্ট ডায়ালগ খুলছে, `isPrinting` "yes" দেখাবে। | |
| উদাহরণস্বরূপ, ব্রাউজার `onbeforeprint` API আপনাকে প্রিন্ট ডায়ালগ খুলার ঠিক আগ মুহুর্তে পেইজ বদলাতে দেয়। যেসব কাস্টম প্রিন্ট স্টাইল ডকুমেন্টের প্রিন্টিং সুন্দর করে ডিসপ্লে করতে দেয় সেগুলো এপ্লাই করার জন্য এটা কাজে লাগে। নিচের উদাহরণে, `onbeforeprint` কলব্যাকের মধ্যে DOM এ তৎক্ষণাৎ React state "flush" করে দেবার জন্য `flushSync` ব্যবহার করুন। তারপর, যতক্ষণে প্রিন্ট ডায়ালগ খুলছে, `isPrinting` "yes" দেখাবে। |
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggested change
| `flushSync` ব্যতীত, প্রিন্ট ডায়ালগ `isPrinting` কে "no" হিসেবে দেখাবে। এর কারণ React আপডেটগুলোকে asynchronous ভাবে ব্যাচ করে এবং state আপডেট হবার আগেইউ প্রিন্ট ডায়ালগ দেখা যায়। | |
| `flushSync` ব্যতীত, প্রিন্ট ডায়ালগ `isPrinting` কে "no" হিসেবে দেখাবে। এর কারণ React আপডেটগুলোকে asynchronous ভাবে ব্যাচ করে এবং state আপডেট হবার আগেই প্রিন্ট ডায়ালগ দেখা যায়। |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@nafistiham Bhai, এই ৫৬+৫৭ লাইন টা মিস করে গেসিলেন।
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All done bro! Thanks for your time. সময় পেলে বাকিগুলো দেখে ফেইলেন।
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@nafistiham my pleasure bhai, Baki gula kortesi review