-
Notifications
You must be signed in to change notification settings - Fork 59
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
Flush sync #78
Flush sync #78
Conversation
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! 🙌 |
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, অল্পকিছু চেঞ্জ আছে, ২ লাইন মিস করে গেসিলেন, এবং ২ টা বানান
|
||
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
উদাহরণস্বরূপ, ব্রাউজার `onbeforeprint` API আপনাকে প্রিন্ট ডায়ালগ খুলার ঠিক আগ মুহুর্তে পেইজ বদলাতে দয়েয়। যেসব কাস্টম প্রিন্ট স্টাইল ডকুমেন্টের প্রিন্টিং সুন্দর করে ডিসপ্লে করতে দয়েয় সেগুলো এপ্লাই করার জন্য এটা কাজে লাগে। নিচের উদাহরণে, `onbeforeprint` কলব্যাকের মধ্যে DOM এ তৎক্ষণাৎ React state "flush" করে দেবার জন্য `flushSync` ব্যবহার করুন। তারপর, যতক্ষণে প্রিন্ট ডায়ালগ খুলছে, `isPrinting` "yes" দেখাবে। | |
উদাহরণস্বরূপ, ব্রাউজার `onbeforeprint` API আপনাকে প্রিন্ট ডায়ালগ খুলার ঠিক আগ মুহুর্তে পেইজ বদলাতে দেয়। যেসব কাস্টম প্রিন্ট স্টাইল ডকুমেন্টের প্রিন্টিং সুন্দর করে ডিসপ্লে করতে দেয় সেগুলো এপ্লাই করার জন্য এটা কাজে লাগে। নিচের উদাহরণে, `onbeforeprint` কলব্যাকের মধ্যে DOM এ তৎক্ষণাৎ React state "flush" করে দেবার জন্য `flushSync` ব্যবহার করুন। তারপর, যতক্ষণে প্রিন্ট ডায়ালগ খুলছে, `isPrinting` "yes" দেখাবে। |
@@ -122,12 +122,12 @@ export default function PrintApp() { | |||
|
|||
</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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
`flushSync` ব্যতীত, প্রিন্ট ডায়ালগ `isPrinting` কে "no" হিসেবে দেখাবে। এর কারণ React আপডেটগুলোকে asynchronous ভাবে ব্যাচ করে এবং state আপডেট হবার আগেইউ প্রিন্ট ডায়ালগ দেখা যায়। | |
`flushSync` ব্যতীত, প্রিন্ট ডায়ালগ `isPrinting` কে "no" হিসেবে দেখাবে। এর কারণ React আপডেটগুলোকে asynchronous ভাবে ব্যাচ করে এবং 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. |
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
No description provided.