Skip to content

feat(i18n): translate src/content/learn/queueing-a-series-of-state-up dates.md from English to Vietnamese #474

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 2 commits into from
Jun 16, 2025

Conversation

KotonoSora
Copy link
Contributor

@KotonoSora KotonoSora commented Jun 3, 2025

🇻🇳 Vietnamese Translation: Queueing a Series of State Updates

Hi! I'm contributing as a volunteer translator for vi.react.dev, and this PR adds the Vietnamese translation for the "Queueing a Series of State Updates" lesson.

What's included

  • Vietnamese translation of queueing-a-series-of-state-updates.md
  • Preserved all code examples and markdown formatting
  • Kept terminology consistent with existing translations

Changes

  • ✅ Fully translated the guide covering React state batching and queue processing
  • ✅ Maintained code blocks, links, Sandpack components and Challenge/Solution sections
  • ✅ Verified all internal links and formatting render correctly

Looking forward to contributing more translations to the project! 🚀


Tóm tắt những gì đã được dịch:

Tiêu đề và phần Intro:
"Queueing a Series of State Updates" → "Xếp hàng đợi cho một chuỗi các cập nhật state"

Các phần chính:

  • "React batches state updates" → "React gom nhóm các cập nhật state"
  • "Updating the same state multiple times before the next render" → "Cập nhật cùng một state nhiều lần trước lần render tiếp theo"
  • "What happens if you update state after replacing it" → "Điều gì xảy ra nếu bạn cập nhật state sau khi thay thế nó"
  • "What happens if you replace state after updating it" → "Điều gì xảy ra nếu bạn thay thế state sau khi cập nhật nó"
  • "Naming conventions" → "Quy ước đặt tên"

Phần Challenges:

  • "Fix a request counter" → "Sửa bộ đếm yêu cầu"
  • "Implement the state queue yourself" → "Tự triển khai hàng đợi state"

Copy link

vercel bot commented Jun 3, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
vi-legacy-reactjs-org ⬜️ Ignored (Inspect) Visit Preview Jun 16, 2025 2:23am

Copy link
Collaborator

@chriskhoa chriskhoa left a comment

Choose a reason for hiding this comment

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

Thanks for the contribution. Please view suggestions!

@@ -1,23 +1,23 @@
---
title: Queueing a Series of State Updates
title: Xếp hàng đợi cho một chuỗi các cập nhật 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
title: Xếp hàng đợi cho một chuỗi các cập nhật state
title: Xử lí hàng đợi cho một chuỗi các cập nhật state liên tiếp

---

<Intro>

Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on the value before queueing the next render. To do this, it helps to understand how React batches state updates.
Thiết lập một biến state sẽ đưa một lần render khác vào hàng đợi. Nhưng đôi khi bạn có thể muốn thực hiện nhiều thao tác trên giá trị đó trước khi đưa lần render tiếp theo vào hàng đợi. Để làm điều này, sẽ hữu ích khi hiểu cách React gom nhóm các cập nhật 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
Thiết lập một biến state sẽ đưa một lần render khác vào hàng đợi. Nhưng đôi khi bạn có thể muốn thực hiện nhiều thao tác trên giá trị đó trước khi đưa lần render tiếp theo vào hàng đợi. Để làm điều này, sẽ hữu ích khi hiểu cách React gom nhóm các cập nhật state.
Thiết lập một biến state sẽ đưa một lần render khác vào hàng đợi. Nhưng đôi khi bạn có thể muốn thực hiện nhiều thao tác trên giá trị đó trước khi đưa lần render tiếp theo vào hàng đợi. Để làm điều này, bạn nên hiểu cách React gom nhóm các cập nhật state.


</Intro>

<YouWillLearn>

* What "batching" is and how React uses it to process multiple state updates
* How to apply several updates to the same state variable in a row
* "Batching" là gì và React sử dụng nó như thế nào để xử lý nhiều cập nhật 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
* "Batching" là gì và React sử dụng nó như thế nào để xử lý nhiều cập nhật state
* "Batching" (gom nhóm) là gì và React sử dụng nó như thế nào để xử lý nhiều cập nhật state

@@ -99,37 +99,38 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; }

</Sandpack>

Here, `n => n + 1` is called an **updater function.** When you pass it to a state setter:
Ở đây, `n => n + 1` được gọi là **updater function.** Khi bạn truyền nó cho một state setter:
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
Ở đây, `n => n + 1` được gọi là **updater function.** Khi bạn truyền nó cho một state setter:
Ở đây, `n => n + 1` được gọi là **updater (cập nhật) function.** Khi bạn truyền nó cho một state setter:


When you call `useState` during the next render, React goes through the queue. The previous `number` state was `0`, so that's what React passes to the first updater function as the `n` argument. Then React takes the return value of your previous updater function and passes it to the next updater as `n`, and so on:
Khi bạn gọi `useState` trong lần render tiếp theo, React duyệt qua hàng đợi. State `number` trước đó là `0`, vì vậy đó là những gì React truyền cho updater function đầu tiên làm tham số `n`. Sau đó React lấy giá trị trả về của updater function trước đó và truyền nó cho updater tiếp theo làm `n`, và cứ thế:
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
Khi bạn gọi `useState` trong lần render tiếp theo, React duyệt qua hàng đợi. State `number` trước đó là `0`, vì vậy đó là những gì React truyền cho updater function đầu tiên làm tham số `n`. Sau đó React lấy giá trị trả về của updater function trước đó và truyền nó cho updater tiếp theo làm `n`, và cứ thế:
Khi bạn gọi `useState` trong lần render tiếp theo, React duyệt qua hàng đợi. State `number` trước đó là `0`, nên đó là giá trị React truyền cho updater function đầu tiên làm tham số `n`. Sau đó React lấy giá trị trả về của updater function trước đó và truyền nó cho updater tiếp theo làm `n`, và cứ thế:


However, the "Pending" counter does not behave as intended. When you press "Buy", it decreases to `-1` (which should not be possible!). And if you click fast twice, both counters seem to behave unpredictably.
Tuy nhiên, bộ đếm "Pending" không hoạt động như dự định. Khi bạn nhấn "Buy", nó giảm xuống `-1` (điều này không thể xảy ra!). Và nếu bạn nhấp nhanh hai lần, cả hai bộ đếm dường như hoạt động không thể đoán trước.
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
Tuy nhiên, bộ đếm "Pending" không hoạt động như dự định. Khi bạn nhấn "Buy", nó giảm xuống `-1` (điều này không thể xảy ra!). Và nếu bạn nhấp nhanh hai lần, cả hai bộ đếm dường như hoạt động không thể đoán trước.
Tuy nhiên, bộ đếm "Pending" không hoạt động như dự định. Khi bạn nhấn "Buy", nó giảm xuống `-1` (điều này không nên xảy ra!). Và nếu bạn nhấp nhanh hai lần, cả hai bộ đếm dường như hoạt động một cách khó đoán.

@@ -322,7 +323,7 @@ function delay(ms) {

<Solution>

Inside the `handleClick` event handler, the values of `pending` and `completed` correspond to what they were at the time of the click event. For the first render, `pending` was `0`, so `setPending(pending - 1)` becomes `setPending(-1)`, which is wrong. Since you want to *increment* or *decrement* the counters, rather than set them to a concrete value determined during the click, you can instead pass the updater functions:
Bên trong event handler `handleClick`, các giá trị của `pending` `completed` tương ứng với những gì chúng có tại thời điểm sự kiện click. Đối với lần render đầu tiên, `pending` `0`, vì vậy `setPending(pending - 1)` trở thành `setPending(-1)`, điều này sai. Vì bạn muốn *tăng* hoặc *giảm* các bộ đếm, thay vì set chúng thành một giá trị cụ thể được xác định trong lúc click, bạn có thể truyền các updater function thay thế:
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
Bên trong event handler `handleClick`, các giá trị của `pending``completed` tương ứng với những gì chúng có tại thời điểm sự kiện click. Đối với lần render đầu tiên, `pending``0`, vì vậy `setPending(pending - 1)` trở thành `setPending(-1)`, điều này sai. Vì bạn muốn *tăng* hoặc *giảm* các bộ đếm, thay vì set chúng thành một giá trị cụ thể được xác định trong lúc click, bạn có thể truyền các updater function thay thế:
Bên trong event handler `handleClick`, các giá trị của `pending``completed` tương ứng với những gì chúng có tại thời điểm sự kiện click xảy ra. Đối với lần render đầu tiên, `pending``0`, vì vậy `setPending(pending - 1)` trở thành `setPending(-1)`, điều này sai. Vì bạn muốn *tăng* hoặc *giảm* các bộ đếm, thay vì gán chúng thành một giá trị cụ thể được xác định trong lúc click, bạn có thể truyền các updater function thay thế:

@@ -364,23 +365,23 @@ function delay(ms) {

</Sandpack>

This ensures that when you increment or decrement a counter, you do it in relation to its *latest* state rather than what the state was at the time of the click.
Điều này đảm bảo rằng khi bạn tăng hoặc giảm một bộ đếm, bạn làm điều đó liên quan đến state *mới nhất* của nó thay vì state tại thời điểm click.
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
Điều này đảm bảo rằng khi bạn tăng hoặc giảm một bộ đếm, bạn làm điều đó liên quan đến state *mới nhất* của thay vì state tại thời điểm click.
Điều này đảm bảo rằng khi bạn tăng hoặc giảm một bộ đếm, bạn thực hiện nó dựa trên state *mới nhất* của bộ đếm thay vì state tại thời điểm click.


In this challenge, you will reimplement a tiny part of React from scratch! It's not as hard as it sounds.
Trong thử thách này, bạn sẽ tự triển khai một phần nhỏ của React từ đầu! Nó không khó như nghe có vẻ.
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
Trong thử thách này, bạn sẽ tự triển khai một phần nhỏ của React từ đầu! Nó không khó như nghe có vẻ.
Trong thử thách này, bạn sẽ tự triển khai một phần nhỏ của React từ đầu! Nó không khó như bạn nghĩ.


Scroll through the sandbox preview. Notice that it shows **four test cases.** They correspond to the examples you've seen earlier on this page. Your task is to implement the `getFinalState` function so that it returns the correct result for each of those cases. If you implement it correctly, all four tests should pass.
Cuộn qua bản xem trước sandbox. Lưu ý rằng nó hiển thị **bốn test case.** Chúng tương ứng với các ví dụ bạn đã thấy trước đó trên trang này. Nhiệm vụ của bạn là triển khai function `getFinalState` để nó trả về kết quả chính xác cho mỗi trường hợp đó. Nếu bạn triển khai chính xác, tất cả bốn bài test sẽ pass.
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
Cuộn qua bản xem trước sandbox. Lưu ý rằng nó hiển thị **bốn test case.** Chúng tương ứng với các ví dụ bạn đã thấy trước đó trên trang này. Nhiệm vụ của bạn là triển khai function `getFinalState` để nó trả về kết quả chính xác cho mỗi trường hợp đó. Nếu bạn triển khai chính xác, tất cả bốn bài test sẽ pass.
Hãy xem qua sandbox ở dưới. Lưu ý rằng nó hiển thị **bốn bài test.** Chúng tương ứng với các ví dụ bạn đã thấy trước đó trên trang này. Nhiệm vụ của bạn là triển khai function `getFinalState` để nó trả về kết quả chính xác cho mỗi trường hợp đó. Nếu bạn triển khai chính xác, bạn sẽ vượt qua bốn bài test.

Copy link

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! 🙌

@KotonoSora
Copy link
Contributor Author

Thanks @chriskhoa! I updated PR based on your suggestion.

@chriskhoa chriskhoa merged commit 06fca3e into reactjs:main Jun 16, 2025
7 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