From f6bd32f9ede8bde277d260bd92c7ebf43ec4691a Mon Sep 17 00:00:00 2001 From: Aitor Lancharro Date: Wed, 5 Oct 2022 20:34:29 +0200 Subject: [PATCH 01/33] translated some parts --- beta/src/content/learn/queueing-a-series-of-state-updates.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/beta/src/content/learn/queueing-a-series-of-state-updates.md b/beta/src/content/learn/queueing-a-series-of-state-updates.md index 4144d3623..d17b12e34 100644 --- a/beta/src/content/learn/queueing-a-series-of-state-updates.md +++ b/beta/src/content/learn/queueing-a-series-of-state-updates.md @@ -1,10 +1,10 @@ --- -title: Queueing a Series of State Updates +title: Poner en cola una Serie de Actualizaciones del Estado --- -Setting a state variable will queue another render. But sometimes you might want to perform multiple operations on the value before queueing the next render. To do this, it helps to understand how React batches state updates. +Al establecer una variable de estado se pondrá en cola otro render. Pero a veces, es posible que quieras realizar varias operaciones antes de poner en cola la siguiente renderización. Para hacer esto, ayuda entender cómo React pone en lotes las actualizaciones del estado. From 75f155642882e1106afd423e41544675456b4dfd Mon Sep 17 00:00:00 2001 From: Aitor Lancharro Date: Thu, 6 Oct 2022 16:30:38 +0200 Subject: [PATCH 02/33] Translation of some other parts --- .../learn/queueing-a-series-of-state-updates.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/beta/src/content/learn/queueing-a-series-of-state-updates.md b/beta/src/content/learn/queueing-a-series-of-state-updates.md index d17b12e34..30f9024cc 100644 --- a/beta/src/content/learn/queueing-a-series-of-state-updates.md +++ b/beta/src/content/learn/queueing-a-series-of-state-updates.md @@ -10,14 +10,14 @@ Al establecer una variable de estado se pondrá en cola otro render. Pero a vece -* What "batching" is and how React uses it to process multiple state updates -* How to apply several updates to the same state variable in a row +* Qué es el "batching" y cómo lo utiliza React para procesar múltiples actualizaciones de estado +* Cómo aplicar varias actualizaciones a la misma variable de estado de forma consecutiva ## React batches state updates {/*react-batches-state-updates*/} -You might expect that clicking the "+3" button will increment the counter three times because it calls `setNumber(number + 1)` three times: +Podrías esperar que al hacer clic en el botón "+3" el contador se incremente tres veces porque llama a `setNumber(number + 1)` tres veces: @@ -47,7 +47,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -However, as you might recall from the previous section, [each render's state values are fixed](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), so the value of `number` inside the first render's event handler is always `0`, no matter how many times you call `setNumber(1)`: +Sin embargo, como se puede recordar de la sección anterior, [los valores de estado de cada render son fijos](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), para que el valor de `number` dentro del manejador de eventos del primer render sea siempre `0`, sin importar cuántas veces se llame a `setNumber(1)`: ```js setNumber(0 + 1); @@ -55,13 +55,13 @@ setNumber(0 + 1); setNumber(0 + 1); ``` -But there is one other factor at work here to discuss. **React waits until *all* code in the event handlers has run before processing your state updates.** This is why the re-render only happens *after* all these `setNumber()` calls. +Pero hay otro factor a discutir aquí. **React espera hasta que *todo* el código de los manejadores de eventos se haya ejecutado antes de procesar sus actualizaciones del estado.** Por ello, la re-renderizado sólo se produce *después* de todas las llamadas `setNumber()`. -This might remind you of a waiter taking an order at the restaurant. A waiter doesn't run to the kitchen at the mention of your first dish! Instead, they let you finish your order, let you make changes to it, and even take orders from other people at the table. +Esto puede recordarte a un camarero que toma nota de un pedido en un restaurante. El camarero no corre a la cocina al mencionar tu primer plato. En lugar de eso, te deja terminar tu pedido, te permite hacer cambios en él e incluso toma nota de los pedidos de las otras personas en la mesa. - + -This lets you update multiple state variables--even from multiple components--without triggering too many [re-renders.](/learn/render-and-commit#re-renders-when-state-updates) But this also means that the UI won't be updated until _after_ your event handler, and any code in it, completes. This behavior, also known as **batching,** makes your React app run much faster. It also avoids dealing with confusing "half-finished" renders where only some of the variables have been updated. +Esto le permite actualizar múltiples variables de estado -incluso de múltiples componentes- sin realizar demasiados [re-renderizados.](/learn/render-and-commit#re-renders-when-state-updates) Pero esto también significa que la UI no se actualizará hasta _después_ de que tu controlador de eventos, y cualquier código en él, se complete. Este comportamiento, también conocido como **batching**, hace que tu aplicación de React se ejecute mucho más rápido. También evita tener que lidiar con confusos renderizados "a medio terminar" en los que sólo se han actualizado algunas de las variables. **React does not batch across *multiple* intentional events like clicks**--each click is handled separately. Rest assured that React only does batching when it's generally safe to do. This ensures that, for example, if the first button click disables a form, the second click would not submit it again. From 8c36b027531efcb0beb73f205295c685036edd36 Mon Sep 17 00:00:00 2001 From: Aitor Lancharro Date: Thu, 6 Oct 2022 19:02:41 +0200 Subject: [PATCH 03/33] Translation dones --- .../queueing-a-series-of-state-updates.md | 120 +++++++++--------- 1 file changed, 60 insertions(+), 60 deletions(-) diff --git a/beta/src/content/learn/queueing-a-series-of-state-updates.md b/beta/src/content/learn/queueing-a-series-of-state-updates.md index 30f9024cc..0fc7a21fa 100644 --- a/beta/src/content/learn/queueing-a-series-of-state-updates.md +++ b/beta/src/content/learn/queueing-a-series-of-state-updates.md @@ -4,14 +4,14 @@ title: Poner en cola una Serie de Actualizaciones del Estado -Al establecer una variable de estado se pondrá en cola otro render. Pero a veces, es posible que quieras realizar varias operaciones antes de poner en cola la siguiente renderización. Para hacer esto, ayuda entender cómo React pone en lotes las actualizaciones del estado. +Al establecer una variable de estado se pondrá en cola otro render. Pero a veces, es posible que quieras realizar varias operaciones antes de poner en cola la siguiente renderización. Para hacer esto, nos facilita entender cómo React pone en lotes las actualizaciones del estado. -* Qué es el "batching" y cómo lo utiliza React para procesar múltiples actualizaciones de estado -* Cómo aplicar varias actualizaciones a la misma variable de estado de forma consecutiva +* Qué es el "batching" y cómo lo utiliza React para procesar múltiples actualizaciones del estado +* Cómo aplicar varias actualizaciones a la misma variable del estado de forma consecutiva @@ -47,7 +47,7 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -Sin embargo, como se puede recordar de la sección anterior, [los valores de estado de cada render son fijos](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), para que el valor de `number` dentro del manejador de eventos del primer render sea siempre `0`, sin importar cuántas veces se llame a `setNumber(1)`: +Sin embargo, como se puede recordar de la sección anterior, [los valores del estado de cada render son fijos](/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time), para que el valor de `number` dentro del manejador de eventos del primer render sea siempre `0`, sin importar cuántas veces se llame a `setNumber(1)`: ```js setNumber(0 + 1); @@ -55,21 +55,21 @@ setNumber(0 + 1); setNumber(0 + 1); ``` -Pero hay otro factor a discutir aquí. **React espera hasta que *todo* el código de los manejadores de eventos se haya ejecutado antes de procesar sus actualizaciones del estado.** Por ello, la re-renderizado sólo se produce *después* de todas las llamadas `setNumber()`. +Pero hay otro factor a discutir aquí. **React espera hasta que *todo* el código de los manejadores de eventos se haya ejecutado antes de procesar sus actualizaciones del estado.** Por ello, el re-renderizado sólo se produce *después* de todas las llamadas `setNumber()`. Esto puede recordarte a un camarero que toma nota de un pedido en un restaurante. El camarero no corre a la cocina al mencionar tu primer plato. En lugar de eso, te deja terminar tu pedido, te permite hacer cambios en él e incluso toma nota de los pedidos de las otras personas en la mesa. -Esto le permite actualizar múltiples variables de estado -incluso de múltiples componentes- sin realizar demasiados [re-renderizados.](/learn/render-and-commit#re-renders-when-state-updates) Pero esto también significa que la UI no se actualizará hasta _después_ de que tu controlador de eventos, y cualquier código en él, se complete. Este comportamiento, también conocido como **batching**, hace que tu aplicación de React se ejecute mucho más rápido. También evita tener que lidiar con confusos renderizados "a medio terminar" en los que sólo se han actualizado algunas de las variables. +Esto te permite actualizar múltiples variables del estado -incluso de múltiples componentes- sin realizar demasiados [re-renderizados.](/learn/render-and-commit#re-renders-when-state-updates) Pero esto también significa que la UI no se actualizará hasta _después_ de que tu controlador de eventos, y cualquier código en él, se complete. Este comportamiento, también conocido como **batching**, hace que tu aplicación de React se ejecute mucho más rápido. También evita tener que lidiar con confusos renderizados "a medio terminar" en los que sólo se han actualizado algunas de las variables. -**React does not batch across *multiple* intentional events like clicks**--each click is handled separately. Rest assured that React only does batching when it's generally safe to do. This ensures that, for example, if the first button click disables a form, the second click would not submit it again. +**React no hace lotes a través de *múltiples* eventos intencionados como los clics**--cada clic se maneja por separado. Puedes estar seguro de que React sólo hará lotes cuando sea del todo posible hacerlo. Esto garantiza que, por ejemplo, si el primer clic del botón desactiva un formulario, el segundo clic no lo enviará de nuevo. -## Updating the same state variable multiple times before the next render {/*updating-the-same-state-variable-multiple-times-before-the-next-render*/} +## Actualización de la misma variable de estado varias veces antes de la siguiente renderización {/*updating-the-same-state-variable-multiple-times-before-the-next-render*/} -It is an uncommon use case, but if you would like to update the same state variable multiple times before the next render, instead of passing the *next state value* like `setNumber(number + 1)`, you can pass a *function* that calculates the next state based on the previous one in the queue, like `setNumber(n => n + 1)`. It is a way to tell React to "do something with the state value" instead of just replacing it. +Es un caso de uso poco común, pero si quieres actualizar la misma variable de estado varias veces antes de la siguiente renderización, en lugar de pasar el *siguiente valor de estado* como `setNumber(number + 1)`, puedes pasar una *función* que calcule el siguiente estado basado en el anterior en la cola, como `setNumber(n => n + 1)`. Es una forma de decirle a React que "haga algo con el valor del estado" en lugar de simplemente reemplazarlo. -Try incrementing the counter now: +Intenta incrementar el contador ahora: @@ -99,10 +99,10 @@ h1 { display: inline-block; margin: 10px; width: 30px; text-align: center; } -Here, `n => n + 1` is called an **updater function.** When you pass it to a state setter: +Aquí, `n => n + 1` se la llama una **función de actualización.** Cuando la pasas a un seteador del estado: -1. React queues this function to be processed after all the other code in the event handler has run. -2. During the next render, React goes through the queue and gives you the final updated state. +1. React pone en cola esta función para que se procese después de que se haya ejecutado el resto del código del manejador de eventos. +2. Durante el siguiente renderizado, React recorre la cola y te da el estado final actualizado. ```js setNumber(n => n + 1); @@ -110,13 +110,13 @@ setNumber(n => n + 1); setNumber(n => n + 1); ``` -Here's how React works through these lines of code while executing the event handler: +Así es como funciona React a través de estas líneas de código mientras se ejecuta el manejador de eventos: -1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue. -1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue. -1. `setNumber(n => n + 1)`: `n => n + 1` is a function. React adds it to a queue. +1. `setNumber(n => n + 1)`: `n => n + 1` es una función. React la añade a la cola. +2. `setNumber(n => n + 1)`: `n => n + 1` es una función. React la añade a la cola. +3. `setNumber(n => n + 1)`: `n => n + 1` es una función. React la añade a la cola. -When you call `useState` during the next render, React goes through the queue. The previous `number` state was `0`, so that's what React passes to the first updater function as the `n` argument. Then React takes the return value of your previous updater function and passes it to the next updater as `n`, and so on: +Cuando llamas a `useState` durante el siguiente renderizado, React recorre la cola. El estado anterior `number` era `0`, así que eso es lo que React pasa a la primera función actualizadora como el argumento `n`. Luego React toma el valor de retorno de su función actualizadora anterior y lo pasa al siguiente actualizador como `n`, y así sucesivamente: | queued update | `n` | returns | |--------------|---------|-----| @@ -124,12 +124,12 @@ When you call `useState` during the next render, React goes through the queue. T | `n => n + 1` | `1` | `1 + 1 = 2` | | `n => n + 1` | `2` | `2 + 1 = 3` | -React stores `3` as the final result and returns it from `useState`. +React almacena `3` como resultado final y lo devuelve desde `useState`. -This is why clicking "+3" in the above example correctly increments the value by 3. -### What happens if you update state after replacing it {/*what-happens-if-you-update-state-after-replacing-it*/} +Por eso, al hacer clic en "+3" en el ejemplo anterior, el valor se incrementa correctamente en 3. +### Qué ocurre si se actualiza el estado después de sustituirlo {/*what-happens-if-you-update-state-after-replacing-it*/} -What about this event handler? What do you think `number` will be in the next render? +¿Qué pasa con este manejador de eventos? ¿Qué valor crees que tendrá `number` en la proxima renderización? ```js