Skip to content

Commit e727859

Browse files
Traducción es useMemo sobre dependencia de efectos (#986)
1 parent bcc36e6 commit e727859

File tree

1 file changed

+13
-12
lines changed

1 file changed

+13
-12
lines changed

src/content/reference/react/useMemo.md

+13-12
Original file line numberDiff line numberDiff line change
@@ -1056,9 +1056,10 @@ Ten en cuenta que necesitas ejecutar React en modo de producción, deshabilitar
10561056

10571057
---
10581058

1059-
### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/}
1059+
### Evitando que un efecto se ejecute con frecuencia {/*preventing-an-effect-from-firing-too-often*/}
10601060

1061-
Sometimes, you might want to use a value inside an [Effect:](/learn/synchronizing-with-effects)
1061+
1062+
Algunas veces, tú podrías querer usar un valor dentro de un [Effect:](/learn/synchronizing-with-effects)
10621063

10631064
```js {4-7,10}
10641065
function ChatRoom({ roomId }) {
@@ -1075,19 +1076,19 @@ function ChatRoom({ roomId }) {
10751076
// ...
10761077
```
10771078
1078-
This creates a problem. [Every reactive value must be declared as a dependency of your Effect.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) However, if you declare `options` as a dependency, it will cause your Effect to constantly reconnect to the chat room:
1079+
Esto crea un problema. [Cada valor reactivo debe ser declarado como dependencia de tú efecto.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) Sin embargo, si tú declaras `options` como dependecia, hará que tu efecto se reconecte constantemente a chat room:
10791080
10801081
10811082
```js {5}
10821083
useEffect(() => {
10831084
const connection = createConnection(options);
10841085
connection.connect();
10851086
return () => connection.disconnect();
1086-
}, [options]); // 🔴 Problem: This dependency changes on every render
1087+
}, [options]); // 🔴 Problema: Esta dependencia cambia en cada renderizado.
10871088
// ...
10881089
```
10891090
1090-
To solve this, you can wrap the object you need to call from an Effect in `useMemo`:
1091+
Para solucionar esto, tú puedes envolver el objeto que necesitas llamar desde un efecto en `useMemo`:
10911092
10921093
```js {4-9,16}
10931094
function ChatRoom({ roomId }) {
@@ -1098,38 +1099,38 @@ function ChatRoom({ roomId }) {
10981099
serverUrl: 'https://localhost:1234',
10991100
roomId: roomId
11001101
};
1101-
}, [roomId]); //Only changes when roomId changes
1102+
}, [roomId]); //Solo cambia cuando roomId cambia
11021103

11031104
useEffect(() => {
11041105
const connection = createConnection(options);
11051106
connection.connect();
11061107
return () => connection.disconnect();
1107-
}, [options]); //Only changes when options changes
1108+
}, [options]); //Solo cambia cuando options cambia
11081109
// ...
11091110
```
11101111
1111-
This ensures that the `options` object is the same between re-renders if `useMemo` returns the cached object.
1112+
Esto asegura que el objeto `options` es el mismo entre re-renderizados si `useMemo` retorna el objeto cambiado.
11121113
1113-
However, since `useMemo` is performance optimization, not a semantic guarantee, React may throw away the cached value if [there is a specific reason to do that](#caveats). This will also cause the effect to re-fire, **so it's even better to remove the need for a function dependency** by moving your object *inside* the Effect:
1114+
Sin embargo, ya que `useMemo` es una optimización de rendimiento, no una garantía semántica, React podría descartar el valor en caché si [Existe una razón específica para hacerlo](#caveats). Esto tambien hará que el efecto se vuelva a ejecutar, **Por lo que es aún mejor eliminar la necesidad de depender de una función** moviendo tu objeto *dentro* del efecto:
11141115
11151116
```js {5-8,13}
11161117
function ChatRoom({ roomId }) {
11171118
const [message, setMessage] = useState('');
11181119

11191120
useEffect(() => {
1120-
const options = { // ✅ No need for useMemo or object dependencies!
1121+
const options = { //¡No necesitas useMemo o dependencias de objetos!
11211122
serverUrl: 'https://localhost:1234',
11221123
roomId: roomId
11231124
}
11241125

11251126
const connection = createConnection(options);
11261127
connection.connect();
11271128
return () => connection.disconnect();
1128-
}, [roomId]); //Only changes when roomId changes
1129+
}, [roomId]); //Solo cambia cuando roomId cambia
11291130
// ...
11301131
```
11311132
1132-
Now your code is simpler and doesn't need `useMemo`. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
1133+
Ahora tú codigo es más simple y no necesita de`useMemo`. [Aprende más sobre cómo remover dependecias en los efectos.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
11331134
11341135
11351136
### Memoizar una dependencia de otro Hook {/*memoizing-a-dependency-of-another-hook*/}

0 commit comments

Comments
 (0)