You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/useMemo.md
+13-12
Original file line number
Diff line number
Diff line change
@@ -1056,9 +1056,10 @@ Ten en cuenta que necesitas ejecutar React en modo de producción, deshabilitar
1056
1056
1057
1057
---
1058
1058
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*/}
1060
1060
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)
1062
1063
1063
1064
```js {4-7,10}
1064
1065
functionChatRoom({ roomId }) {
@@ -1075,19 +1076,19 @@ function ChatRoom({ roomId }) {
1075
1076
// ...
1076
1077
```
1077
1078
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:
1079
1080
1080
1081
1081
1082
```js {5}
1082
1083
useEffect(() => {
1083
1084
constconnection=createConnection(options);
1084
1085
connection.connect();
1085
1086
return () =>connection.disconnect();
1086
-
}, [options]); // 🔴 Problem: This dependency changes on every render
1087
+
}, [options]); // 🔴 Problema: Esta dependencia cambia en cada renderizado.
1087
1088
// ...
1088
1089
```
1089
1090
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`:
1091
1092
1092
1093
```js {4-9,16}
1093
1094
functionChatRoom({ roomId }) {
@@ -1098,38 +1099,38 @@ function ChatRoom({ roomId }) {
1098
1099
serverUrl:'https://localhost:1234',
1099
1100
roomId: roomId
1100
1101
};
1101
-
}, [roomId]); // ✅ Only changes when roomId changes
1102
+
}, [roomId]); // ✅ Solo cambia cuando roomId cambia
1102
1103
1103
1104
useEffect(() => {
1104
1105
constconnection=createConnection(options);
1105
1106
connection.connect();
1106
1107
return () =>connection.disconnect();
1107
-
}, [options]); // ✅ Only changes when options changes
1108
+
}, [options]); // ✅ Solo cambia cuando options cambia
1108
1109
// ...
1109
1110
```
1110
1111
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.
1112
1113
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:
1114
1115
1115
1116
```js {5-8,13}
1116
1117
functionChatRoom({ roomId }) {
1117
1118
const [message, setMessage] =useState('');
1118
1119
1119
1120
useEffect(() => {
1120
-
constoptions= { // ✅ No need for useMemo or object dependencies!
1121
+
constoptions= { // ✅ ¡No necesitas useMemo o dependencias de objetos!
1121
1122
serverUrl:'https://localhost:1234',
1122
1123
roomId: roomId
1123
1124
}
1124
1125
1125
1126
constconnection=createConnection(options);
1126
1127
connection.connect();
1127
1128
return () =>connection.disconnect();
1128
-
}, [roomId]); // ✅ Only changes when roomId changes
1129
+
}, [roomId]); // ✅ Solo cambia cuando roomId cambia
1129
1130
// ...
1130
1131
```
1131
1132
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)
1133
1134
1134
1135
1135
1136
### Memoizar una dependencia de otro Hook {/*memoizing-a-dependency-of-another-hook*/}
0 commit comments