From b2467a5616a377823def7d2d90fcb8d703e27a37 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <j.f.r.a1997@gmail.com>
Date: Tue, 22 Nov 2022 14:06:39 -0300
Subject: [PATCH 01/22] docs: Translate choosing-the-state-structure.md

---
 .../learn/choosing-the-state-structure.md     | 274 +++++++++---------
 1 file changed, 138 insertions(+), 136 deletions(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index 3231a70f8..49cbc49da 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -1,22 +1,22 @@
 ---
-title: Choosing the State Structure
+title: Elección de la estructura del estado
 ---
 
 <Intro>
 
-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. Here are some tips you should consider when structuring state.
+Estructurar bien el estado puede marcar la diferencia entre un componente que es agradable de modificar y depurar, y uno que es una fuente constante de errores. Estos son algunos consejos que debe tener en cuenta al estructurar el estado.
 
 </Intro>
 
 <YouWillLearn>
 
-* When to use a single vs multiple state variables
-* What to avoid when organizing state
-* How to fix common issues with the state structure
+* Cuando usar una versus multiples variables de estado.
+* Qué evitar al organizar el estado.
+* Cómo solucionar problemas comunes con la estructura del estado.
 
 </YouWillLearn>
 
-## Principles for structuring state {/*principles-for-structuring-state*/}
+## Principios para la estructuración del estado {/*principles-for-structuring-state*/}
 
 When you write a component that holds some state, you'll have to make choices about how many state variables to use and what the shape of their data should be. While it's possible to write correct programs even with a suboptimal state structure, there are a few principles that can guide you to make better choices:
 
@@ -30,24 +30,24 @@ The goal behind these principles is to *make state easy to update without introd
 
 Now let's see how these principles apply in action.
 
-## Group related state {/*group-related-state*/}
+## Estado relativo al grupo {/*group-related-state*/}
 
-You might sometimes be unsure between using a single or multiple state variables.
+En ocasiones, es posible que no esté seguro entre usar una o varias variables de estado.
 
-Should you do this?
+¿Deberías hacer esto?
 
 ```js
 const [x, setX] = useState(0);
 const [y, setY] = useState(0);
 ```
 
-Or this?
+¿O esto?
 
 ```js
 const [position, setPosition] = useState({ x: 0, y: 0 });
 ```
 
-Technically, you can use either of these approaches. But **if some two state variables always change together, it might be a good idea to unify them into a single state variable.** Then you won't forget to always keep them in sync, like in this example where moving the cursor updates both coordinates of the red dot:
+Técnicamente, puedes usar cualquiera de estos enfoques. Pero **si algunas de las dos variables de estado siempre cambian juntas, podría ser una buena idea unificarlas en una sola variable de estado.** Entonces no olvidará mantenerlos siempre sincronizados, como en este ejemplo donde al mover el cursor se actualizan ambas coordenadas del punto rojo:
 
 <Sandpack>
 
@@ -93,17 +93,17 @@ body { margin: 0; padding: 0; height: 250px; }
 
 </Sandpack>
 
-Another case where you'll group data into an object or an array is when you don't know how many different pieces of state you'll need. For example, it's helpful when you have a form where the user can add custom fields.
+Otro caso en el que agrupará datos en un objeto o una matriz es cuando no sabe cuántas partes diferentes del estado se necesitarán. Por ejemplo, es útil cuando tienes un formulario en el que el usuario puede agregar campos personalizados.
 
 <Pitfall>
 
-If your state variable is an object, remember that [you can't update only one field in it](/learn/updating-objects-in-state) without explicitly copying the other fields. For example, you can't do `setPosition({ x: 100 })` in the above example because it would not have the `y` property at all! Instead, if you wanted to set `x` alone, you would either do `setPosition({ ...position, x: 100 })`, or split them into two state variables and do `setX(100)`.
+Si tu variable de estado es un objeto, recuerda que [no se puede actualizar solo un campo en él](/learn/updating-objects-in-state) sin copiar explícitamente los otros campos. Por ejemplo, no puedes hacer definir `setPosition({ x: 100 })` pues en el ejemplo anterior no tendría la propiedad `y` en ningún lugar. En su lugar, si quisieras establecer solo la propiedad `x`, la definirías asi `setPosition({ ...position, x: 100 })`, o las dividirías en dos variables de estado y harías `setX(100)`.
 
 </Pitfall>
 
-## Avoid contradictions in state {/*avoid-contradictions-in-state*/}
+## Evitar contradicciones en el estado {/*avoid-contradictions-in-state*/}
 
-Here is a hotel feedback form with `isSending` and `isSent` state variables:
+Aquí hay un formulario de comentarios de un hotel con variables de estado `isSending` y `isSent`:
 
 <Sandpack>
 
@@ -124,12 +124,12 @@ export default function FeedbackForm() {
   }
 
   if (isSent) {
-    return <h1>Thanks for feedback!</h1>
+    return <h1>¡Gracias por tu retroalimentación!</h1>
   }
 
   return (
     <form onSubmit={handleSubmit}>
-      <p>How was your stay at The Prancing Pony?</p>
+      <p>¿Cómo fue tu estadía en The Prancing Pony?</p>
       <textarea
         disabled={isSending}
         value={text}
@@ -140,14 +140,14 @@ export default function FeedbackForm() {
         disabled={isSending}
         type="submit"
       >
-        Send
+        Enviar
       </button>
-      {isSending && <p>Sending...</p>}
+      {isSending && <p>Enviando...</p>}
     </form>
   );
 }
 
-// Pretend to send a message.
+// Pretender enviar un mensaje.
 function sendMessage(text) {
   return new Promise(resolve => {
     setTimeout(resolve, 2000);
@@ -157,9 +157,9 @@ function sendMessage(text) {
 
 </Sandpack>
 
-While this code works, it leaves the door open for "impossible" states. For example, if you forget to call `setIsSent` and `setIsSending` together, you may end up in a situation where both `isSending` and `isSent` are `true` at the same time. The more complex your component is, the harder it will be to understand what happened.
+Si bien este código funciona, deja la puerta abierta para estados "imposibles". Por ejemplo, si olvida llamar a `setIsSent` y `setIsSending` juntos, puede terminar en una situación en la que tanto `isSending` como `isSent` son `true` al mismo tiempo. Cuanto más complejo sea su componente, más difícil será entender lo que sucedió.
 
-**Since `isSending` and `isSent` should never be `true` at the same time, it is better to replace them with one `status` state variable that may take one of *three* valid states:** `'typing'` (initial), `'sending'`, and `'sent'`:
+**Dado que `isSending` y `isSent` nunca deben ser `true` al mismo tiempo, es mejor reemplazarlos con una variable de estado `status` que puede tomar uno de *tres* estados válidos:** `'typing '` (initial), `'sending'` y `'sent'`:
 
 <Sandpack>
 
@@ -181,12 +181,12 @@ export default function FeedbackForm() {
   const isSent = status === 'sent';
 
   if (isSent) {
-    return <h1>Thanks for feedback!</h1>
+    return <h1>¡Gracias por tu retroalimentación!</h1>
   }
 
   return (
     <form onSubmit={handleSubmit}>
-      <p>How was your stay at The Prancing Pony?</p>
+      <p>¿Cómo fue tu estadía en The Prancing Pony?</p>
       <textarea
         disabled={isSending}
         value={text}
@@ -197,14 +197,14 @@ export default function FeedbackForm() {
         disabled={isSending}
         type="submit"
       >
-        Send
+        Enviar
       </button>
-      {isSending && <p>Sending...</p>}
+      {isSending && <p>Enviando...</p>}
     </form>
   );
 }
 
-// Pretend to send a message.
+// Pretender enviar un mensaje.
 function sendMessage(text) {
   return new Promise(resolve => {
     setTimeout(resolve, 2000);
@@ -214,20 +214,20 @@ function sendMessage(text) {
 
 </Sandpack>
 
-You can still declare some constants for readability:
+Todavía puedes declarar algunas constantes para mejorar la legibilidad:
 
 ```js
 const isSending = status === 'sending';
 const isSent = status === 'sent';
 ```
 
-But they're not state variables, so you don't need to worry about them getting out of sync with each other.
+Pero no son variables de estado, por lo que no debe preocuparse de que no estén sincronizadas entre sí.
 
-## Avoid redundant state {/*avoid-redundant-state*/}
+## Evitar estado redundante {/*avoid-redundant-state*/}
 
-If you can calculate some information from the component's props or its existing state variables during rendering, you **should not** put that information into that component's state.
+Si puede calcular alguna información de las props del componente o sus variables de estado existentes durante el renderizado, **no debe** poner esa información en el estado de ese componente.
 
-For example, take this form. It works, but can you find any redundant state in it?
+Por ejemplo, toma este formulario. Funciona, pero ¿puedes encontrar algún estado redundante en él?
 
 <Sandpack>
 
@@ -251,23 +251,23 @@ export default function Form() {
 
   return (
     <>
-      <h2>Let’s check you in</h2>
+      <h2>Vamos a registrarte</h2>
       <label>
-        First name:{' '}
+        Nombre:{' '}
         <input
           value={firstName}
           onChange={handleFirstNameChange}
         />
       </label>
       <label>
-        Last name:{' '}
+        Apellido:{' '}
         <input
           value={lastName}
           onChange={handleLastNameChange}
         />
       </label>
       <p>
-        Your ticket will be issued to: <b>{fullName}</b>
+       Su boleto será emitido a:<b>{fullName}</b>
       </p>
     </>
   );
@@ -280,9 +280,9 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-This form has three state variables: `firstName`, `lastName`, and `fullName`. However, `fullName` is redundant. **You can always calculate `fullName` from `firstName` and `lastName` during render, so remove it from state.**
+Este formulario tiene tres variables de estado: `firstName`, `lastName` y `fullName`. Sin embargo, `fullName` es redundante. **Siempre puedes calcular `fullName` a partir de `firstName` y `lastName` durante el renderizado, así que quítalo del estado.**
 
-This is how you can do it:
+Así es como puedes hacerlo:
 
 <Sandpack>
 
@@ -305,23 +305,23 @@ export default function Form() {
 
   return (
     <>
-      <h2>Let’s check you in</h2>
+      <h2>Vamos a registrarte</h2>
       <label>
-        First name:{' '}
+        Nombre:{' '}
         <input
           value={firstName}
           onChange={handleFirstNameChange}
         />
       </label>
       <label>
-        Last name:{' '}
+        Apellido:{' '}
         <input
           value={lastName}
           onChange={handleLastNameChange}
         />
       </label>
       <p>
-        Your ticket will be issued to: <b>{fullName}</b>
+        Su boleto será emitido a: <b>{fullName}</b>
       </p>
     </>
   );
@@ -334,48 +334,50 @@ label { display: block; margin-bottom: 5px; }
 
 </Sandpack>
 
-Here, `fullName` is *not* a state variable. Instead, it's calculated during render:
+aquí, `fullName` *no* es una variable de estado. En cambio, se calcula durante el renderizado:
 
 ```js
 const fullName = firstName + ' ' + lastName;
 ```
 
-As a result, the change handlers don't need to do anything special to update it. When you call `setFirstName` or `setLastName`, you trigger a re-render, and then the next `fullName` will be calculated from the fresh data.
+Como resultado, los controladores de cambios no necesitan hacer nada especial para actualizarlo. Cuando llamas a `setFirstName` o `setLastName`, activas una nueva representación y luego el siguiente `fullName` se calculará a partir de los nuevos datos.
 
-<DeepDive title="Don't mirror props in state">
+<DeepDive title="No reflejar props en el estado">
 
-A common example of redundant state is code like this:
+Un ejemplo común de estado redundante es un código como este:
 
 ```js
 function Message({ messageColor }) {
   const [color, setColor] = useState(messageColor);
 ```
 
-Here, a `color` state variable is initialized to the `messageColor` prop. The problem is that **if the parent component passes a different value of `messageColor` later (for example, `'red'` instead of `'blue'`), the `color` *state variable* would not be updated!** The state is only initialized during the first render.
+Aquí, una variable de estado `color` se inicializa en la prop `messageColor`. El problema es que **si el componente principal pasa un valor diferente de `messageColor` más adelante (por ejemplo, `'red'` en lugar de `'blue'`), ¡la *variable de estado* `color`¡no se actualizará!** el estado solo se inicializa durante el primer renderizado.
 
-This is why "mirroring" some prop in a state variable can lead to confusion. Instead, use the `messageColor` prop directly in your code. If you want to give it a shorter name, use a constant:
+Esta es la razón por la que "reflejar" alguna prop en una variable de estado puede generar confusión. En su lugar, usa el accesorio `messageColor` directamente en tu código. Si deseas darle un nombre más corto, use una constante:
 
 ```js
 function Message({ messageColor }) {
   const color = messageColor;
 ```
 
-This way it won't get out of sync with the prop passed from the parent component.
-
 "Mirroring" props into state only makes sense when you *want* to ignore all updates for a specific prop. By convention, start the prop name with `initial` or `default` to clarify that its new values are ignored:
 
+De esta forma, no se sincroniza con la propiedad que se pasa desde el componente principal.
+
+"Reflejar" props en estado solo tiene sentido cuando *quieres* ignorar todas las actualizaciones de un prop en específico. Por convención, comience el nombre de la prop con `initial` or `default` para aclarar que sus nuevos valores se ignoran:
+
 ```js
 function Message({ initialColor }) {
-  // The `color` state variable holds the *first* value of `initialColor`.
-  // Further changes to the `initialColor` prop are ignored.
+// La variable de estado `color` contiene el *primer* valor de `initialColor`.
+// Se ignoran los cambios posteriores a la prop `initialColor`.
   const [color, setColor] = useState(initialColor);
 ```
 
 </DeepDive>
 
-## Avoid duplication in state {/*avoid-duplication-in-state*/}
+## Evite la duplicación en el estado {/*avoid-duplication-in-state*/}
 
-This menu list component lets you choose a single travel snack out of several:
+Este componente de lista de menú le permite elegir un solo refrigerio de viaje entre varios:
 
 <Sandpack>
 
@@ -396,7 +398,7 @@ export default function Menu() {
 
   return (
     <>
-      <h2>What's your travel snack?</h2>
+      <h2>¿Cuál es tu merienda de viaje?</h2>
       <ul>
         {items.map(item => (
           <li key={item.id}>
@@ -404,11 +406,11 @@ export default function Menu() {
             {' '}
             <button onClick={() => {
               setSelectedItem(item);
-            }}>Choose</button>
+            }}>Seleccionar</button>
           </li>
         ))}
       </ul>
-      <p>You picked {selectedItem.title}.</p>
+      <p>Seleccionaste {selectedItem.title}.</p>
     </>
   );
 }
@@ -420,9 +422,9 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-Currently, it stores the selected item as an object in the `selectedItem` state variable. However, this is not great: **the contents of the `selectedItem` is the same object as one of the items inside the `items` list.** This means that the information about the item itself is duplicated in two places.
+Actualmente, almacena el elemento seleccionado como un objeto en la variable de estado `selectedItem`. Sin embargo, esto no esta bien: **el contenido de `selectedItem` es el mismo objeto que uno de los elementos dentro de la lista de `items`.** Esto significa que la información sobre el elemento en sí está duplicada en dos lugares.
 
-Why is this a problem? Let's make each item editable:
+¿Por qué es esto un problema? Hagamos que cada elemento sea editable:
 
 <Sandpack>
 
@@ -456,7 +458,7 @@ export default function Menu() {
 
   return (
     <>
-      <h2>What's your travel snack?</h2> 
+      <h2>¿Cuál es tu merienda de viaje?</h2> 
       <ul>
         {items.map((item, index) => (
           <li key={item.id}>
@@ -469,11 +471,11 @@ export default function Menu() {
             {' '}
             <button onClick={() => {
               setSelectedItem(item);
-            }}>Choose</button>
+            }}>Seleccionar</button>
           </li>
         ))}
       </ul>
-      <p>You picked {selectedItem.title}.</p>
+      <p>Seleccionaste {selectedItem.title}.</p>
     </>
   );
 }
@@ -485,9 +487,9 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-Notice how if you first click "Choose" on an item and *then* edit it, **the input updates but the label at the bottom does not reflect the edits.** This is because you have duplicated state, and you forgot to update `selectedItem`.
+Observe cómo si primero hace clic en "Seleccionar" en un elemento y *luego* lo edita, **la entrada se actualiza, pero la etiqueta en la parte inferior no refleja las ediciones.** Esto se debe a que tiene un estado duplicado y se olvidó de actualizar `selectedItem`.
 
-Although you could update `selectedItem` too, an easier fix is to remove duplication. In this example, instead of a `selectedItem` object (which creates a duplication with objects inside `items`), you hold the `selectedId` in state, and *then* get the `selectedItem` by searching the `items` array for an item with that ID:
+Aunque también podría actualizar `selectedItem`, una solución más fácil es eliminar la duplicación. En este ejemplo, en lugar de un objeto `selectedItem` (que crea una duplicación con objetos dentro de `items`), usted mantiene `selectedId` en el estado, y *luego* obtiene el `selectedItem` buscando en la matriz `items` un artículo con esa identificación:
 
 <Sandpack>
 
@@ -523,7 +525,7 @@ export default function Menu() {
 
   return (
     <>
-      <h2>What's your travel snack?</h2>
+      <h2>¿Cuál es tu merienda de viaje?</h2>
       <ul>
         {items.map((item, index) => (
           <li key={item.id}>
@@ -536,11 +538,11 @@ export default function Menu() {
             {' '}
             <button onClick={() => {
               setSelectedId(item.id);
-            }}>Choose</button>
+            }}>Seleccionar</button>
           </li>
         ))}
       </ul>
-      <p>You picked {selectedItem.title}.</p>
+      <p>Seleccionaste {selectedItem.title}.</p>
     </>
   );
 }
@@ -552,25 +554,25 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-(Alternatively, you may hold the selected index in state.)
+(Alternativamente, puede mantener el índice seleccionado en el estado).
 
-The state used to be duplicated like this:
+El estado solía duplicarse de esta manera:
 
 * `items = [{ id: 0, title: 'pretzels'}, ...]`
 * `selectedItem = {id: 0, title: 'pretzels'}`
 
-But after the change it's like this:
+Pero después del cambio es asi:
 
 * `items = [{ id: 0, title: 'pretzels'}, ...]`
 * `selectedId = 0`
 
-The duplication is gone, and you only keep the essential state!
+¡La duplicación se ha ido, y solo conservas el estado esencial!
 
-Now if you edit the *selected* item, the message below will update immediately. This is because `setItems` triggers a re-render, and `items.find(...)` would find the item with the updated title. You didn't need to hold *the selected item* in state, because only the *selected ID* is essential. The rest could be calculated during render.
+Ahora, si edita el item *seleccionado*, el siguiente mensaje se actualizará inmediatamente. Esto se debe a que `setItems` desencadena una nueva representación, y `items.find(...)` encontraría el item con el título actualizado. No era necesario mantener *el item seleccionado* en el estado, porque solo el *ID seleccionado* es esencial. El resto podría calcularse durante el renderizado.
 
-## Avoid deeply nested state {/*avoid-deeply-nested-state*/}
+## Evitar el estado profundamente anidado {/*avoid-deeply-nested-state*/}
 
-Imagine a travel plan consisting of planets, continents, and countries. You might be tempted to structure its state using nested objects and arrays, like in this example:
+Imagina un plan de viaje compuesto por planetas, continentes y países. Es posible que sienta la tentación de estructurar su estado mediante objetos y matrices anidados, como en este ejemplo:
 
 <Sandpack>
 
@@ -599,7 +601,7 @@ export default function TravelPlan() {
   const planets = plan.childPlaces;
   return (
     <>
-      <h2>Places to visit</h2>
+      <h2>Lugares para visitar</h2>
       <ol>
         {planets.map(place => (
           <PlaceTree key={place.id} place={place} />
@@ -816,11 +818,11 @@ export const initialTravelPlan = {
 
 </Sandpack>
 
-Now let's say you want to add a button to delete a place you've already visited. How would you go about it? [Updating nested state](/learn/updating-objects-in-state#updating-a-nested-object) involves making copies of objects all the way up from the part that changed. Deleting a deeply nested place would involve copying its entire parent place chain. Such code can be very verbose.
+Ahora, supongamos que deseas agregar un botón para eliminar un lugar que ya visitaste. ¿Cómo lo harías? [Actualizar el estado anidado](/learn/updating-objects-in-state#updating-a-nested-object) implica hacer copias de objetos desde la parte que cambió. La eliminación de un lugar profundamente anidado implica copiar toda la cadena de lugares principal. Dicho código puede ser muy detallado.
 
-**If the state is too nested to update easily, consider making it "flat".** Here is one way you can restructure this data. Instead of a tree-like structure where each `place` has an array of *its child places*, you can have each place hold an array of *its child place IDs*. Then you can store a mapping from each place ID to the corresponding place.
+**Si el estado está demasiado anidado para actualizarse fácilmente, considere hacerlo "plano".** Esta es una manera de reestructurar estos datos. En lugar de una estructura similar a un árbol donde cada `lugar` tiene una matriz de *sus lugares secundarios*, puede hacer que cada lugar contenga una matriz de *sus ID de lugares secundarios*. Luego puede almacenar un mapeo de cada ID de lugar al lugar correspondiente.
 
-This data restructuring might remind you of seeing a database table:
+Esta reestructuración de datos puede recordarle ver una tabla de base de datos:
 
 <Sandpack>
 
@@ -855,7 +857,7 @@ export default function TravelPlan() {
   const planetIds = root.childIds;
   return (
     <>
-      <h2>Places to visit</h2>
+      <h2>Lugares a visitar</h2>
       <ol>
         {planetIds.map(id => (
           <PlaceTree
@@ -1127,14 +1129,14 @@ export const initialTravelPlan = {
 
 </Sandpack>
 
-**Now that the state is "flat" (also known as "normalized"), updating nested items becomes easier.**
+**Ahora que el estado es "plano" (también conocido como "normalizado"), la actualización de elementos anidados se vuelve más fácil.**
 
-In order to remove a place now, you only need to update two levels of state:
+Para eliminar un lugar ahora, solo necesita actualizar dos niveles de estado:
 
-- The updated version of its *parent* place should exclude the removed ID from its `childIds` array.
-- The updated version of the root "table" object should include the updated version of the parent place.
+- La versión actualizada de su lugar *principal* debería excluir el ID eliminado de su matriz `childIds`.
+- La versión actualizada del objeto raíz de "tabla" debe incluir la versión actualizada del lugar principal.
 
-Here is an example of how you could go about it:
+Este es un ejemplo de cómo podrías hacerlo:
 
 <Sandpack>
 
@@ -1147,17 +1149,17 @@ export default function TravelPlan() {
 
   function handleComplete(parentId, childId) {
     const parent = plan[parentId];
-    // Create a new version of the parent place
-    // that doesn't include this child ID.
+    // Crear una nueva versión del lugar principal
+    // que no incluye ID del hijo.
     const nextParent = {
       ...parent,
       childIds: parent.childIds
         .filter(id => id !== childId)
     };
-    // Update the root state object...
+    // Actualizar el objeto de estado raíz...
     setPlan({
       ...plan,
-      // ...so that it has the updated parent.
+      // ...para que tenga el padre este actualizado.
       [parentId]: nextParent
     });
   }
@@ -1166,7 +1168,7 @@ export default function TravelPlan() {
   const planetIds = root.childIds;
   return (
     <>
-      <h2>Places to visit</h2>
+      <h2>Logares a visitar</h2>
       <ol>
         {planetIds.map(id => (
           <PlaceTree
@@ -1191,7 +1193,7 @@ function PlaceTree({ id, parentId, placesById, onComplete }) {
       <button onClick={() => {
         onComplete(parentId, id);
       }}>
-        Complete
+        Completado
       </button>
       {childIds.length > 0 &&
         <ol>
@@ -1472,11 +1474,11 @@ button { margin: 10px; }
 
 </Sandpack>
 
-You can nest state as much as you like, but making it "flat" can solve numerous problems. It makes state easier to update, and it helps ensure you don't have duplication in different parts of a nested object.
+Puede anidar el estado tanto como desee, pero hacerlo "plano" puede resolver numerosos problemas. Facilita la actualización del estado y ayuda a garantizar que no haya duplicación en diferentes partes de un objeto anidado.
 
-<DeepDive title="Improving memory usage">
+<DeepDive title="Mejorar el uso de memoria">
 
-Ideally, you would also remove the deleted items (and their children!) from the "table" object to improve memory usage. This version does that. It also [uses Immer](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) to make the update logic more concise.
+Idealmente, también eliminaría los elementos eliminados (¡y sus hijos!) del objeto "tabla" para mejorar el uso de la memoria. Esta versión lo hace. También [usa Immer](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) para hacer que la lógica de actualización sea más concisa.
 
 <Sandpack>
 
@@ -1489,12 +1491,12 @@ export default function TravelPlan() {
 
   function handleComplete(parentId, childId) {
     updatePlan(draft => {
-      // Remove from the parent place's child IDs.
+      // Elimina los ID secundarios del lugar principal.
       const parent = draft[parentId];
       parent.childIds = parent.childIds
         .filter(id => id !== childId);
 
-      // Forget this place and all its subtree.
+      // Olvida este lugar y todo su subárbol.
       deleteAllChildren(childId);
       function deleteAllChildren(id) {
         const place = draft[id];
@@ -1508,7 +1510,7 @@ export default function TravelPlan() {
   const planetIds = root.childIds;
   return (
     <>
-      <h2>Places to visit</h2>
+      <h2>Lugares a visitar</h2>
       <ol>
         {planetIds.map(id => (
           <PlaceTree
@@ -1533,7 +1535,7 @@ function PlaceTree({ id, parentId, placesById, onComplete }) {
       <button onClick={() => {
         onComplete(parentId, id);
       }}>
-        Complete
+        Completado
       </button>
       {childIds.length > 0 &&
         <ol>
@@ -1834,25 +1836,25 @@ button { margin: 10px; }
 
 </DeepDive>
 
-Sometimes, you can also reduce state nesting by moving some of the nested state into the child components. This works well for ephemeral UI state that doesn't need to be stored, like whether an item is hovered.
+A veces, también puede reducir el anidamiento de estados moviendo algunos de los estados anidados a los componentes secundarios. Esto funciona bien para el estado efímero de la interfaz de usuario que no necesita almacenarse, por ejemplo, si se pasa el cursor por encima de un elemento.
 
 <Recap>
 
-* If two state variables always update together, consider merging them into one. 
-* Choose your state variables carefully to avoid creating "impossible" states.
-* Structure your state in a way that reduces the chances that you'll make a mistake updating it.
-* Avoid redundant and duplicate state so that you don't need to keep it in sync.
-* Don't put props *into* state unless you specifically want to prevent updates.
-* For UI patterns like selection, keep ID or index in state instead of the object itself.
-* If updating deeply nested state is complicated, try flattening it.
+* Si dos variables de estado siempre se actualizan juntas, considere combinarlas en una.
+* Elija cuidadosamente sus variables de estado para evitar crear estados "imposibles".
+* Estructure su estado de una manera que reduzca las posibilidades de que cometa un error al actualizarlo.
+* Evite el estado redundante y duplicado para que no necesite mantenerlo sincronizado.
+* No ponga props *en* estado a menos que desee evitar específicamente las actualizaciones.
+* Para patrones de interfaz de usuario como la selección, mantenga el ID o el índice en estado en lugar del objeto mismo.
+* Si actualizar el estado profundamente anidado es complicado, intente aplanarlo.
 
 </Recap>
 
 <Challenges>
 
-#### Fix a component that's not updating {/*fix-a-component-thats-not-updating*/}
+#### Arreglar un componente que no se actualiza {/*fix-a-component-thats-not-updating*/}
 
-This `Clock` component receives two props: `color` and `time`. When you select a different color in the select box, the `Clock` component receives a different `color` prop from its parent component. However, for some reason, the displayed color doesn't update. Why? Fix the problem.
+Este componente `Reloj` recibe dos accesorios: `color` y `tiempo`. Cuando selecciona un color diferente en el cuadro de selección, el componente `Reloj` recibe una prop de `color` diferente de su componente principal. Sin embargo, por alguna razón, el color mostrado no se actualiza. ¿Por qué? Arregla el problema.
 
 <Sandpack>
 
@@ -1890,7 +1892,7 @@ export default function App() {
   return (
     <div>
       <p>
-        Pick a color:{' '}
+        Selecciona un color:{' '}
         <select value={color} onChange={e => setColor(e.target.value)}>
           <option value="lightcoral">lightcoral</option>
           <option value="midnightblue">midnightblue</option>
@@ -1907,7 +1909,7 @@ export default function App() {
 
 <Solution>
 
-The issue is that this component has `color` state initialized with the initial value of the `color` prop. But when the `color` prop changes, this does not affect the state variable! So they get out of sync. To fix this issue, remove the state variable altogether, and use the `color` prop directly.
+El problema es que este componente tiene un estado de `color` inicializado con el valor inicial de la prop `color`. Pero cuando cambia la prop `color`, ¡esto no afecta la variable de estado! Entonces se desincronizan. Para solucionar este problema, elimine la variable de estado por completo y use la propiedad `color` directamente.
 
 <Sandpack>
 
@@ -1944,7 +1946,7 @@ export default function App() {
   return (
     <div>
       <p>
-        Pick a color:{' '}
+        Selecciona un color:{' '}
         <select value={color} onChange={e => setColor(e.target.value)}>
           <option value="lightcoral">lightcoral</option>
           <option value="midnightblue">midnightblue</option>
@@ -2013,13 +2015,13 @@ export default function App() {
 
 </Solution>
 
-#### Fix a broken packing list {/*fix-a-broken-packing-list*/}
+#### Arreglar una lista de empaque rota {/*fix-a-broken-packing-list*/}
 
-This packing list has a footer that shows how many items are packed, and how many items there are overall. It seems to work at first, but it is buggy. For example, if you mark an item as packed and then delete it, the counter will not be updated correctly. Fix the counter so that it's always correct.
+Esta lista de empaque tiene un pie de página que muestra cuántos artículos están empacados y cuántos artículos hay en total. Al principio parece funcionar, pero tiene errores. Por ejemplo, si marcas un artículo como empaquetado y luego lo eliminas, el contador no se actualizará correctamente. Arregla el contador para que esté siempre correcto.
 
 <Hint>
 
-Is any state in this example redundant?
+¿Algún estado en este ejemplo es redundante?
 
 </Hint>
 
@@ -2160,7 +2162,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-Although you could carefully change each event handler to update the `total` and `packed` counters correctly, the root problem is that these state variables exist at all. They are redundant because you can always calculate the number of items (packed or total) from the `items` array itself. Remove the redundant state to fix the bug:
+Aunque podría cambiar cuidadosamente cada controlador de eventos para actualizar correctamente los contadores `total` y `packed`, el problema principal es que estas variables de estado existen en absoluto. Son redundantes porque siempre se puede calcular el número de elementos (empaquetados o totales) a partir de la propia matriz `items`. Elimine el estado redundante para corregir el error:
 
 <Sandpack>
 
@@ -2293,15 +2295,15 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-Notice how the event handlers are only concerned with calling `setItems` after this change. The item counts are now calculated during the next render from `items`, so they are always up-to-date.
+Observe cómo los controladores de eventos solo se preocupan por llamar a `setItems` después de este cambio. Los recuentos de elementos ahora se calculan durante el siguiente renderizado desde `items`, por lo que siempre están actualizados.
 
 </Solution>
 
-#### Fix the disappearing selection {/*fix-the-disappearing-selection*/}
+#### Reparar la selección que desaparece {/*fix-the-disappearing-selection*/}
 
-There is a list of `letters` in state. When you hover or focus a particular letter, it gets highlighted. The currently highlighted letter is stored in the `highlightedLetter` state variable. You can "star" and "unstar" individual letters, which updates the `letters` array in state.
+Hay una lista de `letters` en el estado. Cuando pasas el cursor o enfocas una letra en particular, se resalta. La letra actualmente resaltada se almacena en la variable de estado `highlightedLetter`. Puede "destacar" y "desmarcar" letras individuales, lo que actualiza la matriz de `letters` en el estado.
 
-This code works, but there is a minor UI glitch. When you press "Star" or "Unstar", the highlighting disappears for a moment. However, it reappears as soon as you move your pointer or switch to another letter with keyboard. Why is this happening? Fix it so that the highlighting doesn't disappear after the button click.
+Este código funciona, pero hay una pequeña falla en la interfaz de usuario. Cuando presiona "destacar" o "desmarcar", el resaltado desaparece por un momento. Sin embargo, vuelve a aparecer tan pronto como mueve el puntero o cambia a otra letra con el teclado. ¿Por qué sucede esto? Corríjalo para que el resaltado no desaparezca después de hacer clic en el botón.
 
 <Sandpack>
 
@@ -2408,9 +2410,9 @@ li { border-radius: 5px; }
 
 <Solution>
 
-The problem is that you're holding the letter object in `highlightedLetter`. But you're also holding the same information in the `letters` array. So your state has duplication! When you update the `letters` array after the button click, you create a new letter object which is different from `highlightedLetter`. This is why `highlightedLetter === letter` check becomes `false`, and the highlight disappears. It reappears the next time you call `setHighlightedLetter` when the pointer moves.
+El problema es que tienes el objeto de la letra en `highlightedLetter`. Pero también tiene la misma información en la matriz `letters`. ¡Así que tu estado tiene duplicación! Cuando actualiza la matriz de `letters` después de hacer clic en el botón, crea un nuevo objeto de letra que es diferente de `highlightedLetter`. Esta es la razón por la cual la verificación `highlightedLetter === letter` se convierte en `false`, y el resaltado desaparece. Vuelve a aparecer la próxima vez que llamas a `setHighlightedLetter` cuando el puntero se mueve.
 
-To fix the issue, remove the duplication from state. Instead of storing *the letter itself* in two places, store the `highlightedId` instead. Then you can check `isHighlighted` for each letter with `letter.id === highlightedId`, which will work even if the `letter` object has changed since the last render.
+Para solucionar el problema, elimine la duplicación del estado. En lugar de almacenar *la letra misma* en dos lugares, almacene el `highlightedId` en su lugar. Luego, puede verificar `isHighlighted` para cada letra con `letter.id === HighlightId`, que funcionará incluso si el objeto `letter` ha cambiado desde el último renderizado.
 
 <Sandpack>
 
@@ -2517,15 +2519,15 @@ li { border-radius: 5px; }
 
 </Solution>
 
-#### Implement multiple selection {/*implement-multiple-selection*/}
+#### Implementar la selección múltiple. {/*implement-multiple-selection*/}
 
-In this example, each `Letter` has an `isSelected` prop and an `onToggle` handler that marks it as selected. This works, but the state is stored as a `selectedId` (either `null` or an ID), so only one letter can get selected at any given time.
+En este ejemplo, cada `Letter` tiene una propiedad `isSelected` y un controlador `onToggle` que la marca como seleccionada. Esto funciona, pero el estado se almacena como un `selectedId` (ya sea `null` o un ID), por lo que solo se puede seleccionar una letra en un momento dado.
 
-Change the state structure to support multiple selection. (How would you structure it? Think about this before writing the code.) Each checkbox should become independent from the others. Clicking a selected letter should uncheck it. Finally, the footer should show the correct number of the selected items.
+Cambie la estructura de estado para admitir la selección múltiple. (¿Cómo lo estructuraría? Piense en esto antes de escribir el código). Cada casilla de verificación debe independizarse de las demás. Al hacer clic en una letra seleccionada, debería desmarcarse. Por último, el pie de página debe mostrar el número correcto de los elementos seleccionados.
 
 <Hint>
 
-Instead of a single selected ID, you might want to hold an array or a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) of selected IDs in state.
+En lugar de una única ID seleccionado, es posible que desee mantener una matriz o un[Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) de IDs seleccionados en el estado.
 
 </Hint>
 
@@ -2539,11 +2541,11 @@ import Letter from './Letter.js';
 export default function MailClient() {
   const [selectedId, setSelectedId] = useState(null);
 
-  // TODO: allow multiple selection
+  // TODO: permitir selección múltiple
   const selectedCount = 1;
 
   function handleToggle(toggledId) {
-    // TODO: allow multiple selection
+    // TODO: permitir selección múltiple
     setSelectedId(toggledId);
   }
 
@@ -2556,7 +2558,7 @@ export default function MailClient() {
             key={letter.id}
             letter={letter}
             isSelected={
-              // TODO: allow multiple selection
+              // TODO: permitir selección múltiple
               letter.id === selectedId
             }
             onToggle={handleToggle}
@@ -2626,7 +2628,7 @@ label { width: 100%; padding: 5px; display: inline-block; }
 
 <Solution>
 
-Instead of a single `selectedId`, keep a `selectedIds` *array* in state. For example, if you select the first and the last letter, it would contain `[0, 2]`. When nothing is selected, it would be an empty `[]` array:
+En lugar de un solo `selectedId`, mantenga un `selectedIds` *array* en el estado. Por ejemplo, si selecciona la primera y la última letra, contendría `[0, 2]`. Cuando no se selecciona nada, sería un array `[]` vacío:
 
 <Sandpack>
 
@@ -2641,14 +2643,14 @@ export default function MailClient() {
   const selectedCount = selectedIds.length;
 
   function handleToggle(toggledId) {
-    // Was it previously selected?
+    // ¿Qué fue seleccionado previamente?
     if (selectedIds.includes(toggledId)) {
-      // Then remove this ID from the array.
+      // Luego elimine este ID del array.
       setSelectedIds(selectedIds.filter(id =>
         id !== toggledId
       ));
     } else {
-      // Otherwise, add this ID to the array.
+      // De lo contrario, agrega este ID al array.
       setSelectedIds([
         ...selectedIds,
         toggledId
@@ -2732,9 +2734,9 @@ label { width: 100%; padding: 5px; display: inline-block; }
 
 </Sandpack>
 
-One minor downside of using an array is that for each item, you're calling `selectedIds.includes(letter.id)` to check whether it's selected. If the array is very large, this can become a performance problem because array search with [`includes()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) takes linear time, and you're doing this search for each individual item.
+Una desventaja menor de usar un array es que para cada elemento, está llamando `selectedIds.includes (letter.id)` para verificar si está seleccionado. Si el array es muy grande, esto puede convertirse en un problema de rendimiento porque la búsqueda de arrays con [`includes()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) toma un tiempo lineal, y está realizando esta búsqueda para cada elemento individual.
 
-To fix this, you can hold a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) in state instead, which provides a fast [`has()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has) operation:
+Para solucionar esto, puede mantener un [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) en estado, lo que proporciona una operación rápida [`has( )`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has):
 
 <Sandpack>
 
@@ -2751,7 +2753,7 @@ export default function MailClient() {
   const selectedCount = selectedIds.size;
 
   function handleToggle(toggledId) {
-    // Create a copy (to avoid mutation).
+    // Crea una copia (para evitar la mutación).
     const nextIds = new Set(selectedIds);
     if (nextIds.has(toggledId)) {
       nextIds.delete(toggledId);
@@ -2837,9 +2839,9 @@ label { width: 100%; padding: 5px; display: inline-block; }
 
 </Sandpack>
 
-Now each item does a `selectedIds.has(letter.id)` check, which is very fast.
+Ahora cada elemento realiza una comprobación `selectedIds.has(letter.id)`, que es muy rápida.
 
-Keep in mind that you [should not mutate objects in state](/learn/updating-objects-in-state), and that includes Sets, too. This is why the `handleToggle` function creates a *copy* of the Set first, and then updates that copy.
+Tenga en cuenta que [no debe mutar objetos en estado](/learn/updating-objects-in-state), y eso también incluye Conjuntos. Esta es la razón por la cual la función `handleToggle` crea una *copia* del Conjunto primero y luego actualiza esa copia.
 
 </Solution>
 

From 8d0ef3b1707f4c707697960af7e557ca52ff2249 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <radapls8@gmail.com>
Date: Thu, 23 Mar 2023 08:23:26 -0300
Subject: [PATCH 02/22] fix: Fix translate problems based on merge with the
 main branch

---
 .../learn/choosing-the-state-structure.md     | 363 +++++++++---------
 1 file changed, 180 insertions(+), 183 deletions(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index efce4ab5f..b97223eb2 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -18,17 +18,17 @@ Estructurar bien el estado puede marcar la diferencia entre un componente que es
 
 ## Principios para la estructuración del estado {/*principles-for-structuring-state*/}
 
-When you write a component that holds some state, you'll have to make choices about how many state variables to use and what the shape of their data should be. While it's possible to write correct programs even with a suboptimal state structure, there are a few principles that can guide you to make better choices:
+Cuando escribe un componente que contiene algún estado, tendrá que tomar decisiones acerca de cuántas variables de estado usar y cuál debería ser la forma de sus datos. Si bien es posible escribir programas correctos incluso con una estructura de estado deficiente, existen algunos principios que pueden guiarlo para tomar mejores decisiones:
 
-1. **Group related state.** If you always update two or more state variables at the same time, consider merging them into a single state variable.
-2. **Avoid contradictions in state.** When the state is structured in a way that several pieces of state may contradict and "disagree" with each other, you leave room for mistakes. Try to avoid this.
-3. **Avoid redundant state.** If you can calculate some information from the component's props or its existing state variables during rendering, you should not put that information into that component's state.
-4. **Avoid duplication in state.** When the same data is duplicated between multiple state variables, or within nested objects, it is difficult to keep them in sync. Reduce duplication when you can.
-5. **Avoid deeply nested state.** Deeply hierarchical state is not very convenient to update. When possible, prefer to structure state in a flat way.
+1. **Estado relacionado con el grupo.** Si siempre actualiza dos o más variables de estado al mismo tiempo, considere fusionarlas en una sola variable de estado.
+2. **Evite las contradicciones en el estado.** Cuando el estado está estructurado de manera que varias partes del estado pueden contradecirse y "estar en desacuerdo" entre sí, deja espacio para errores. Trate de evitar esto.
+3. **Evite el estado redundante.** Si puede calcular alguna información de las propiedades del componente o sus variables de estado existentes durante el renderizado, no debe poner esa información en el estado de ese componente.
+4. **Evite la duplicación de estado.** Cuando los mismos datos se duplican entre varias variables de estado o dentro de objetos anidados, es difícil mantenerlos sincronizados. Reduzca la duplicación cuando pueda.
+5. **Evite el estado profundamente anidado.** El estado profundamente jerárquico no es muy conveniente para actualizar. Cuando sea posible, prefiera estructurar el estado de forma plana.
 
-The goal behind these principles is to *make state easy to update without introducing mistakes*. Removing redundant and duplicate data from state helps ensure that all its pieces stay in sync. This is similar to how a database engineer might want to ["normalize" the database structure](https://docs.microsoft.com/en-us/office/troubleshoot/access/database-normalization-description) to reduce the chance of bugs. To paraphrase Albert Einstein, **"Make your state as simple as it can be--but no simpler."**
+El objetivo detrás de estos principios es *hacer que el estado sea fácil de actualizar sin introducir errores*. La eliminación de datos redundantes y duplicados del estado ayuda a garantizar que todas sus piezas permanezcan sincronizadas. Esto es similar a cómo un ingeniero de base de datos podría querer ["normalizar" la estructura de la base de datos](https://docs.microsoft.com/en-us/office/troubleshoot/access/database-normalization-description) para reducir la posibilidad de errores. Parafraseando a Albert Einstein, **"Haz que tu estado sea lo más simple posible, pero no más simple".**
 
-Now let's see how these principles apply in action.
+Ahora veamos cómo se aplican estos principios en acción.
 
 ## Estado relativo al grupo {/*group-related-state*/}
 
@@ -362,8 +362,6 @@ function Message({ messageColor }) {
   const color = messageColor;
 ```
 
-"Mirroring" props into state only makes sense when you *want* to ignore all updates for a specific prop. By convention, start the prop name with `initial` or `default` to clarify that its new values are ignored:
-
 De esta forma, no se sincroniza con la propiedad que se pasa desde el componente principal.
 
 "Reflejar" props en estado solo tiene sentido cuando *quieres* ignorar todas las actualizaciones de un prop en específico. Por convención, comience el nombre de la prop con `initial` or `default` para aclarar que sus nuevos valores se ignoran:
@@ -460,7 +458,7 @@ export default function Menu() {
 
   return (
     <>
-      <h2>¿Cuál es tu merienda de viaje?</h2> 
+      <h2>¿Cuál es tu merienda de viaje?</h2>
       <ul>
         {items.map((item, index) => (
           <li key={item.id}>
@@ -620,7 +618,7 @@ export const initialTravelPlan = {
   title: '(Root)',
   childPlaces: [{
     id: 1,
-    title: 'Earth',
+    title: 'Tierra',
     childPlaces: [{
       id: 2,
       title: 'Africa',
@@ -630,11 +628,11 @@ export const initialTravelPlan = {
         childPlaces: []
       }, {
         id: 4,
-        title: 'Egypt',
+        title: 'Egipto',
         childPlaces: []
       }, {
         id: 5,
-        title: 'Kenya',
+        title: 'Kenia',
         childPlaces: []
       }, {
         id: 6,
@@ -642,7 +640,7 @@ export const initialTravelPlan = {
         childPlaces: []
       }, {
         id: 7,
-        title: 'Morocco',
+        title: 'Marruecos',
         childPlaces: []
       }, {
         id: 8,
@@ -650,19 +648,19 @@ export const initialTravelPlan = {
         childPlaces: []
       }, {
         id: 9,
-        title: 'South Africa',
+        title: 'Sudafrica',
         childPlaces: []
       }]
     }, {
       id: 10,
-      title: 'Americas',
+      title: 'Las Americas',
       childPlaces: [{
         id: 11,
         title: 'Argentina',
         childPlaces: []
       }, {
         id: 12,
-        title: 'Brazil',
+        title: 'Brasil',
         childPlaces: []
       }, {
         id: 13,
@@ -682,7 +680,7 @@ export const initialTravelPlan = {
         childPlaces: []
       }, {
         id: 17,
-        title: 'Trinidad and Tobago',
+        title: 'Trinidad y Tobago',
         childPlaces: []
       }, {
         id: 18,
@@ -706,15 +704,15 @@ export const initialTravelPlan = {
         childPlaces: []
       }, {
         id: 23,
-        title: 'Singapore',
+        title: 'Singapur',
         childPlaces: []
       }, {
         id: 24,
-        title: 'South Korea',
+        title: 'Corea del sur',
         childPlaces: []
       }, {
         id: 25,
-        title: 'Thailand',
+        title: 'Tailandia',
         childPlaces: []
       }, {
         id: 26,
@@ -723,22 +721,22 @@ export const initialTravelPlan = {
       }]
     }, {
       id: 27,
-      title: 'Europe',
+      title: 'Europa',
       childPlaces: [{
         id: 28,
-        title: 'Croatia',
+        title: 'Croacia',
         childPlaces: [],
       }, {
         id: 29,
-        title: 'France',
+        title: 'Francia',
         childPlaces: [],
       }, {
         id: 30,
-        title: 'Germany',
+        title: 'Alemania',
         childPlaces: [],
       }, {
         id: 31,
-        title: 'Italy',
+        title: 'Italia',
         childPlaces: [],
       }, {
         id: 32,
@@ -746,11 +744,11 @@ export const initialTravelPlan = {
         childPlaces: [],
       }, {
         id: 33,
-        title: 'Spain',
+        title: 'España',
         childPlaces: [],
       }, {
         id: 34,
-        title: 'Turkey',
+        title: 'Turquia',
         childPlaces: [],
       }]
     }, {
@@ -762,11 +760,11 @@ export const initialTravelPlan = {
         childPlaces: [],
       }, {
         id: 37,
-        title: 'Bora Bora (French Polynesia)',
+        title: 'Bora Bora (Polinesia Franciasa)',
         childPlaces: [],
       }, {
         id: 38,
-        title: 'Easter Island (Chile)',
+        title: 'Isla de pascua (Chile)',
         childPlaces: [],
       }, {
         id: 39,
@@ -774,11 +772,11 @@ export const initialTravelPlan = {
         childPlaces: [],
       }, {
         id: 40,
-        title: 'Hawaii (the USA)',
+        title: 'Hawaii (Estados Unidos)',
         childPlaces: [],
       }, {
         id: 41,
-        title: 'New Zealand',
+        title: 'Nueva Zelanda',
         childPlaces: [],
       }, {
         id: 42,
@@ -788,23 +786,23 @@ export const initialTravelPlan = {
     }]
   }, {
     id: 43,
-    title: 'Moon',
+    title: 'Luna',
     childPlaces: [{
       id: 44,
-      title: 'Rheita',
+      title: 'Rheita (cráter)',
       childPlaces: []
     }, {
       id: 45,
-      title: 'Piccolomini',
+      title: 'Piccolomini (cráter)',
       childPlaces: []
     }, {
       id: 46,
-      title: 'Tycho',
+      title: 'Tycho (cráter)',
       childPlaces: []
     }]
   }, {
     id: 47,
-    title: 'Mars',
+    title: 'Marte',
     childPlaces: [{
       id: 48,
       title: 'Corn Town',
@@ -812,7 +810,7 @@ export const initialTravelPlan = {
     }, {
       id: 49,
       title: 'Green Hill',
-      childPlaces: []      
+      childPlaces: []
     }]
   }]
 };
@@ -883,14 +881,14 @@ export const initialTravelPlan = {
   },
   1: {
     id: 1,
-    title: 'Earth',
+    title: 'Tierra',
     childIds: [2, 10, 19, 27, 35]
   },
   2: {
     id: 2,
     title: 'Africa',
     childIds: [3, 4, 5, 6 , 7, 8, 9]
-  }, 
+  },
   3: {
     id: 3,
     title: 'Botswana',
@@ -898,22 +896,22 @@ export const initialTravelPlan = {
   },
   4: {
     id: 4,
-    title: 'Egypt',
+    title: 'Egipto',
     childIds: []
   },
   5: {
     id: 5,
-    title: 'Kenya',
+    title: 'Kenia',
     childIds: []
   },
   6: {
     id: 6,
     title: 'Madagascar',
     childIds: []
-  }, 
+  },
   7: {
     id: 7,
-    title: 'Morocco',
+    title: 'Marruecos',
     childIds: []
   },
   8: {
@@ -923,13 +921,13 @@ export const initialTravelPlan = {
   },
   9: {
     id: 9,
-    title: 'South Africa',
+    title: 'Sudafrica',
     childIds: []
   },
   10: {
     id: 10,
-    title: 'Americas',
-    childIds: [11, 12, 13, 14, 15, 16, 17, 18],   
+    title: 'Las Americas',
+    childIds: [11, 12, 13, 14, 15, 16, 17, 18],
   },
   11: {
     id: 11,
@@ -938,14 +936,14 @@ export const initialTravelPlan = {
   },
   12: {
     id: 12,
-    title: 'Brazil',
+    title: 'Brasil',
     childIds: []
   },
   13: {
     id: 13,
     title: 'Barbados',
     childIds: []
-  }, 
+  },
   14: {
     id: 14,
     title: 'Canada',
@@ -963,7 +961,7 @@ export const initialTravelPlan = {
   },
   17: {
     id: 17,
-    title: 'Trinidad and Tobago',
+    title: 'Trinidad y Tobago',
     childIds: []
   },
   18: {
@@ -974,7 +972,7 @@ export const initialTravelPlan = {
   19: {
     id: 19,
     title: 'Asia',
-    childIds: [20, 21, 22, 23, 24, 25, 26],   
+    childIds: [20, 21, 22, 23, 24, 25, 26],
   },
   20: {
     id: 20,
@@ -993,17 +991,17 @@ export const initialTravelPlan = {
   },
   23: {
     id: 23,
-    title: 'Singapore',
+    title: 'Singapur',
     childIds: []
   },
   24: {
     id: 24,
-    title: 'South Korea',
+    title: 'Corea del norte',
     childIds: []
   },
   25: {
     id: 25,
-    title: 'Thailand',
+    title: 'Tailandia',
     childIds: []
   },
   26: {
@@ -1013,27 +1011,27 @@ export const initialTravelPlan = {
   },
   27: {
     id: 27,
-    title: 'Europe',
-    childIds: [28, 29, 30, 31, 32, 33, 34],   
+    title: 'Europa',
+    childIds: [28, 29, 30, 31, 32, 33, 34],
   },
   28: {
     id: 28,
-    title: 'Croatia',
+    title: 'Croacia',
     childIds: []
   },
   29: {
     id: 29,
-    title: 'France',
+    title: 'Francia',
     childIds: []
   },
   30: {
     id: 30,
-    title: 'Germany',
+    title: 'Alemania',
     childIds: []
   },
   31: {
     id: 31,
-    title: 'Italy',
+    title: 'Italia',
     childIds: []
   },
   32: {
@@ -1043,18 +1041,18 @@ export const initialTravelPlan = {
   },
   33: {
     id: 33,
-    title: 'Spain',
+    title: 'España',
     childIds: []
   },
   34: {
     id: 34,
-    title: 'Turkey',
+    title: 'Turquia',
     childIds: []
   },
   35: {
     id: 35,
     title: 'Oceania',
-    childIds: [36, 37, 38, 39, 40, 41, 42],   
+    childIds: [36, 37, 38, 39, 40, 41, 42],
   },
   36: {
     id: 36,
@@ -1063,12 +1061,12 @@ export const initialTravelPlan = {
   },
   37: {
     id: 37,
-    title: 'Bora Bora (French Polynesia)',
+    title: 'Bora Bora (Polinesia Francesa)',
     childIds: []
   },
   38: {
     id: 38,
-    title: 'Easter Island (Chile)',
+    title: 'Isla de Pascua (Chile)',
     childIds: []
   },
   39: {
@@ -1078,12 +1076,12 @@ export const initialTravelPlan = {
   },
   40: {
     id: 40,
-    title: 'Hawaii (the USA)',
+    title: 'Hawaii (Estados Unidos)',
     childIds: []
   },
   41: {
     id: 41,
-    title: 'New Zealand',
+    title: 'Nueva Zelanda',
     childIds: []
   },
   42: {
@@ -1093,27 +1091,27 @@ export const initialTravelPlan = {
   },
   43: {
     id: 43,
-    title: 'Moon',
+    title: 'Luna',
     childIds: [44, 45, 46]
   },
   44: {
     id: 44,
-    title: 'Rheita',
+    title: 'Rheita (cráter)',
     childIds: []
   },
   45: {
     id: 45,
-    title: 'Piccolomini',
+    title: 'Piccolomini (cráter)',
     childIds: []
   },
   46: {
     id: 46,
-    title: 'Tycho',
+    title: 'Tycho (cráter)',
     childIds: []
   },
   47: {
     id: 47,
-    title: 'Mars',
+    title: 'Marte',
     childIds: [48, 49]
   },
   48: {
@@ -1135,8 +1133,8 @@ export const initialTravelPlan = {
 
 Para eliminar un lugar ahora, solo necesita actualizar dos niveles de estado:
 
-- La versión actualizada de su lugar *principal* debería excluir el ID eliminado de su matriz `childIds`.
-- La versión actualizada del objeto raíz de "tabla" debe incluir la versión actualizada del lugar principal.
+* La versión actualizada de su lugar *principal* debería excluir el ID eliminado de su matriz `childIds`.
+* La versión actualizada del objeto raíz de "tabla" debe incluir la versión actualizada del lugar principal.
 
 Este es un ejemplo de cómo podrías hacerlo:
 
@@ -1224,14 +1222,14 @@ export const initialTravelPlan = {
   },
   1: {
     id: 1,
-    title: 'Earth',
+    title: 'Tierra',
     childIds: [2, 10, 19, 27, 35]
   },
   2: {
     id: 2,
     title: 'Africa',
     childIds: [3, 4, 5, 6 , 7, 8, 9]
-  }, 
+  },
   3: {
     id: 3,
     title: 'Botswana',
@@ -1239,22 +1237,22 @@ export const initialTravelPlan = {
   },
   4: {
     id: 4,
-    title: 'Egypt',
+    title: 'Egipto',
     childIds: []
   },
   5: {
     id: 5,
-    title: 'Kenya',
+    title: 'Kenia',
     childIds: []
   },
   6: {
     id: 6,
     title: 'Madagascar',
     childIds: []
-  }, 
+  },
   7: {
     id: 7,
-    title: 'Morocco',
+    title: 'Marruecos',
     childIds: []
   },
   8: {
@@ -1264,13 +1262,13 @@ export const initialTravelPlan = {
   },
   9: {
     id: 9,
-    title: 'South Africa',
+    title: 'Sudafrica',
     childIds: []
   },
   10: {
     id: 10,
-    title: 'Americas',
-    childIds: [11, 12, 13, 14, 15, 16, 17, 18],   
+    title: 'Las Americas',
+    childIds: [11, 12, 13, 14, 15, 16, 17, 18],
   },
   11: {
     id: 11,
@@ -1279,14 +1277,14 @@ export const initialTravelPlan = {
   },
   12: {
     id: 12,
-    title: 'Brazil',
+    title: 'Brasil',
     childIds: []
   },
   13: {
     id: 13,
     title: 'Barbados',
     childIds: []
-  }, 
+  },
   14: {
     id: 14,
     title: 'Canada',
@@ -1304,7 +1302,7 @@ export const initialTravelPlan = {
   },
   17: {
     id: 17,
-    title: 'Trinidad and Tobago',
+    title: 'Trinidad y Tobago',
     childIds: []
   },
   18: {
@@ -1315,7 +1313,7 @@ export const initialTravelPlan = {
   19: {
     id: 19,
     title: 'Asia',
-    childIds: [20, 21, 22, 23, 24, 25, 26],   
+    childIds: [20, 21, 22, 23, 24, 25, 26],
   },
   20: {
     id: 20,
@@ -1334,17 +1332,17 @@ export const initialTravelPlan = {
   },
   23: {
     id: 23,
-    title: 'Singapore',
+    title: 'Singapur',
     childIds: []
   },
   24: {
     id: 24,
-    title: 'South Korea',
+    title: 'Corea del norte',
     childIds: []
   },
   25: {
     id: 25,
-    title: 'Thailand',
+    title: 'Tailandia',
     childIds: []
   },
   26: {
@@ -1354,27 +1352,27 @@ export const initialTravelPlan = {
   },
   27: {
     id: 27,
-    title: 'Europe',
-    childIds: [28, 29, 30, 31, 32, 33, 34],   
+    title: 'Europa',
+    childIds: [28, 29, 30, 31, 32, 33, 34],
   },
   28: {
     id: 28,
-    title: 'Croatia',
+    title: 'Croacia',
     childIds: []
   },
   29: {
     id: 29,
-    title: 'France',
+    title: 'Francia',
     childIds: []
   },
   30: {
     id: 30,
-    title: 'Germany',
+    title: 'Alemania',
     childIds: []
   },
   31: {
     id: 31,
-    title: 'Italy',
+    title: 'Italia',
     childIds: []
   },
   32: {
@@ -1384,18 +1382,18 @@ export const initialTravelPlan = {
   },
   33: {
     id: 33,
-    title: 'Spain',
+    title: 'España',
     childIds: []
   },
   34: {
     id: 34,
-    title: 'Turkey',
+    title: 'Turquia',
     childIds: []
   },
   35: {
     id: 35,
     title: 'Oceania',
-    childIds: [36, 37, 38, 39, 40, 41,, 42],   
+    childIds: [36, 37, 38, 39, 40, 41,, 42],
   },
   36: {
     id: 36,
@@ -1404,12 +1402,12 @@ export const initialTravelPlan = {
   },
   37: {
     id: 37,
-    title: 'Bora Bora (French Polynesia)',
+    title: 'Bora Bora (Polinesia Francesa)',
     childIds: []
   },
   38: {
     id: 38,
-    title: 'Easter Island (Chile)',
+    title: 'Isla de Pascua (Chile)',
     childIds: []
   },
   39: {
@@ -1419,12 +1417,12 @@ export const initialTravelPlan = {
   },
   40: {
     id: 40,
-    title: 'Hawaii (the USA)',
+    title: 'Hawaii (Estados Unidos)',
     childIds: []
   },
   41: {
     id: 41,
-    title: 'New Zealand',
+    title: 'Nueva Zelanda',
     childIds: []
   },
   42: {
@@ -1434,27 +1432,27 @@ export const initialTravelPlan = {
   },
   43: {
     id: 43,
-    title: 'Moon',
+    title: 'Luna',
     childIds: [44, 45, 46]
   },
   44: {
     id: 44,
-    title: 'Rheita',
+    title: 'Rheita (cráter)',
     childIds: []
   },
   45: {
     id: 45,
-    title: 'Piccolomini',
+    title: 'Piccolomini (cráter)',
     childIds: []
   },
   46: {
     id: 46,
-    title: 'Tycho',
+    title: 'Tycho (cráter)',
     childIds: []
   },
   47: {
     id: 47,
-    title: 'Mars',
+    title: 'Marte',
     childIds: [48, 49]
   },
   48: {
@@ -1482,7 +1480,6 @@ Puede anidar el estado tanto como desee, pero hacerlo "plano" puede resolver num
 
 #### Mejorar el uso de memoria {/*improving-memory-usage*/}
 
-
 Idealmente, también eliminaría los elementos eliminados (¡y sus hijos!) del objeto "tabla" para mejorar el uso de la memoria. Esta versión lo hace. También [usa Immer](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) para hacer que la lógica de actualización sea más concisa.
 
 <Sandpack>
@@ -1569,14 +1566,14 @@ export const initialTravelPlan = {
   },
   1: {
     id: 1,
-    title: 'Earth',
+    title: 'Tierra',
     childIds: [2, 10, 19, 27, 35]
   },
   2: {
     id: 2,
     title: 'Africa',
     childIds: [3, 4, 5, 6 , 7, 8, 9]
-  }, 
+  },
   3: {
     id: 3,
     title: 'Botswana',
@@ -1584,22 +1581,22 @@ export const initialTravelPlan = {
   },
   4: {
     id: 4,
-    title: 'Egypt',
+    title: 'Egipto',
     childIds: []
   },
   5: {
     id: 5,
-    title: 'Kenya',
+    title: 'Kenia',
     childIds: []
   },
   6: {
     id: 6,
     title: 'Madagascar',
     childIds: []
-  }, 
+  },
   7: {
     id: 7,
-    title: 'Morocco',
+    title: 'Marruecos',
     childIds: []
   },
   8: {
@@ -1609,13 +1606,13 @@ export const initialTravelPlan = {
   },
   9: {
     id: 9,
-    title: 'South Africa',
+    title: 'Sudafrica',
     childIds: []
   },
   10: {
     id: 10,
-    title: 'Americas',
-    childIds: [11, 12, 13, 14, 15, 16, 17, 18],   
+    title: 'Las Americas',
+    childIds: [11, 12, 13, 14, 15, 16, 17, 18],
   },
   11: {
     id: 11,
@@ -1624,14 +1621,14 @@ export const initialTravelPlan = {
   },
   12: {
     id: 12,
-    title: 'Brazil',
+    title: 'Brasil',
     childIds: []
   },
   13: {
     id: 13,
     title: 'Barbados',
     childIds: []
-  }, 
+  },
   14: {
     id: 14,
     title: 'Canada',
@@ -1649,7 +1646,7 @@ export const initialTravelPlan = {
   },
   17: {
     id: 17,
-    title: 'Trinidad and Tobago',
+    title: 'Trinidad y Tobago',
     childIds: []
   },
   18: {
@@ -1660,7 +1657,7 @@ export const initialTravelPlan = {
   19: {
     id: 19,
     title: 'Asia',
-    childIds: [20, 21, 22, 23, 24, 25, 26],   
+    childIds: [20, 21, 22, 23, 24, 25, 26],
   },
   20: {
     id: 20,
@@ -1679,17 +1676,17 @@ export const initialTravelPlan = {
   },
   23: {
     id: 23,
-    title: 'Singapore',
+    title: 'Singapur',
     childIds: []
   },
   24: {
     id: 24,
-    title: 'South Korea',
+    title: 'Corea del norte',
     childIds: []
   },
   25: {
     id: 25,
-    title: 'Thailand',
+    title: 'Tailandia',
     childIds: []
   },
   26: {
@@ -1699,27 +1696,27 @@ export const initialTravelPlan = {
   },
   27: {
     id: 27,
-    title: 'Europe',
-    childIds: [28, 29, 30, 31, 32, 33, 34],   
+    title: 'Europa',
+    childIds: [28, 29, 30, 31, 32, 33, 34],
   },
   28: {
     id: 28,
-    title: 'Croatia',
+    title: 'Croacia',
     childIds: []
   },
   29: {
     id: 29,
-    title: 'France',
+    title: 'Francia',
     childIds: []
   },
   30: {
     id: 30,
-    title: 'Germany',
+    title: 'Alemania',
     childIds: []
   },
   31: {
     id: 31,
-    title: 'Italy',
+    title: 'Italia',
     childIds: []
   },
   32: {
@@ -1729,18 +1726,18 @@ export const initialTravelPlan = {
   },
   33: {
     id: 33,
-    title: 'Spain',
+    title: 'España',
     childIds: []
   },
   34: {
     id: 34,
-    title: 'Turkey',
+    title: 'Turquia',
     childIds: []
   },
   35: {
     id: 35,
     title: 'Oceania',
-    childIds: [36, 37, 38, 39, 40, 41,, 42],   
+    childIds: [36, 37, 38, 39, 40, 41,, 42],
   },
   36: {
     id: 36,
@@ -1749,12 +1746,12 @@ export const initialTravelPlan = {
   },
   37: {
     id: 37,
-    title: 'Bora Bora (French Polynesia)',
+    title: 'Bora Bora (Polinesia Francesa)',
     childIds: []
   },
   38: {
     id: 38,
-    title: 'Easter Island (Chile)',
+    title: 'Isla de Pascua (Chile)',
     childIds: []
   },
   39: {
@@ -1764,12 +1761,12 @@ export const initialTravelPlan = {
   },
   40: {
     id: 40,
-    title: 'Hawaii (the USA)',
+    title: 'Hawaii (Estados Unidos)',
     childIds: []
   },
   41: {
     id: 41,
-    title: 'New Zealand',
+    title: 'Nueva Zelanda',
     childIds: []
   },
   42: {
@@ -1779,27 +1776,27 @@ export const initialTravelPlan = {
   },
   43: {
     id: 43,
-    title: 'Moon',
+    title: 'Luna',
     childIds: [44, 45, 46]
   },
   44: {
     id: 44,
-    title: 'Rheita',
+    title: 'Rheita (cráter)',
     childIds: []
   },
   45: {
     id: 45,
-    title: 'Piccolomini',
+    title: 'Piccolomini (cráter)',
     childIds: []
   },
   46: {
     id: 46,
-    title: 'Tycho',
+    title: 'Tycho (cráter)',
     childIds: []
   },
   47: {
     id: 47,
-    title: 'Mars',
+    title: 'Marte',
     childIds: [48, 49]
   },
   48: {
@@ -1966,7 +1963,7 @@ export default function App() {
 
 </Sandpack>
 
-Or, using the destructuring syntax:
+O, usando la sintaxis de desestructuración:
 
 <Sandpack>
 
@@ -2039,9 +2036,9 @@ import PackingList from './PackingList.js';
 
 let nextId = 3;
 const initialItems = [
-  { id: 0, title: 'Warm socks', packed: true },
-  { id: 1, title: 'Travel journal', packed: false },
-  { id: 2, title: 'Watercolors', packed: false },
+  { id: 0, title: 'Calcetines cálidos', packed: true },
+  { id: 1, title: 'Diario de viaje', packed: false },
+  { id: 2, title: 'Acuarelas', packed: false },
 ];
 
 export default function TravelPlan() {
@@ -2084,7 +2081,7 @@ export default function TravelPlan() {
   }
 
   return (
-    <>  
+    <>
       <AddItem
         onAddItem={handleAddItem}
       />
@@ -2094,7 +2091,7 @@ export default function TravelPlan() {
         onDeleteItem={handleDeleteItem}
       />
       <hr />
-      <b>{packed} out of {total} packed!</b>
+      <b>¡{packed} de {total} empacados!</b>
     </>
   );
 }
@@ -2108,14 +2105,14 @@ export default function AddItem({ onAddItem }) {
   return (
     <>
       <input
-        placeholder="Add item"
+        placeholder="Adicionar item"
         value={title}
         onChange={e => setTitle(e.target.value)}
       />
       <button onClick={() => {
         setTitle('');
         onAddItem(title);
-      }}>Add</button>
+      }}>Adicionar</button>
     </>
   )
 }
@@ -2148,7 +2145,7 @@ export default function PackingList({
             {item.title}
           </label>
           <button onClick={() => onDeleteItem(item.id)}>
-            Delete
+            Eliminar
           </button>
         </li>
       ))}
@@ -2178,9 +2175,9 @@ import PackingList from './PackingList.js';
 
 let nextId = 3;
 const initialItems = [
-  { id: 0, title: 'Warm socks', packed: true },
-  { id: 1, title: 'Travel journal', packed: false },
-  { id: 2, title: 'Watercolors', packed: false },
+  { id: 0, title: 'Calcetines cálidos', packed: true },
+  { id: 1, title: 'Diario de viaje', packed: false },
+  { id: 2, title: 'Acuarelas', packed: false },
 ];
 
 export default function TravelPlan() {
@@ -2219,7 +2216,7 @@ export default function TravelPlan() {
   }
 
   return (
-    <>  
+    <>
       <AddItem
         onAddItem={handleAddItem}
       />
@@ -2229,7 +2226,7 @@ export default function TravelPlan() {
         onDeleteItem={handleDeleteItem}
       />
       <hr />
-      <b>{packed} out of {total} packed!</b>
+      <b>¡{packed} de {total} empacados!</b>
     </>
   );
 }
@@ -2243,14 +2240,14 @@ export default function AddItem({ onAddItem }) {
   return (
     <>
       <input
-        placeholder="Add item"
+        placeholder="Adicionar item"
         value={title}
         onChange={e => setTitle(e.target.value)}
       />
       <button onClick={() => {
         setTitle('');
         onAddItem(title);
-      }}>Add</button>
+      }}>Adicionar</button>
     </>
   )
 }
@@ -2283,7 +2280,7 @@ export default function PackingList({
             {item.title}
           </label>
           <button onClick={() => onDeleteItem(item.id)}>
-            Delete
+            Eliminar
           </button>
         </li>
       ))}
@@ -2340,7 +2337,7 @@ export default function MailClient() {
 
   return (
     <>
-      <h2>Inbox</h2>
+      <h2>Bandeja de entrada</h2>
       <ul>
         {letters.map(letter => (
           <Letter
@@ -2372,7 +2369,7 @@ export default function Letter({
         isHighlighted ? 'highlighted' : ''
       }
       onFocus={() => {
-        onHover(letter);        
+        onHover(letter);
       }}
       onPointerMove={() => {
         onHover(letter);
@@ -2392,15 +2389,15 @@ export default function Letter({
 ```js data.js
 export const initialLetters = [{
   id: 0,
-  subject: 'Ready for adventure?',
+  subject: '¿Listo para la aventura?',
   isStarred: true,
 }, {
   id: 1,
-  subject: 'Time to check in!',
+  subject: '¡Hora de registrarse!',
   isStarred: false,
 }, {
   id: 2,
-  subject: 'Festival Begins in Just SEVEN Days!',
+  subject: '¡El festival comienza en solo SIETE días!',
   isStarred: false,
 }];
 ```
@@ -2449,7 +2446,7 @@ export default function MailClient() {
 
   return (
     <>
-      <h2>Inbox</h2>
+      <h2>Bandeja de entrada</h2>
       <ul>
         {letters.map(letter => (
           <Letter
@@ -2481,7 +2478,7 @@ export default function Letter({
         isHighlighted ? 'highlighted' : ''
       }
       onFocus={() => {
-        onHover(letter.id);        
+        onHover(letter.id);
       }}
       onPointerMove={() => {
         onHover(letter.id);
@@ -2501,15 +2498,15 @@ export default function Letter({
 ```js data.js
 export const initialLetters = [{
   id: 0,
-  subject: 'Ready for adventure?',
+  subject: '¿Listo para la aventura?',
   isStarred: true,
 }, {
   id: 1,
-  subject: 'Time to check in!',
+  subject: '¡Hora de registrarse!',
   isStarred: false,
 }, {
   id: 2,
-  subject: 'Festival Begins in Just SEVEN Days!',
+  subject: '¡El festival comienza en solo SIETE días!',
   isStarred: false,
 }];
 ```
@@ -2556,7 +2553,7 @@ export default function MailClient() {
 
   return (
     <>
-      <h2>Inbox</h2>
+      <h2>Bandeja de entrada</h2>
       <ul>
         {letters.map(letter => (
           <Letter
@@ -2609,15 +2606,15 @@ export default function Letter({
 ```js data.js
 export const letters = [{
   id: 0,
-  subject: 'Ready for adventure?',
+  subject: '¿Listo para la aventura?',
   isStarred: true,
 }, {
   id: 1,
-  subject: 'Time to check in!',
+  subject: '¡Hora de registrarse!',
   isStarred: false,
 }, {
   id: 2,
-  subject: 'Festival Begins in Just SEVEN Days!',
+  subject: '¡El festival comienza en solo SIETE días!',
   isStarred: false,
 }];
 ```
@@ -2665,7 +2662,7 @@ export default function MailClient() {
 
   return (
     <>
-      <h2>Inbox</h2>
+      <h2>Bandeja de entrada</h2>
       <ul>
         {letters.map(letter => (
           <Letter
@@ -2717,15 +2714,15 @@ export default function Letter({
 ```js data.js
 export const letters = [{
   id: 0,
-  subject: 'Ready for adventure?',
+  subject: '¿Listo para la aventura?',
   isStarred: true,
 }, {
   id: 1,
-  subject: 'Time to check in!',
+  subject: '¡Hora de registrarse!',
   isStarred: false,
 }, {
   id: 2,
-  subject: 'Festival Begins in Just SEVEN Days!',
+  subject: '¡El festival comienza en solo SIETE días!',
   isStarred: false,
 }];
 ```
@@ -2770,7 +2767,7 @@ export default function MailClient() {
 
   return (
     <>
-      <h2>Inbox</h2>
+      <h2>Bandeja de entrada</h2>
       <ul>
         {letters.map(letter => (
           <Letter
@@ -2822,15 +2819,15 @@ export default function Letter({
 ```js data.js
 export const letters = [{
   id: 0,
-  subject: 'Ready for adventure?',
+  subject: '¿Listo para la aventura?',
   isStarred: true,
 }, {
   id: 1,
-  subject: 'Time to check in!',
+  subject: '¡Hora de registrarse!',
   isStarred: false,
 }, {
   id: 2,
-  subject: 'Festival Begins in Just SEVEN Days!',
+  subject: '¡El festival comienza en solo SIETE días!',
   isStarred: false,
 }];
 ```

From effedb0e06bc4f8da2b5aac66bd9c0ecdb331fec Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 11:59:00 -0300
Subject: [PATCH 03/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index b97223eb2..e43ad3244 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -10,7 +10,7 @@ Estructurar bien el estado puede marcar la diferencia entre un componente que es
 
 <YouWillLearn>
 
-* Cuando usar una versus multiples variables de estado.
+* Cuando usar una versus múltiples variables de estado.
 * Qué evitar al organizar el estado.
 * Cómo solucionar problemas comunes con la estructura del estado.
 

From d950a6d4b7f4df014963350de74183a2b81dfd29 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 11:59:17 -0300
Subject: [PATCH 04/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index e43ad3244..668d821da 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -18,7 +18,7 @@ Estructurar bien el estado puede marcar la diferencia entre un componente que es
 
 ## Principios para la estructuración del estado {/*principles-for-structuring-state*/}
 
-Cuando escribe un componente que contiene algún estado, tendrá que tomar decisiones acerca de cuántas variables de estado usar y cuál debería ser la forma de sus datos. Si bien es posible escribir programas correctos incluso con una estructura de estado deficiente, existen algunos principios que pueden guiarlo para tomar mejores decisiones:
+Cuando escribes un componente que contiene algún estado, tendrás que tomar decisiones acerca de cuántas variables de estado usar y cuál debería ser la forma de tus datos. Si bien es posible escribir programas correctos incluso con una estructura de estado deficiente, existen algunos principios que pueden guiarte para tomar mejores decisiones:
 
 1. **Estado relacionado con el grupo.** Si siempre actualiza dos o más variables de estado al mismo tiempo, considere fusionarlas en una sola variable de estado.
 2. **Evite las contradicciones en el estado.** Cuando el estado está estructurado de manera que varias partes del estado pueden contradecirse y "estar en desacuerdo" entre sí, deja espacio para errores. Trate de evitar esto.

From f5f01a1d50ff0a2c7321a370ac3ed9309725ffbb Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 11:59:28 -0300
Subject: [PATCH 05/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index 668d821da..e5b33ea96 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -20,7 +20,7 @@ Estructurar bien el estado puede marcar la diferencia entre un componente que es
 
 Cuando escribes un componente que contiene algún estado, tendrás que tomar decisiones acerca de cuántas variables de estado usar y cuál debería ser la forma de tus datos. Si bien es posible escribir programas correctos incluso con una estructura de estado deficiente, existen algunos principios que pueden guiarte para tomar mejores decisiones:
 
-1. **Estado relacionado con el grupo.** Si siempre actualiza dos o más variables de estado al mismo tiempo, considere fusionarlas en una sola variable de estado.
+1. **Estado relacionado con el grupo.** Si siempre actualizas dos o más variables de estado al mismo tiempo, considera fusionarlas en una sola variable de estado.
 2. **Evite las contradicciones en el estado.** Cuando el estado está estructurado de manera que varias partes del estado pueden contradecirse y "estar en desacuerdo" entre sí, deja espacio para errores. Trate de evitar esto.
 3. **Evite el estado redundante.** Si puede calcular alguna información de las propiedades del componente o sus variables de estado existentes durante el renderizado, no debe poner esa información en el estado de ese componente.
 4. **Evite la duplicación de estado.** Cuando los mismos datos se duplican entre varias variables de estado o dentro de objetos anidados, es difícil mantenerlos sincronizados. Reduzca la duplicación cuando pueda.

From bdd43256804e0a5b25a2d3dcb8566e287ed5da99 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 11:59:44 -0300
Subject: [PATCH 06/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index e5b33ea96..94f175354 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -21,7 +21,7 @@ Estructurar bien el estado puede marcar la diferencia entre un componente que es
 Cuando escribes un componente que contiene algún estado, tendrás que tomar decisiones acerca de cuántas variables de estado usar y cuál debería ser la forma de tus datos. Si bien es posible escribir programas correctos incluso con una estructura de estado deficiente, existen algunos principios que pueden guiarte para tomar mejores decisiones:
 
 1. **Estado relacionado con el grupo.** Si siempre actualizas dos o más variables de estado al mismo tiempo, considera fusionarlas en una sola variable de estado.
-2. **Evite las contradicciones en el estado.** Cuando el estado está estructurado de manera que varias partes del estado pueden contradecirse y "estar en desacuerdo" entre sí, deja espacio para errores. Trate de evitar esto.
+2. **Evita las contradicciones en el estado.** Cuando el estado está estructurado de manera que varias partes del estado pueden contradecirse y "estar en desacuerdo" entre sí, deja espacio para errores. Trata de evitar esto.
 3. **Evite el estado redundante.** Si puede calcular alguna información de las propiedades del componente o sus variables de estado existentes durante el renderizado, no debe poner esa información en el estado de ese componente.
 4. **Evite la duplicación de estado.** Cuando los mismos datos se duplican entre varias variables de estado o dentro de objetos anidados, es difícil mantenerlos sincronizados. Reduzca la duplicación cuando pueda.
 5. **Evite el estado profundamente anidado.** El estado profundamente jerárquico no es muy conveniente para actualizar. Cuando sea posible, prefiera estructurar el estado de forma plana.

From 03468587b89ff039f47d917f7347117f7c8fb7cf Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:00:17 -0300
Subject: [PATCH 07/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index 94f175354..196a201a2 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -22,7 +22,7 @@ Cuando escribes un componente que contiene algún estado, tendrás que tomar dec
 
 1. **Estado relacionado con el grupo.** Si siempre actualizas dos o más variables de estado al mismo tiempo, considera fusionarlas en una sola variable de estado.
 2. **Evita las contradicciones en el estado.** Cuando el estado está estructurado de manera que varias partes del estado pueden contradecirse y "estar en desacuerdo" entre sí, deja espacio para errores. Trata de evitar esto.
-3. **Evite el estado redundante.** Si puede calcular alguna información de las propiedades del componente o sus variables de estado existentes durante el renderizado, no debe poner esa información en el estado de ese componente.
+3. **Evita el estado redundante.** Si puedes calcular alguna información de las propiedades del componente o sus variables de estado existentes durante el renderizado, no debes poner esa información en el estado de ese componente.
 4. **Evite la duplicación de estado.** Cuando los mismos datos se duplican entre varias variables de estado o dentro de objetos anidados, es difícil mantenerlos sincronizados. Reduzca la duplicación cuando pueda.
 5. **Evite el estado profundamente anidado.** El estado profundamente jerárquico no es muy conveniente para actualizar. Cuando sea posible, prefiera estructurar el estado de forma plana.
 

From 1a7c8d14f2d441e617782a9a58c59e38f8ddee46 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:01:05 -0300
Subject: [PATCH 08/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index 196a201a2..ecfd12e88 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -23,7 +23,7 @@ Cuando escribes un componente que contiene algún estado, tendrás que tomar dec
 1. **Estado relacionado con el grupo.** Si siempre actualizas dos o más variables de estado al mismo tiempo, considera fusionarlas en una sola variable de estado.
 2. **Evita las contradicciones en el estado.** Cuando el estado está estructurado de manera que varias partes del estado pueden contradecirse y "estar en desacuerdo" entre sí, deja espacio para errores. Trata de evitar esto.
 3. **Evita el estado redundante.** Si puedes calcular alguna información de las propiedades del componente o sus variables de estado existentes durante el renderizado, no debes poner esa información en el estado de ese componente.
-4. **Evite la duplicación de estado.** Cuando los mismos datos se duplican entre varias variables de estado o dentro de objetos anidados, es difícil mantenerlos sincronizados. Reduzca la duplicación cuando pueda.
+4. **Evita la duplicación de estado.** Cuando los mismos datos se duplican entre varias variables de estado o dentro de objetos anidados, es difícil mantenerlos sincronizados. Reduce la duplicación cuando puedas.
 5. **Evite el estado profundamente anidado.** El estado profundamente jerárquico no es muy conveniente para actualizar. Cuando sea posible, prefiera estructurar el estado de forma plana.
 
 El objetivo detrás de estos principios es *hacer que el estado sea fácil de actualizar sin introducir errores*. La eliminación de datos redundantes y duplicados del estado ayuda a garantizar que todas sus piezas permanezcan sincronizadas. Esto es similar a cómo un ingeniero de base de datos podría querer ["normalizar" la estructura de la base de datos](https://docs.microsoft.com/en-us/office/troubleshoot/access/database-normalization-description) para reducir la posibilidad de errores. Parafraseando a Albert Einstein, **"Haz que tu estado sea lo más simple posible, pero no más simple".**

From 5017a3c932341bea6b907358c3ab18001189eba9 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:01:24 -0300
Subject: [PATCH 09/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index ecfd12e88..2e1f57660 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -24,7 +24,7 @@ Cuando escribes un componente que contiene algún estado, tendrás que tomar dec
 2. **Evita las contradicciones en el estado.** Cuando el estado está estructurado de manera que varias partes del estado pueden contradecirse y "estar en desacuerdo" entre sí, deja espacio para errores. Trata de evitar esto.
 3. **Evita el estado redundante.** Si puedes calcular alguna información de las propiedades del componente o sus variables de estado existentes durante el renderizado, no debes poner esa información en el estado de ese componente.
 4. **Evita la duplicación de estado.** Cuando los mismos datos se duplican entre varias variables de estado o dentro de objetos anidados, es difícil mantenerlos sincronizados. Reduce la duplicación cuando puedas.
-5. **Evite el estado profundamente anidado.** El estado profundamente jerárquico no es muy conveniente para actualizar. Cuando sea posible, prefiera estructurar el estado de forma plana.
+5. **Evita el estado profundamente anidado.** El estado profundamente jerárquico no es muy conveniente para actualizar. Cuando sea posible, prefiere estructurar el estado de forma plana.
 
 El objetivo detrás de estos principios es *hacer que el estado sea fácil de actualizar sin introducir errores*. La eliminación de datos redundantes y duplicados del estado ayuda a garantizar que todas sus piezas permanezcan sincronizadas. Esto es similar a cómo un ingeniero de base de datos podría querer ["normalizar" la estructura de la base de datos](https://docs.microsoft.com/en-us/office/troubleshoot/access/database-normalization-description) para reducir la posibilidad de errores. Parafraseando a Albert Einstein, **"Haz que tu estado sea lo más simple posible, pero no más simple".**
 

From f32d50729bf57c8cb4426670ae00455c541663e5 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:01:34 -0300
Subject: [PATCH 10/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index 2e1f57660..fc519e376 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -2414,7 +2414,7 @@ li { border-radius: 5px; }
 
 El problema es que tienes el objeto de la letra en `highlightedLetter`. Pero también tiene la misma información en la matriz `letters`. ¡Así que tu estado tiene duplicación! Cuando actualiza la matriz de `letters` después de hacer clic en el botón, crea un nuevo objeto de letra que es diferente de `highlightedLetter`. Esta es la razón por la cual la verificación `highlightedLetter === letter` se convierte en `false`, y el resaltado desaparece. Vuelve a aparecer la próxima vez que llamas a `setHighlightedLetter` cuando el puntero se mueve.
 
-Para solucionar el problema, elimine la duplicación del estado. En lugar de almacenar *la letra misma* en dos lugares, almacene el `highlightedId` en su lugar. Luego, puede verificar `isHighlighted` para cada letra con `letter.id === HighlightId`, que funcionará incluso si el objeto `letter` ha cambiado desde el último renderizado.
+Para solucionar el problema, elimine la duplicación del estado. En lugar de almacenar *la letra misma* en dos lugares, almacena el `highlightedId` en su lugar. Luego, puedes verificar `isHighlighted` para cada letra con `letter.id === HighlightId`, que funcionará incluso si el objeto `letter` ha cambiado desde el último renderizado.
 
 <Sandpack>
 

From 36c2b12accb708f285231b0b444195f3d2ce7cb3 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:01:44 -0300
Subject: [PATCH 11/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index fc519e376..5910633dc 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -2525,7 +2525,7 @@ li { border-radius: 5px; }
 
 En este ejemplo, cada `Letter` tiene una propiedad `isSelected` y un controlador `onToggle` que la marca como seleccionada. Esto funciona, pero el estado se almacena como un `selectedId` (ya sea `null` o un ID), por lo que solo se puede seleccionar una letra en un momento dado.
 
-Cambie la estructura de estado para admitir la selección múltiple. (¿Cómo lo estructuraría? Piense en esto antes de escribir el código). Cada casilla de verificación debe independizarse de las demás. Al hacer clic en una letra seleccionada, debería desmarcarse. Por último, el pie de página debe mostrar el número correcto de los elementos seleccionados.
+Cambia la estructura de estado para admitir la selección múltiple. (¿Cómo lo estructurarías? Piensa en esto antes de escribir el código). Cada casilla de verificación debe independizarse de las demás. Al hacer clic en una letra seleccionada, debería desmarcarse. Por último, el pie de página debe mostrar el número correcto de los elementos seleccionados.
 
 <Hint>
 

From 68e2505983cda548b241f821fce1d26a7699ffed Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:01:52 -0300
Subject: [PATCH 12/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index 5910633dc..e4fc239f6 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -2529,7 +2529,7 @@ Cambia la estructura de estado para admitir la selección múltiple. (¿Cómo lo
 
 <Hint>
 
-En lugar de una única ID seleccionado, es posible que desee mantener una matriz o un[Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) de IDs seleccionados en el estado.
+En lugar de un único ID seleccionado, es posible que desees mantener una matriz o un[Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) de IDs seleccionados en el estado.
 
 </Hint>
 

From 66a42e6ac9741d26dbe060c719c8cb977d4d0be8 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:02:01 -0300
Subject: [PATCH 13/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index e4fc239f6..26a1813ac 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -2630,7 +2630,7 @@ label { width: 100%; padding: 5px; display: inline-block; }
 
 <Solution>
 
-En lugar de un solo `selectedId`, mantenga un `selectedIds` *array* en el estado. Por ejemplo, si selecciona la primera y la última letra, contendría `[0, 2]`. Cuando no se selecciona nada, sería un array `[]` vacío:
+En lugar de un solo `selectedId`, mantén un *array* `selectedIds` en el estado. Por ejemplo, si selecciona la primera y la última letra, contendría `[0, 2]`. Cuando no se selecciona nada, sería un *array* `[]` vacío:
 
 <Sandpack>
 

From ca3a2961b14b77c89b9a2c252b1b10cb7dc2c31a Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:02:10 -0300
Subject: [PATCH 14/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index 26a1813ac..0b82980e1 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -2843,7 +2843,7 @@ label { width: 100%; padding: 5px; display: inline-block; }
 
 Ahora cada elemento realiza una comprobación `selectedIds.has(letter.id)`, que es muy rápida.
 
-Tenga en cuenta que [no debe mutar objetos en estado](/learn/updating-objects-in-state), y eso también incluye Conjuntos. Esta es la razón por la cual la función `handleToggle` crea una *copia* del Conjunto primero y luego actualiza esa copia.
+Ten en cuenta que [no debes mutar objetos en estado](/learn/updating-objects-in-state), y eso también incluye Sets. Esta es la razón por la cual la función `handleToggle` crea una *copia* del Set primero y luego actualiza esa copia.
 
 </Solution>
 

From 9b517cafc47655f7f20687adc6cf94c687eb2a6d Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:03:17 -0300
Subject: [PATCH 15/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index 0b82980e1..ce0e26de0 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -32,7 +32,7 @@ Ahora veamos cómo se aplican estos principios en acción.
 
 ## Estado relativo al grupo {/*group-related-state*/}
 
-En ocasiones, es posible que no esté seguro entre usar una o varias variables de estado.
+En ocasiones, es posible que no estés seguro entre usar una o varias variables de estado.
 
 ¿Deberías hacer esto?
 

From b1928d4b4e1eefc5602d7cbbe4ff0bb136254dd7 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:03:35 -0300
Subject: [PATCH 16/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index ce0e26de0..e62245ce7 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -47,7 +47,7 @@ const [y, setY] = useState(0);
 const [position, setPosition] = useState({ x: 0, y: 0 });
 ```
 
-Técnicamente, puedes usar cualquiera de estos enfoques. Pero **si algunas de las dos variables de estado siempre cambian juntas, podría ser una buena idea unificarlas en una sola variable de estado.** Entonces no olvidará mantenerlos siempre sincronizados, como en este ejemplo donde al mover el cursor se actualizan ambas coordenadas del punto rojo:
+Técnicamente, puedes usar cualquiera de estos enfoques. Pero **si algunas de las dos variables de estado siempre cambian juntas, podría ser una buena idea unificarlas en una sola variable de estado.** Entonces no olvidarás mantenerlos siempre sincronizados, como en este ejemplo donde al mover el cursor se actualizan ambas coordenadas del punto rojo:
 
 <Sandpack>
 

From f9f27df6ed5931220c809c79582a0baaeb71eb3a Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:03:50 -0300
Subject: [PATCH 17/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index e62245ce7..c470dc54a 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -93,7 +93,7 @@ body { margin: 0; padding: 0; height: 250px; }
 
 </Sandpack>
 
-Otro caso en el que agrupará datos en un objeto o una matriz es cuando no sabe cuántas partes diferentes del estado se necesitarán. Por ejemplo, es útil cuando tienes un formulario en el que el usuario puede agregar campos personalizados.
+Otro caso en el que agruparás datos en un objeto o una matriz es cuando no sabes cuántas partes diferentes del estado se necesitarán. Por ejemplo, es útil cuando tienes un formulario en el que el usuario puede agregar campos personalizados.
 
 <Pitfall>
 

From a4c8bfb16c53893f0bc52f8fa01eaa63d95e6ee7 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:04:30 -0300
Subject: [PATCH 18/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index c470dc54a..f7ccf2283 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -97,7 +97,7 @@ Otro caso en el que agruparás datos en un objeto o una matriz es cuando no sabe
 
 <Pitfall>
 
-Si tu variable de estado es un objeto, recuerda que [no se puede actualizar solo un campo en él](/learn/updating-objects-in-state) sin copiar explícitamente los otros campos. Por ejemplo, no puedes hacer definir `setPosition({ x: 100 })` pues en el ejemplo anterior no tendría la propiedad `y` en ningún lugar. En su lugar, si quisieras establecer solo la propiedad `x`, la definirías asi `setPosition({ ...position, x: 100 })`, o las dividirías en dos variables de estado y harías `setX(100)`.
+Si tu variable de estado es un objeto, recuerda que [no se puede actualizar solo un campo en él](/learn/updating-objects-in-state) sin copiar explícitamente los otros campos. Por ejemplo, no puedes hacer `setPosition({ x: 100 })` pues en el ejemplo anterior no tendría la propiedad `y` en ningún lugar. En su lugar, si quisieras establecer solo la propiedad `x`, la definirías así `setPosition({ ...position, x: 100 })`, o las dividirías en dos variables de estado y harías `setX(100)`.
 
 </Pitfall>
 

From 484b3fe7575c29aad6e6aced91629a49a196ee24 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:05:36 -0300
Subject: [PATCH 19/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index f7ccf2283..e5b3b9c64 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -157,7 +157,7 @@ function sendMessage(text) {
 
 </Sandpack>
 
-Si bien este código funciona, deja la puerta abierta para estados "imposibles". Por ejemplo, si olvida llamar a `setIsSent` y `setIsSending` juntos, puede terminar en una situación en la que tanto `isSending` como `isSent` son `true` al mismo tiempo. Cuanto más complejo sea su componente, más difícil será entender lo que sucedió.
+Si bien este código funciona, deja la puerta abierta para estados "imposibles". Por ejemplo, si olvidas llamar a `setIsSent` y `setIsSending` juntos, puede terminar en una situación en la que tanto `isSending` como `isSent` son `true` al mismo tiempo. Cuanto más complejo sea tu componente, más difícil será entender lo que sucedió.
 
 **Dado que `isSending` y `isSent` nunca deben ser `true` al mismo tiempo, es mejor reemplazarlos con una variable de estado `status` que puede tomar uno de *tres* estados válidos:** `'typing '` (initial), `'sending'` y `'sent'`:
 

From 0c15ffd384c3b2c2fbf83c98e0f8db6a8e0a8d3a Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:06:29 -0300
Subject: [PATCH 20/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index e5b3b9c64..fcf2a72cb 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -221,7 +221,7 @@ const isSending = status === 'sending';
 const isSent = status === 'sent';
 ```
 
-Pero no son variables de estado, por lo que no debe preocuparse de que no estén sincronizadas entre sí.
+Pero no son variables de estado, por lo que no debes preocuparte de que no estén sincronizadas entre sí.
 
 ## Evitar estado redundante {/*avoid-redundant-state*/}
 

From e4a90d7d3e0a9cff718609e0b84902d31c070dfd Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:09:21 -0300
Subject: [PATCH 21/22] Apply suggestions from code review

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 .../learn/choosing-the-state-structure.md     | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index fcf2a72cb..e5c5ba41e 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -225,7 +225,7 @@ Pero no son variables de estado, por lo que no debes preocuparte de que no esté
 
 ## Evitar estado redundante {/*avoid-redundant-state*/}
 
-Si puede calcular alguna información de las props del componente o sus variables de estado existentes durante el renderizado, **no debe** poner esa información en el estado de ese componente.
+Si puedes calcular alguna información de las props del componente o sus variables de estado existentes durante el renderizado, **no debes** poner esa información en el estado de ese componente.
 
 Por ejemplo, toma este formulario. Funciona, pero ¿puedes encontrar algún estado redundante en él?
 
@@ -364,7 +364,7 @@ function Message({ messageColor }) {
 
 De esta forma, no se sincroniza con la propiedad que se pasa desde el componente principal.
 
-"Reflejar" props en estado solo tiene sentido cuando *quieres* ignorar todas las actualizaciones de un prop en específico. Por convención, comience el nombre de la prop con `initial` or `default` para aclarar que sus nuevos valores se ignoran:
+"Reflejar" props en estado solo tiene sentido cuando *quieres* ignorar todas las actualizaciones de una prop en específico. Por convención, comienza el nombre de la prop con `initial` or `default` para aclarar que sus nuevos valores se ignoran:
 
 ```js
 function Message({ initialColor }) {
@@ -375,9 +375,9 @@ function Message({ initialColor }) {
 
 </DeepDive>
 
-## Evite la duplicación en el estado {/*avoid-duplication-in-state*/}
+## Evita la duplicación en el estado {/*avoid-duplication-in-state*/}
 
-Este componente de lista de menú le permite elegir un solo refrigerio de viaje entre varios:
+Este componente de lista de menú te permite elegir un solo refrigerio de viaje entre varios:
 
 <Sandpack>
 
@@ -422,7 +422,7 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-Actualmente, almacena el elemento seleccionado como un objeto en la variable de estado `selectedItem`. Sin embargo, esto no esta bien: **el contenido de `selectedItem` es el mismo objeto que uno de los elementos dentro de la lista de `items`.** Esto significa que la información sobre el elemento en sí está duplicada en dos lugares.
+Actualmente, almacena el elemento seleccionado como un objeto en la variable de estado `selectedItem`. Sin embargo, esto no está bien: **el contenido de `selectedItem` es el mismo objeto que uno de los elementos dentro de la lista de `items`.** Esto significa que la información sobre el elemento en sí está duplicada en dos lugares.
 
 ¿Por qué es esto un problema? Hagamos que cada elemento sea editable:
 
@@ -487,9 +487,9 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-Observe cómo si primero hace clic en "Seleccionar" en un elemento y *luego* lo edita, **la entrada se actualiza, pero la etiqueta en la parte inferior no refleja las ediciones.** Esto se debe a que tiene un estado duplicado y se olvidó de actualizar `selectedItem`.
+Observe cómo si primero haces clic en "Seleccionar" en un elemento y *luego* lo editas, **la entrada se actualiza, pero la etiqueta en la parte inferior no refleja las ediciones.** Esto se debe a que tienes un estado duplicado y te olvidaste de actualizar `selectedItem`.
 
-Aunque también podría actualizar `selectedItem`, una solución más fácil es eliminar la duplicación. En este ejemplo, en lugar de un objeto `selectedItem` (que crea una duplicación con objetos dentro de `items`), usted mantiene `selectedId` en el estado, y *luego* obtiene el `selectedItem` buscando en la matriz `items` un artículo con esa identificación:
+Aunque también podría actualizar `selectedItem`, una solución más fácil es eliminar la duplicación. En este ejemplo, en lugar de un objeto `selectedItem` (que crea una duplicación con objetos dentro de `items`), mantienes `selectedId` en el estado, y *luego* obtienes el `selectedItem` buscando en la matriz `items` un artículo con esa identificación:
 
 <Sandpack>
 
@@ -554,25 +554,25 @@ button { margin-top: 10px; }
 
 </Sandpack>
 
-(Alternativamente, puede mantener el índice seleccionado en el estado).
+(Alternativamente, puedes mantener el índice seleccionado en el estado).
 
 El estado solía duplicarse de esta manera:
 
 * `items = [{ id: 0, title: 'pretzels'}, ...]`
 * `selectedItem = {id: 0, title: 'pretzels'}`
 
-Pero después del cambio es asi:
+Pero después del cambio es así:
 
 * `items = [{ id: 0, title: 'pretzels'}, ...]`
 * `selectedId = 0`
 
 ¡La duplicación se ha ido, y solo conservas el estado esencial!
 
-Ahora, si edita el item *seleccionado*, el siguiente mensaje se actualizará inmediatamente. Esto se debe a que `setItems` desencadena una nueva representación, y `items.find(...)` encontraría el item con el título actualizado. No era necesario mantener *el item seleccionado* en el estado, porque solo el *ID seleccionado* es esencial. El resto podría calcularse durante el renderizado.
+Ahora, si editas el item *seleccionado*, el siguiente mensaje se actualizará inmediatamente. Esto se debe a que `setItems` desencadena una nueva representación, y `items.find(...)` encontraría el item con el título actualizado. No era necesario mantener *el item seleccionado* en el estado, porque solo el *ID seleccionado* es esencial. El resto podría calcularse durante el renderizado.
 
 ## Evitar el estado profundamente anidado {/*avoid-deeply-nested-state*/}
 
-Imagina un plan de viaje compuesto por planetas, continentes y países. Es posible que sienta la tentación de estructurar su estado mediante objetos y matrices anidados, como en este ejemplo:
+Imagina un plan de viaje compuesto por planetas, continentes y países. Es posible que sientas la tentación de estructurar tu estado mediante objetos y matrices anidados, como en este ejemplo:
 
 <Sandpack>
 
@@ -820,9 +820,9 @@ export const initialTravelPlan = {
 
 Ahora, supongamos que deseas agregar un botón para eliminar un lugar que ya visitaste. ¿Cómo lo harías? [Actualizar el estado anidado](/learn/updating-objects-in-state#updating-a-nested-object) implica hacer copias de objetos desde la parte que cambió. La eliminación de un lugar profundamente anidado implica copiar toda la cadena de lugares principal. Dicho código puede ser muy detallado.
 
-**Si el estado está demasiado anidado para actualizarse fácilmente, considere hacerlo "plano".** Esta es una manera de reestructurar estos datos. En lugar de una estructura similar a un árbol donde cada `lugar` tiene una matriz de *sus lugares secundarios*, puede hacer que cada lugar contenga una matriz de *sus ID de lugares secundarios*. Luego puede almacenar un mapeo de cada ID de lugar al lugar correspondiente.
+**Si el estado está demasiado anidado para actualizarse fácilmente, considera hacerlo "plano".** Esta es una manera de reestructurar estos datos. En lugar de una estructura similar a un árbol donde cada `lugar` tiene una matriz de *sus lugares secundarios*, puedes hacer que cada lugar contenga una matriz de *sus ID de lugares secundarios*. Luego puedes almacenar un mapeo de cada ID de lugar al lugar correspondiente.
 
-Esta reestructuración de datos puede recordarle ver una tabla de base de datos:
+Esta reestructuración de datos puede recordarte ver una tabla de base de datos:
 
 <Sandpack>
 
@@ -1131,7 +1131,7 @@ export const initialTravelPlan = {
 
 **Ahora que el estado es "plano" (también conocido como "normalizado"), la actualización de elementos anidados se vuelve más fácil.**
 
-Para eliminar un lugar ahora, solo necesita actualizar dos niveles de estado:
+Para eliminar un lugar ahora, solo necesitas actualizar dos niveles de estado:
 
 * La versión actualizada de su lugar *principal* debería excluir el ID eliminado de su matriz `childIds`.
 * La versión actualizada del objeto raíz de "tabla" debe incluir la versión actualizada del lugar principal.
@@ -1474,7 +1474,7 @@ button { margin: 10px; }
 
 </Sandpack>
 
-Puede anidar el estado tanto como desee, pero hacerlo "plano" puede resolver numerosos problemas. Facilita la actualización del estado y ayuda a garantizar que no haya duplicación en diferentes partes de un objeto anidado.
+Puede anidar el estado tanto como desees, pero hacerlo "plano" puede resolver numerosos problemas. Facilita la actualización del estado y ayuda a garantizar que no haya duplicación en diferentes partes de un objeto anidado.
 
 <DeepDive>
 
@@ -1838,17 +1838,17 @@ button { margin: 10px; }
 
 </DeepDive>
 
-A veces, también puede reducir el anidamiento de estados moviendo algunos de los estados anidados a los componentes secundarios. Esto funciona bien para el estado efímero de la interfaz de usuario que no necesita almacenarse, por ejemplo, si se pasa el cursor por encima de un elemento.
+A veces, también puedes reducir el anidamiento de estados moviendo algunos de los estados anidados a los componentes secundarios. Esto funciona bien para el estado efímero de la interfaz de usuario que no necesita almacenarse, por ejemplo, si se pasa el cursor por encima de un elemento.
 
 <Recap>
 
-* Si dos variables de estado siempre se actualizan juntas, considere combinarlas en una.
-* Elija cuidadosamente sus variables de estado para evitar crear estados "imposibles".
-* Estructure su estado de una manera que reduzca las posibilidades de que cometa un error al actualizarlo.
-* Evite el estado redundante y duplicado para que no necesite mantenerlo sincronizado.
-* No ponga props *en* estado a menos que desee evitar específicamente las actualizaciones.
-* Para patrones de interfaz de usuario como la selección, mantenga el ID o el índice en estado en lugar del objeto mismo.
-* Si actualizar el estado profundamente anidado es complicado, intente aplanarlo.
+* Si dos variables de estado siempre se actualizan juntas, considera combinarlas en una.
+* Elige cuidadosamente tus variables de estado para evitar crear estados "imposibles".
+* Estructura tu estado de una manera que reduzca las posibilidades de que cometas un error al actualizarlo.
+* Evita el estado redundante y duplicado para que no necesites mantenerlo sincronizado.
+* No pongas props *en* estado a menos que desees evitar específicamente las actualizaciones.
+* Para patrones de interfaz de usuario como la selección, mantén el ID o el índice en estado en lugar del objeto mismo.
+* Si actualizar el estado profundamente anidado es complicado, intenta aplanarlo.
 
 </Recap>
 
@@ -1856,7 +1856,7 @@ A veces, también puede reducir el anidamiento de estados moviendo algunos de lo
 
 #### Arreglar un componente que no se actualiza {/*fix-a-component-thats-not-updating*/}
 
-Este componente `Reloj` recibe dos accesorios: `color` y `tiempo`. Cuando selecciona un color diferente en el cuadro de selección, el componente `Reloj` recibe una prop de `color` diferente de su componente principal. Sin embargo, por alguna razón, el color mostrado no se actualiza. ¿Por qué? Arregla el problema.
+Este componente `Reloj` recibe dos props: `color` y `tiempo`. Cuando seleccionas un color diferente en el cuadro de selección, el componente `Reloj` recibe una prop de `color` diferente de su componente principal. Sin embargo, por alguna razón, el color mostrado no se actualiza. ¿Por qué? Arregla el problema.
 
 <Sandpack>
 
@@ -1911,7 +1911,7 @@ export default function App() {
 
 <Solution>
 
-El problema es que este componente tiene un estado de `color` inicializado con el valor inicial de la prop `color`. Pero cuando cambia la prop `color`, ¡esto no afecta la variable de estado! Entonces se desincronizan. Para solucionar este problema, elimine la variable de estado por completo y use la propiedad `color` directamente.
+El problema es que este componente tiene un estado de `color` inicializado con el valor inicial de la prop `color`. Pero cuando cambia la prop `color`, ¡esto no afecta la variable de estado! Entonces se desincronizan. Para solucionar este problema, elimina la variable de estado por completo y use la prop `color` directamente.
 
 <Sandpack>
 
@@ -2164,7 +2164,7 @@ ul, li { margin: 0; padding: 0; }
 
 <Solution>
 
-Aunque podría cambiar cuidadosamente cada controlador de eventos para actualizar correctamente los contadores `total` y `packed`, el problema principal es que estas variables de estado existen en absoluto. Son redundantes porque siempre se puede calcular el número de elementos (empaquetados o totales) a partir de la propia matriz `items`. Elimine el estado redundante para corregir el error:
+Aunque podrías cambiar cuidadosamente cada controlador de eventos para actualizar correctamente los contadores `total` y `packed`, el problema principal es que estas variables de estado existan desde un inicio. Son redundantes porque siempre se puede calcular el número de elementos (empaquetados o totales) a partir de la propia matriz `items`. Elimine el estado redundante para corregir el error:
 
 <Sandpack>
 
@@ -2297,7 +2297,7 @@ ul, li { margin: 0; padding: 0; }
 
 </Sandpack>
 
-Observe cómo los controladores de eventos solo se preocupan por llamar a `setItems` después de este cambio. Los recuentos de elementos ahora se calculan durante el siguiente renderizado desde `items`, por lo que siempre están actualizados.
+Observa cómo los controladores de eventos solo se preocupan por llamar a `setItems` después de este cambio. Los recuentos de elementos ahora se calculan durante el siguiente renderizado desde `items`, por lo que siempre están actualizados.
 
 </Solution>
 
@@ -2412,7 +2412,7 @@ li { border-radius: 5px; }
 
 <Solution>
 
-El problema es que tienes el objeto de la letra en `highlightedLetter`. Pero también tiene la misma información en la matriz `letters`. ¡Así que tu estado tiene duplicación! Cuando actualiza la matriz de `letters` después de hacer clic en el botón, crea un nuevo objeto de letra que es diferente de `highlightedLetter`. Esta es la razón por la cual la verificación `highlightedLetter === letter` se convierte en `false`, y el resaltado desaparece. Vuelve a aparecer la próxima vez que llamas a `setHighlightedLetter` cuando el puntero se mueve.
+El problema es que tienes el objeto de la letra en `highlightedLetter`. Pero también tienes la misma información en la matriz `letters`. ¡Así que tu estado tiene duplicación! Cuando actualizas la matriz de `letters` después de hacer clic en el botón, crea un nuevo objeto de letra que es diferente de `highlightedLetter`. Esta es la razón por la cual la verificación `highlightedLetter === letter` se convierte en `false`, y el resaltado desaparece. Vuelve a aparecer la próxima vez que llamas a `setHighlightedLetter` cuando el puntero se mueve.
 
 Para solucionar el problema, elimine la duplicación del estado. En lugar de almacenar *la letra misma* en dos lugares, almacena el `highlightedId` en su lugar. Luego, puedes verificar `isHighlighted` para cada letra con `letter.id === HighlightId`, que funcionará incluso si el objeto `letter` ha cambiado desde el último renderizado.
 

From c5811df49617a8db56d63a972017798d0a90c4e4 Mon Sep 17 00:00:00 2001
From: Juan Felipe Rada <63562282+Radapls@users.noreply.github.com>
Date: Thu, 23 Mar 2023 12:10:33 -0300
Subject: [PATCH 22/22] Update
 beta/src/content/learn/choosing-the-state-structure.md

Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
---
 beta/src/content/learn/choosing-the-state-structure.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/beta/src/content/learn/choosing-the-state-structure.md b/beta/src/content/learn/choosing-the-state-structure.md
index e5c5ba41e..de662b50f 100644
--- a/beta/src/content/learn/choosing-the-state-structure.md
+++ b/beta/src/content/learn/choosing-the-state-structure.md
@@ -570,7 +570,7 @@ Pero después del cambio es así:
 
 Ahora, si editas el item *seleccionado*, el siguiente mensaje se actualizará inmediatamente. Esto se debe a que `setItems` desencadena una nueva representación, y `items.find(...)` encontraría el item con el título actualizado. No era necesario mantener *el item seleccionado* en el estado, porque solo el *ID seleccionado* es esencial. El resto podría calcularse durante el renderizado.
 
-## Evitar el estado profundamente anidado {/*avoid-deeply-nested-state*/}
+## Evita el estado profundamente anidado {/*avoid-deeply-nested-state*/}
 
 Imagina un plan de viaje compuesto por planetas, continentes y países. Es posible que sientas la tentación de estructurar tu estado mediante objetos y matrices anidados, como en este ejemplo: