Skip to content
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

Merged
merged 3 commits into from
Aug 12, 2023
Merged

Flush sync #78

merged 3 commits into from
Aug 12, 2023

Conversation

nafistiham
Copy link
Collaborator

No description provided.

@github-actions
Copy link

github-actions bot commented Aug 10, 2023

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

Copy link
Collaborator

@nomandhoni-cs nomandhoni-cs left a 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" দেখাবে।
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
উদাহরণস্বরূপ, ব্রাউজার `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 আপডেট হবার আগেইউ প্রিন্ট ডায়ালগ দেখা যায়।
Copy link
Collaborator

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 আপডেট হবার আগেই প্রিন্ট ডায়ালগ দেখা যায়।

* `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.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nafistiham Bhai, এই ৫৬+৫৭ লাইন টা মিস করে গেসিলেন।

Copy link
Collaborator Author

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. সময় পেলে বাকিগুলো দেখে ফেইলেন।

Copy link
Collaborator

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

@nomandhoni-cs nomandhoni-cs merged commit 18af5d1 into reactjs:main Aug 12, 2023
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants