Skip to content

Commit 6de82c5

Browse files
anthonibscarburo
andauthored
translating missing comments (#939)
* translating missing comments * Update removing-effect-dependencies.md --------- Co-authored-by: Rainer Martinez <rmartinezfraga@yandex.com>
1 parent c5dbd5a commit 6de82c5

File tree

1 file changed

+27
-27
lines changed

1 file changed

+27
-27
lines changed

src/content/learn/removing-effect-dependencies.md

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ function ChatRoom({ roomId }) {
3030
const connection = createConnection(serverUrl, roomId);
3131
connection.connect();
3232
return () => connection.disconnect();
33-
// ...
33+
// ...
3434
}
3535
```
3636
@@ -109,7 +109,7 @@ function ChatRoom({ roomId }) {
109109
}
110110
```
111111
112-
[Los Efectos "reaccionan" a valores reactivos](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values). Dado que `roomId` es un valor reactivo (puede cambiar debido a una nueva renderización), el linter verifica que lo hayas especificado como dependencia. Si `roomId` recibe un valor diferente, React volverá a sincronizar tu Efecto. Esto asegura que el chat permanece conectado a la sala seleccionada y "reacciona" al _dropdown_:
112+
[Los Efectos "reaccionan" a valores reactivos](/learn/lifecycle-of-reactive-effects#effects-react-to-reactive-values). Dado que `roomId` es un valor reactivo (puede cambiar debido a una nueva renderización), el linter verifica que lo hayas especificado como dependencia. Si `roomId` recibe un valor diferente, React volverá a sincronizar tu Efecto. Esto asegura que el chat permanece conectado a la sala seleccionada y "reacciona" al *dropdown*:
113113
114114
<Sandpack>
115115
@@ -198,7 +198,7 @@ function ChatRoom({ roomId }) {
198198
const connection = createConnection(serverUrl, roomId);
199199
connection.connect();
200200
return () => connection.disconnect();
201-
}, []); // 🔴 React Hook useEffect has a missing dependency: 'roomId'
201+
}, []); // 🔴 React Hook useEffect tiene una dependencia que falta: 'roomId'
202202
// ...
203203
}
204204
```
@@ -309,7 +309,7 @@ export default function Timer() {
309309
const [increment, setIncrement] = useState(1);
310310

311311
function onTick() {
312-
setCount(count + increment);
312+
setCount(count + increment);
313313
}
314314

315315
useEffect(() => {
@@ -360,9 +360,9 @@ Este contador se supone que incremente cada segundo la cantidad configurable con
360360
361361
Cada vez que ajustas las dependencias del Efecto para reflejar el código, mira a la lista de dependencias. ¿Tiene sentido volver a correr cuando alguna de estas dependencias cambie? A veces, la respuesta es "no":
362362
363-
* A veces, quieres volver a ejecutar *diferentes partes* de tu Efecto bajo condiciones diferentes.
364-
* A veces, quieres leer solo el *último valor* de alguna dependencia en lugar de "reaccionar" a sus cambios.
365-
* A veces, una dependencia puede cambiar muy a menudo de forma *no intencional* porque es un objeto o una función.
363+
- A veces, quieres volver a ejecutar *diferentes partes* de tu Efecto bajo condiciones diferentes.
364+
- A veces, quieres leer solo el *último valor* de alguna dependencia en lugar de "reaccionar" a sus cambios.
365+
- A veces, una dependencia puede cambiar muy a menudo de forma *no intencional* porque es un objeto o una función.
366366
367367
Para encontrar la solución correcta, necesitas responder algunas preguntas sobre tu Efecto. Revisémoslas.
368368
@@ -433,7 +433,7 @@ function Form() {
433433
}
434434
```
435435
436-
Ahora que el código está en un controlador de evento, no es reactivo --por lo que solo se ejecutará cuando el usuario envía el formulario--. Lee más acerca de [escoger entre controladores de eventos y Efectos](/learn/separating-events-from-effects#reactive-values-and-reactive-logic) y [cómo eliminar Efectos innecesarios ](/learn/you-might-not-need-an-effect).
436+
Ahora que el código está en un controlador de evento, no es reactivo --por lo que solo se ejecutará cuando el usuario envía el formulario--. Lee más acerca de [escoger entre controladores de eventos y Efectos](/learn/separating-events-from-effects#reactive-values-and-reactive-logic) y [cómo eliminar Efectos innecesarios](/learn/you-might-not-need-an-effect).
437437
438438
### ¿Tú Efecto hace varias cosas no relacionadas? {/*is-your-effect-doing-several-unrelated-things*/}
439439
@@ -553,7 +553,7 @@ El código final no es más largo que el original, pero separar estos Efectos a
553553
554554
### ¿Estás leyendo algún estado para calcular el próximo estado? {/*are-you-reading-some-state-to-calculate-the-next-state*/}
555555
556-
Este Efecto actualiza la variable de estado `messages` con un nuevo _array_ creado cada vez que llega un nuevo mensaje:
556+
Este Efecto actualiza la variable de estado `messages` con un nuevo *array* creado cada vez que llega un nuevo mensaje:
557557
558558
```js {2,6-8}
559559
function ChatRoom({ roomId }) {
@@ -567,7 +567,7 @@ function ChatRoom({ roomId }) {
567567
// ...
568568
```
569569
570-
Usa la variable `messages` para [crear un nuevo _array_](/learn/updating-arrays-in-state) que se inicia con todos los mensajes existentes y añade el nuevo mensaje al final. Sin embargo, dado que `messages` es un valor reactivo que un Efecto lee, debe ser una dependencia:
570+
Usa la variable `messages` para [crear un nuevo *array*](/learn/updating-arrays-in-state) que se inicia con todos los mensajes existentes y añade el nuevo mensaje al final. Sin embargo, dado que `messages` es un valor reactivo que un Efecto lee, debe ser una dependencia:
571571
572572
```js {7,10}
573573
function ChatRoom({ roomId }) {
@@ -585,7 +585,7 @@ function ChatRoom({ roomId }) {
585585
586586
Y cuando se incluye `messages` como dependencia se introduce un problema.
587587
588-
Cada vez que recibes un mensaje, `setMessages()` causa que el componente se vuelva a renderizar con un nuevo _array_ `messages` que incluye el mensaje recibido. Sin embargo, dado que este Efecto ahora depende de `messages`, esto *también* resincronizará el Efecto. Por tanto cada nuevo mensaje hará que el chat se reconecte. ¡El usuario no querría eso!
588+
Cada vez que recibes un mensaje, `setMessages()` causa que el componente se vuelva a renderizar con un nuevo *array* `messages` que incluye el mensaje recibido. Sin embargo, dado que este Efecto ahora depende de `messages`, esto *también* resincronizará el Efecto. Por tanto cada nuevo mensaje hará que el chat se reconecte. ¡El usuario no querría eso!
589589
590590
Para resolver el problema, no leas `messages` dentro del Efecto. En cambio, pasa una [función actualizadora](/reference/react/useState#updating-state-based-on-the-previous-state) a `setMessages`:
591591
@@ -682,7 +682,7 @@ function ChatRoom({ roomId }) {
682682
// ...
683683
```
684684
685-
Los Eventos de Efecto te permiten separar un Efecto en partes reactivas (que deben "reaccionar" a valores reactivos como `roomId` y sus cambios) y partes no reactivas (que solo leen sus últimos valores, como `onMessage` lee `isMuted`). **Ahora que has leído `isMuted` dentro de un Evento de Efecto, no necesita ser una dependencia de tu Efecto**. Como resultado, el chat no se reconectará cuando cambies la configuración "Muted" de _on_ a _off_, ¡solucionando el problema original!
685+
Los Eventos de Efecto te permiten separar un Efecto en partes reactivas (que deben "reaccionar" a valores reactivos como `roomId` y sus cambios) y partes no reactivas (que solo leen sus últimos valores, como `onMessage` lee `isMuted`). **Ahora que has leído `isMuted` dentro de un Evento de Efecto, no necesita ser una dependencia de tu Efecto**. Como resultado, el chat no se reconectará cuando cambies la configuración "Muted" de *on* a *off*, ¡solucionando el problema original!
686686
687687
#### Envolver un controlador de evento de las props {/*wrapping-an-event-handler-from-the-props*/}
688688
@@ -788,7 +788,7 @@ Este objeto se declara en el cuerpo del componente, por lo que es un [valor reac
788788
// ...
789789
```
790790
791-
¡Es importante declararlo como una dependencia! Esto garantiza, por ejemplo, que si cambia `roomId`, luego tu Efecto se volverá a conectar al chat con las nuevas opciones. Sin embargo, también hay un problema con el código de arriba. Para ver el problema, intenta escribir en la caja de texto del _sandbox_ de abajo y mira que pasa en la consola:
791+
¡Es importante declararlo como una dependencia! Esto garantiza, por ejemplo, que si cambia `roomId`, luego tu Efecto se volverá a conectar al chat con las nuevas opciones. Sin embargo, también hay un problema con el código de arriba. Para ver el problema, intenta escribir en la caja de texto del *sandbox* de abajo y mira que pasa en la consola:
792792
793793
<Sandpack>
794794
@@ -801,7 +801,7 @@ const serverUrl = 'https://localhost:1234';
801801
function ChatRoom({ roomId }) {
802802
const [message, setMessage] = useState('');
803803

804-
// Temporarily disable the linter to demonstrate the problem
804+
// Desactivar temporalmente el linter para demostrar el problema
805805
// eslint-disable-next-line react-hooks/exhaustive-deps
806806
const options = {
807807
serverUrl: serverUrl,
@@ -865,7 +865,7 @@ button { margin-left: 10px; }
865865
866866
</Sandpack>
867867
868-
En el _sandbox_ de arriba, la caja de texto solo actualiza la variable de estado `message`. Desde la perspectiva del usuario, esto no debería afectar a la conexión del chat. Sin embargo, cada vez que actualizas la variable `message`, tu componente se vuelve a renderizar. Cuando tu componente rerenderiza, el código dentro de él se ejecuta nuevamente.
868+
En el *sandbox* de arriba, la caja de texto solo actualiza la variable de estado `message`. Desde la perspectiva del usuario, esto no debería afectar a la conexión del chat. Sin embargo, cada vez que actualizas la variable `message`, tu componente se vuelve a renderizar. Cuando tu componente rerenderiza, el código dentro de él se ejecuta nuevamente.
869869
870870
Esto significa que se crea un nuevo objeto `options` en cada rerenderizado del componente `ChatRoom`. React ve que ese objeto `options` es un *objeto diferente* al objeto `options` que se creó en el renderizado anterior. Es por eso que resincroniza tu Efecto (que depende de `options`) y el chat se reconecta mientras escribes.
871871
@@ -1239,15 +1239,15 @@ export default function Timer() {
12391239
12401240
</Sandpack>
12411241
1242-
En lugar de leer `count` dentro del Efecto, pasas a React una instrucción `c => c + 1` ("¡incrementa este número!"). React la aplicará en el próximo renderizado. Y dado que ya no tienes que leer el valor de `count` dentro de tu Efecto, puedes mantener vacío (`[]`) el _array_ de dependencias de tu Efecto. Así se evita que tu Efecto recree el intervalo en cada tic.
1242+
En lugar de leer `count` dentro del Efecto, pasas a React una instrucción `c => c + 1` ("¡incrementa este número!"). React la aplicará en el próximo renderizado. Y dado que ya no tienes que leer el valor de `count` dentro de tu Efecto, puedes mantener vacío (`[]`) el *array* de dependencias de tu Efecto. Así se evita que tu Efecto recree el intervalo en cada tic.
12431243
12441244
</Solution>
12451245
12461246
#### Arregla una animación que se vuelve a ejecutar {/*fix-a-retriggering-animation*/}
12471247
1248-
En este ejemplo, cuando presionas "Mostrar", se muestra con un efecto de fundido un mensaje de bienvenida. La animación toma un segundo. Cuando presionas "Remover", el mensaje de bienvenida desaparece inmediatamente. La lógica para la animación del efecto fundido se implementa en el archivo `animation.js` como un [bucle de animación](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) de JavaScript. No necesitas cambiar esa lógica. Puedes tratarla como una biblioteca de terceros. Tu Efecto crea una instancia de `FadeInAnimation` para el nodo del DOM, y luego llama `start(duration)` o `stop()` para controlar la animación. La duración `duration` se controla por un _slider_. Ajusta el _slider_ y mira como cambia la animación.
1248+
En este ejemplo, cuando presionas "Mostrar", se muestra con un efecto de fundido un mensaje de bienvenida. La animación toma un segundo. Cuando presionas "Remover", el mensaje de bienvenida desaparece inmediatamente. La lógica para la animación del efecto fundido se implementa en el archivo `animation.js` como un [bucle de animación](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) de JavaScript. No necesitas cambiar esa lógica. Puedes tratarla como una biblioteca de terceros. Tu Efecto crea una instancia de `FadeInAnimation` para el nodo del DOM, y luego llama `start(duration)` o `stop()` para controlar la animación. La duración `duration` se controla por un *slider*. Ajusta el *slider* y mira como cambia la animación.
12491249
1250-
Este código ya funciona, pero hay algo que quieres cambiar. Actualmente, cuando mueves el _slider_ que controla la variable de estado `duration`, se vuelve a ejecutar la animación. Cambia el comportamiento para que el Efecto no "reaccione" a la variable `duration`. Cuando presiones "Mostrar", el Efecto debe usar el valor actual de `duration` en el _slider_. Sin embargo, el hecho de mover el _slider_ no debería por sí solo volver a ejecutar la animación.
1250+
Este código ya funciona, pero hay algo que quieres cambiar. Actualmente, cuando mueves el *slider* que controla la variable de estado `duration`, se vuelve a ejecutar la animación. Cambia el comportamiento para que el Efecto no "reaccione" a la variable `duration`. Cuando presiones "Mostrar", el Efecto debe usar el valor actual de `duration` en el *slider*. Sin embargo, el hecho de mover el *slider* no debería por sí solo volver a ejecutar la animación.
12511251
12521252
<Hint>
12531253
@@ -1341,11 +1341,11 @@ export class FadeInAnimation {
13411341
start(duration) {
13421342
this.duration = duration;
13431343
if (this.duration === 0) {
1344-
// Jump to end immediately
1344+
// Saltar al final inmediatamente
13451345
this.onProgress(1);
13461346
} else {
13471347
this.onProgress(0);
1348-
// Start animating
1348+
// Comenzar a animar
13491349
this.startTime = performance.now();
13501350
this.frameId = requestAnimationFrame(() => this.onFrame());
13511351
}
@@ -1355,7 +1355,7 @@ export class FadeInAnimation {
13551355
const progress = Math.min(timePassed / this.duration, 1);
13561356
this.onProgress(progress);
13571357
if (progress < 1) {
1358-
// We still have more frames to paint
1358+
// Todavía nos quedan más fotogramas por pintar
13591359
this.frameId = requestAnimationFrame(() => this.onFrame());
13601360
}
13611361
}
@@ -1480,7 +1480,7 @@ export class FadeInAnimation {
14801480
const progress = Math.min(timePassed / this.duration, 1);
14811481
this.onProgress(progress);
14821482
if (progress < 1) {
1483-
// We still have more frames to paint
1483+
// Todavía nos quedan más fotogramas por pintar
14841484
this.frameId = requestAnimationFrame(() => this.onFrame());
14851485
}
14861486
}
@@ -1802,7 +1802,7 @@ Limitarse a props primitivas siempre que sea posible facilita optimizar luego tu
18021802
18031803
#### Soluciona la reconexión del chat, de nuevo {/*fix-a-reconnecting-chat-again*/}
18041804
1805-
Este ejemplo se conecta al chat con o sin encriptación. Cambia el _checkbox_ y nota los diferentes mensajes en la consola cuando la encriptación está activada y desactivada. Intenta cambiar la sala. Luego, intenta cambiar el tema. Cuando estás conectado a una sala de chat, recibirás nuevos mensajes a intervalos de algunos segundos. Verifica que su color se ajusta al tema que has escogido.
1805+
Este ejemplo se conecta al chat con o sin encriptación. Cambia el *checkbox* y nota los diferentes mensajes en la consola cuando la encriptación está activada y desactivada. Intenta cambiar la sala. Luego, intenta cambiar el tema. Cuando estás conectado a una sala de chat, recibirás nuevos mensajes a intervalos de algunos segundos. Verifica que su color se ajusta al tema que has escogido.
18061806
18071807
En este ejemplo, el chat se reconecta cada vez que intentas cambiar el tema. Arregla esto. Luego de la solución, cambiar el tema no debería reconectar el chat, pero cambiar la configuración de encriptación o cambiar de sala debería provocar una reconexión.
18081808
@@ -2088,16 +2088,16 @@ export default function ChatRoom({ roomId, isEncrypted, onMessage }) {
20882088
Después de estos dos cambios, tu Efecto no depende más de ninguna función:
20892089
20902090
```js {1,8,10,21}
2091-
export default function ChatRoom({ roomId, isEncrypted, onMessage }) { // Reactive values
2092-
const onReceiveMessage = useEffectEvent(onMessage); // Not reactive
2091+
export default function ChatRoom({ roomId, isEncrypted, onMessage }) { // Valores de reacción
2092+
const onReceiveMessage = useEffectEvent(onMessage); // No reactivo
20932093

20942094
useEffect(() => {
20952095
function createConnection() {
20962096
const options = {
20972097
serverUrl: 'https://localhost:1234',
2098-
roomId: roomId // Reading a reactive value
2098+
roomId: roomId // Lectura de un valor reactivo
20992099
};
2100-
if (isEncrypted) { // Reading a reactive value
2100+
if (isEncrypted) { // Lectura de un valor reactivo
21012101
return createEncryptedConnection(options);
21022102
} else {
21032103
return createUnencryptedConnection(options);

0 commit comments

Comments
 (0)