feat(i18n): translate src/content/learn/managing-state.md from English to Vietnamese

src/content/learn/managing-state.md

@@ -1,30 +1,30 @@
 ---
-title: Managing State
+title: Quản Lý State
 ---
 
 <Intro>
 
-As your application grows, it helps to be more intentional about how your state is organized and how the data flows between your components. Redundant or duplicate state is a common source of bugs. In this chapter, you'll learn how to structure your state well, how to keep your state update logic maintainable, and how to share state between distant components.
+Khi ứng dụng của bạn ngày càng lớn, việc có ý thức hơn về cách tổ chức state và luồng data chảy giữa các component sẽ rất hữu ích. State dư thừa hoặc trùng lặp là nguyên nhân phổ biến gây ra một loạt bug khó hiểu. Trong chương này, bạn sẽ học cách cấu trúc state một cách tốt, cách giữ cho logic cập nhật state dễ bảo trì, và cách chia sẻ state giữa các component cách xa nhau.
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
-* [How to think about UI changes as state changes](/learn/reacting-to-input-with-state)
-* [How to structure state well](/learn/choosing-the-state-structure)
-* [How to "lift state up" to share it between components](/learn/sharing-state-between-components)
-* [How to control whether the state gets preserved or reset](/learn/preserving-and-resetting-state)
-* [How to consolidate complex state logic in a function](/learn/extracting-state-logic-into-a-reducer)
-* [How to pass information without "prop drilling"](/learn/passing-data-deeply-with-context)
-* [How to scale state management as your app grows](/learn/scaling-up-with-reducer-and-context)
+* [Cách suy nghĩ về thay đổi UI như những thay đổi state](/learn/reacting-to-input-with-state)
+* [Cách cấu trúc state một cách tốt](/learn/choosing-the-state-structure)
+* [Cách "nâng state lên" để chia sẻ giữa các component](/learn/sharing-state-between-components)
+* [Cách kiểm soát việc state được bảo tồn hay reset](/learn/preserving-and-resetting-state)
+* [Cách hợp nhất logic state phức tạp trong một function](/learn/extracting-state-logic-into-a-reducer)
+* [Cách truyền thông tin mà không cần "prop drilling"](/learn/passing-data-deeply-with-context)
+* [Cách mở rộng quản lý state khi ứng dụng ngày càng lớn](/learn/scaling-up-with-reducer-and-context)
 
 </YouWillLearn>
 
-## Reacting to input with state {/*reacting-to-input-with-state*/}
+## Phản ứng với đầu vào thông qua state {/*reacting-to-input-with-state*/}
 
-With React, you won't modify the UI from code directly. For example, you won't write commands like "disable the button", "enable the button", "show the success message", etc. Instead, you will describe the UI you want to see for the different visual states of your component ("initial state", "typing state", "success state"), and then trigger the state changes in response to user input. This is similar to how designers think about UI.
+Với React, bạn sẽ không sửa đổi UI trực tiếp từ code. Ví dụ, bạn sẽ không viết các lệnh như "vô hiệu hóa nút", "kích hoạt nút", "hiển thị thông báo thành công", v.v. Thay vào đó, bạn sẽ mô tả UI mà bạn muốn thấy cho các trạng thái visual khác nhau của component ("trạng thái ban đầu", "trạng thái đang nhập", "trạng thái thành công"), sau đó kích hoạt những thay đổi state để phản ứng với đầu vào của người dùng. Điều này tương tự như cách các nhà thiết kế suy nghĩ về UI.
 
-Here is a quiz form built using React. Note how it uses the `status` state variable to determine whether to enable or disable the submit button, and whether to show the success message instead.
+Đây là một form quiz được xây dựng bằng React. Lưu ý cách nó sử dụng biến state `status` để xác định có nên kích hoạt hay vô hiệu hóa nút submit, và có nên hiển thị thông báo thành công thay vào đó.
 
 <Sandpack>
 
@@ -108,15 +108,15 @@ function submitForm(answer) {
 
 <LearnMore path="/learn/reacting-to-input-with-state">
 
-Read **[Reacting to Input with State](/learn/reacting-to-input-with-state)** to learn how to approach interactions with a state-driven mindset.
+Đọc **[Phản Ứng Với Đầu Vào Thông Qua State](/learn/reacting-to-input-with-state)** để học cách tiếp cận các tương tác với mô hình tư duy điều khiển bằng state.
 
 </LearnMore>
 
-## Choosing the state structure {/*choosing-the-state-structure*/}
+## Chọn cấu trúc state {/*choosing-the-state-structure*/}
 
-Structuring state well can make a difference between a component that is pleasant to modify and debug, and one that is a constant source of bugs. The most important principle is that state shouldn't contain redundant or duplicated information. If there's unnecessary state, it's easy to forget to update it, and introduce bugs!
+Cấu trúc state tốt có thể tạo ra sự khác biệt giữa một component dễ dàng sửa đổi và debug, và một component có hành vi khó đoán với một loạt bug khó hiểu. Nguyên tắc quan trọng nhất là state không nên chứa thông tin dư thừa hoặc trùng lặp. Nếu có state không cần thiết, thật dễ dàng để quên cập nhật nó và tạo ra bug!
 
-For example, this form has a **redundant** `fullName` state variable:
+Ví dụ, form này có biến state `fullName` **dư thừa**:
 
 <Sandpack>
 
@@ -169,7 +169,7 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-You can remove it and simplify the code by calculating `fullName` while the component is rendering:
+Bạn có thể loại bỏ nó và đơn giản hóa code bằng cách tính toán `fullName` trong khi component đang render:
 
 <Sandpack>
 
@@ -221,19 +221,19 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-This might seem like a small change, but many bugs in React apps are fixed this way.
+Điều này có thể trông như một thay đổi nhỏ, nhưng một loạt bug khó hiểu trong các ứng dụng React được sửa theo cách này.
 
 <LearnMore path="/learn/choosing-the-state-structure">
 
-Read **[Choosing the State Structure](/learn/choosing-the-state-structure)** to learn how to design the state shape to avoid bugs.
+Đọc **[Chọn Cấu Trúc State](/learn/choosing-the-state-structure)** để học cách thiết kế hình dạng state để tránh bug.
 
 </LearnMore>
 
-## Sharing state between components {/*sharing-state-between-components*/}
+## Chia sẻ state giữa các component {/*sharing-state-between-components*/}
 
-Sometimes, you want the state of two components to always change together. To do it, remove state from both of them, move it to their closest common parent, and then pass it down to them via props. This is known as "lifting state up", and it's one of the most common things you will do writing React code.
+Đôi khi, bạn muốn state của hai component luôn thay đổi cùng nhau. Để thực hiện điều này, hãy loại bỏ state khỏi cả hai, di chuyển nó lên component cha chung gần nhất, và sau đó truyền xuống cho chúng thông qua props. Điều này được gọi là "nâng state lên", và đây là một trong những việc phổ biến nhất bạn sẽ làm khi viết code React.
 
-In this example, only one panel should be active at a time. To achieve this, instead of keeping the active state inside each individual panel, the parent component holds the state and specifies the props for its children.
+Trong ví dụ này, chỉ một panel nên được kích hoạt tại một thời điểm. Để đạt được điều này, thay vì giữ state active bên trong mỗi panel riêng lẻ, component cha giữ state và chỉ định props cho các con của nó.
 
 <Sandpack>
 
@@ -296,15 +296,15 @@ h3, p { margin: 5px 0px; }
 
 <LearnMore path="/learn/sharing-state-between-components">
 
-Read **[Sharing State Between Components](/learn/sharing-state-between-components)** to learn how to lift state up and keep components in sync.
+Đọc **[Chia Sẻ State Giữa Các Component](/learn/sharing-state-between-components)** để học cách nâng state lên và giữ các component đồng bộ.
 
 </LearnMore>
 
-## Preserving and resetting state {/*preserving-and-resetting-state*/}
+## Bảo tồn và reset state {/*preserving-and-resetting-state*/}
 
-When you re-render a component, React needs to decide which parts of the tree to keep (and update), and which parts to discard or re-create from scratch. In most cases, React's automatic behavior works well enough. By default, React preserves the parts of the tree that "match up" with the previously rendered component tree.
+Khi bạn re-render một component, React cần quyết định phần nào của cây cần giữ lại (và cập nhật), và phần nào cần loại bỏ hoặc tạo lại từ đầu. Trong hầu hết các trường hợp, hành vi tự động của React hoạt động đủ tốt và dễ dự đoán. Theo mặc định, React bảo tồn các phần theo cấu trúc cây "khớp" với cây component đã được render trước đó.
 
-However, sometimes this is not what you want. In this chat app, typing a message and then switching the recipient does not reset the input. This can make the user accidentally send a message to the wrong person:
+Tuy nhiên, đôi khi đây không phải là điều bạn muốn. Trong ứng dụng chat này, việc nhập tin nhắn và sau đó chuyển đổi người nhận không reset input. Điều này có thể khiến người dùng vô tình gửi tin nhắn cho người sai:
 
 <Sandpack>
 
@@ -399,7 +399,7 @@ textarea {
 
 </Sandpack>
 
-React lets you override the default behavior, and *force* a component to reset its state by passing it a different `key`, like `<Chat key={email} />`. This tells React that if the recipient is different, it should be considered a *different* `Chat` component that needs to be re-created from scratch with the new data (and UI like inputs). Now switching between the recipients resets the input field--even though you render the same component.
+React cho phép bạn ghi đè hành vi mặc định và *bắt buộc* một component reset state của nó bằng cách truyền cho nó một `key` khác, như `<Chat key={email} />`. Điều này báo cho React biết rằng nếu người nhận khác nhau, nó nên được coi là một component `Chat` *khác* cần được tạo lại từ đầu với data mới (và UI như inputs). Giờ đây việc chuyển đổi giữa các người nhận sẽ reset trường input--mặc dù bạn render cùng một component.
 
 <Sandpack>
 
@@ -496,13 +496,13 @@ textarea {
 
 <LearnMore path="/learn/preserving-and-resetting-state">
 
-Read **[Preserving and Resetting State](/learn/preserving-and-resetting-state)** to learn the lifetime of state and how to control it.
+Đọc **[Bảo Tồn và Reset State](/learn/preserving-and-resetting-state)** để học về vòng đời của state và cách kiểm soát nó.
 
 </LearnMore>
 
-## Extracting state logic into a reducer {/*extracting-state-logic-into-a-reducer*/}
+## Trích xuất logic state vào reducer {/*extracting-state-logic-into-a-reducer*/}
 
-Components with many state updates spread across many event handlers can get overwhelming. For these cases, you can consolidate all the state update logic outside your component in a single function, called "reducer". Your event handlers become concise because they only specify the user "actions". At the bottom of the file, the reducer function specifies how the state should update in response to each action!
+Các component có nhiều cập nhật state được phân tán qua nhiều event handler có thể trở nên khó sử dụng. Trong những trường hợp này, bạn có thể hợp nhất tất cả logic cập nhật state bên ngoài component của bạn trong một function duy nhất, được gọi là "reducer". Các event handler của bạn trở nên ngắn gọn vì chúng chỉ chỉ định "actions" của người dùng. Ở cuối file, function reducer chỉ định cách state nên cập nhật để phản ứng với từng action!
 
 <Sandpack>
 
@@ -693,15 +693,15 @@ ul, li { margin: 0; padding: 0; }
 
 <LearnMore path="/learn/extracting-state-logic-into-a-reducer">
 
-Read **[Extracting State Logic into a Reducer](/learn/extracting-state-logic-into-a-reducer)** to learn how to consolidate logic in the reducer function.
+Đọc **[Trích Xuất Logic State Vào Reducer](/learn/extracting-state-logic-into-a-reducer)** để học cách hợp nhất logic trong function reducer.
 
 </LearnMore>
 
-## Passing data deeply with context {/*passing-data-deeply-with-context*/}
+## Truyền data sâu với context {/*passing-data-deeply-with-context*/}
 
-Usually, you will pass information from a parent component to a child component via props. But passing props can become inconvenient if you need to pass some prop through many components, or if many components need the same information. Context lets the parent component make some information available to any component in the tree below it—no matter how deep it is—without passing it explicitly through props.
+Thông thường, bạn sẽ truyền thông tin từ component cha đến component con thông qua props. Nhưng việc truyền props có thể trở nên bất tiện nếu bạn cần truyền một prop qua nhiều component, hoặc nếu nhiều component cần cùng một thông tin. Context cho phép component cha làm cho một số thông tin có sẵn cho bất kỳ component nào theo cấu trúc cây bên dưới nó—bất kể nó sâu đến đâu—mà không cần truyền nó một cách rõ ràng thông qua props.
 
-Here, the `Heading` component determines its heading level by "asking" the closest `Section` for its level. Each `Section` tracks its own level by asking the parent `Section` and adding one to it. Every `Section` provides information to all components below it without passing props--it does that through context.
+Ở đây, component `Heading` xác định cấp độ heading của nó bằng cách "hỏi" `Section` gần nhất về cấp độ của nó. Mỗi `Section` theo dõi cấp độ riêng của nó bằng cách hỏi `Section` cha và cộng thêm một. Mọi `Section` cung cấp thông tin cho tất cả các component bên dưới nó mà không cần truyền props--nó thực hiện điều đó thông qua context.
 
 <Sandpack>
 
@@ -795,15 +795,15 @@ export const LevelContext = createContext(0);
 
 <LearnMore path="/learn/passing-data-deeply-with-context">
 
-Read **[Passing Data Deeply with Context](/learn/passing-data-deeply-with-context)** to learn about using context as an alternative to passing props.
+Đọc **[Truyền Data Sâu Với Context](/learn/passing-data-deeply-with-context)** để học về việc sử dụng context như một giải pháp thay thế cho việc truyền props.
 
 </LearnMore>
 
-## Scaling up with reducer and context {/*scaling-up-with-reducer-and-context*/}
+## Mở rộng với reducer và context {/*scaling-up-with-reducer-and-context*/}
 
-Reducers let you consolidate a component’s state update logic. Context lets you pass information deep down to other components. You can combine reducers and context together to manage state of a complex screen.
+Reducer cho phép bạn tổng hợp logic cập nhật state của component. Context cho phép bạn truyền thông tin xuống sâu cho các component khác. Bạn có thể kết hợp reducer và context cùng nhau để quản lý state của một màn hình phức tạp.
 
-With this approach, a parent component with complex state manages it with a reducer. Other components anywhere deep in the tree can read its state via context. They can also dispatch actions to update that state.
+Với cách tiếp cận này, một component cha có state phức tạp sẽ quản lý nó bằng reducer. Các component khác ở bất kỳ vị trí sâu nào theo cấu trúc cây có thể đọc state của nó thông qua context. Chúng cũng có thể dispatch các action để cập nhật state đó.
 
 <Sandpack>
 
@@ -1006,12 +1006,12 @@ ul, li { margin: 0; padding: 0; }
 
 <LearnMore path="/learn/scaling-up-with-reducer-and-context">
 
-Read **[Scaling Up with Reducer and Context](/learn/scaling-up-with-reducer-and-context)** to learn how state management scales in a growing app.
+Đọc **[Mở Rộng Với Reducer và Context](/learn/scaling-up-with-reducer-and-context)** để học cách quản lý state mở rộng trong một ứng dụng ngày càng lớn.
 
 </LearnMore>
 
-## What's next? {/*whats-next*/}
+## Tiếp theo là gì? {/*whats-next*/}
 
-Head over to [Reacting to Input with State](/learn/reacting-to-input-with-state) to start reading this chapter page by page!
+Hãy chuyển đến [Phản Ứng Với Đầu Vào Thông Qua State](/learn/reacting-to-input-with-state) để bắt đầu đọc chương này từng trang!
 
-Or, if you're already familiar with these topics, why not read about [Escape Hatches](/learn/escape-hatches)?
+Hoặc, nếu bạn đã quen thuộc với những chủ đề này, tại sao không đọc về [Escape Hatches](/learn/escape-hatches)?