Flush sync #78
Merged
Flush sync #78
Conversation
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
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
nomandhoni-cs
requested changes
Aug 12, 2023
There was a problem hiding this comment.
@nafistiham Bhai, অল্পকিছু চেঞ্জ আছে, ২ লাইন মিস করে গেসিলেন, এবং ২ টা বানান
| কিছু ব্রাউজার 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" দেখাবে। |
There was a problem hiding this comment.
Suggested change
| উদাহরণস্বরূপ, ব্রাউজার `onbeforeprint` API আপনাকে প্রিন্ট ডায়ালগ খুলার ঠিক আগ মুহুর্তে পেইজ বদলাতে দয়েয়। যেসব কাস্টম প্রিন্ট স্টাইল ডকুমেন্টের প্রিন্টিং সুন্দর করে ডিসপ্লে করতে দয়েয় সেগুলো এপ্লাই করার জন্য এটা কাজে লাগে। নিচের উদাহরণে, `onbeforeprint` কলব্যাকের মধ্যে DOM এ তৎক্ষণাৎ React state "flush" করে দেবার জন্য `flushSync` ব্যবহার করুন। তারপর, যতক্ষণে প্রিন্ট ডায়ালগ খুলছে, `isPrinting` "yes" দেখাবে। | |
| উদাহরণস্বরূপ, ব্রাউজার `onbeforeprint` API আপনাকে প্রিন্ট ডায়ালগ খুলার ঠিক আগ মুহুর্তে পেইজ বদলাতে দেয়। যেসব কাস্টম প্রিন্ট স্টাইল ডকুমেন্টের প্রিন্টিং সুন্দর করে ডিসপ্লে করতে দেয় সেগুলো এপ্লাই করার জন্য এটা কাজে লাগে। নিচের উদাহরণে, `onbeforeprint` কলব্যাকের মধ্যে DOM এ তৎক্ষণাৎ React state "flush" করে দেবার জন্য `flushSync` ব্যবহার করুন। তারপর, যতক্ষণে প্রিন্ট ডায়ালগ খুলছে, `isPrinting` "yes" দেখাবে। |
| </Sandpack> | ||
|
|
||
| Without `flushSync`, when the print dialog will display `isPrinting` as "no". This is because React batches the updates asynchronously and the print dialog is displayed before the state is updated. | ||
| `flushSync` ব্যতীত, প্রিন্ট ডায়ালগ `isPrinting` কে "no" হিসেবে দেখাবে। এর কারণ React আপডেটগুলোকে asynchronous ভাবে ব্যাচ করে এবং state আপডেট হবার আগেইউ প্রিন্ট ডায়ালগ দেখা যায়। |
There was a problem hiding this comment.
Suggested change
| `flushSync` ব্যতীত, প্রিন্ট ডায়ালগ `isPrinting` কে "no" হিসেবে দেখাবে। এর কারণ React আপডেটগুলোকে asynchronous ভাবে ব্যাচ করে এবং state আপডেট হবার আগেইউ প্রিন্ট ডায়ালগ দেখা যায়। | |
| `flushSync` ব্যতীত, প্রিন্ট ডায়ালগ `isPrinting` কে "no" হিসেবে দেখাবে। এর কারণ React আপডেটগুলোকে asynchronous ভাবে ব্যাচ করে এবং state আপডেট হবার আগেই প্রিন্ট ডায়ালগ দেখা যায়। |
| * `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. |
There was a problem hiding this comment.
@nafistiham Bhai, এই ৫৬+৫৭ লাইন টা মিস করে গেসিলেন।
There was a problem hiding this comment.
All done bro! Thanks for your time. সময় পেলে বাকিগুলো দেখে ফেইলেন।
There was a problem hiding this comment.
@nafistiham my pleasure bhai, Baki gula kortesi review
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
No description provided.