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
*Hooks*are a new addition in React 16.8. They let you use state and other React features without writing a class.
9
+
Los *Hooks*son una de las próximas funcionalidades que te permitirá usar el estado y otras caracteristicas de React sin tener que escribir una clase. Actualmente están disponibles en la versión de React v16.8.0-alpha.1.
10
10
11
-
Hooks are JavaScript functions, but you need to follow two rules when using them. We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks)to enforce these rules automatically:
11
+
Los Hooks son funciones de JavaScript, pero necesitas seguir dos reglas cuando los uses. Proporcionamos un [plugin de linter](https://www.npmjs.com/package/eslint-plugin-react-hooks)para hacer cumplir estas reglas automáticamente.
12
12
13
-
### Only Call Hooks at the Top Level {#only-call-hooks-at-the-top-level}
13
+
### Llama Hooks solo en el nivel superior
14
14
15
-
**Don't call Hooks inside loops, conditions, or nested functions.**Instead, always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That's what allows React to correctly preserve the state of Hooks between multiple `useState`and`useEffect` calls. (If you're curious, we'll explain this in depth [below](#explanation).)
15
+
**No llames Hooks dentro de ciclos, condicionales, or funciones anidadas.**En vez de eso, usa siempre Hooks en el nivel superior de tu función en React. Siguiendo esta regla, te aseguras de que los hooks se llamen en el mismo orden cada vez que un componente se renderiza. Esto es lo que permite a React preservar correctamente el estado de los hooks entre multiples llamados a `useState`y`useEffect`. (Si eres curioso, vamos a explicar esto en detalle [más abajo](#explicación).)
16
16
17
-
### Only Call Hooks from React Functions {#only-call-hooks-from-react-functions}
17
+
### Llama Hooks solo en funciones de React
18
18
19
-
**Don't call Hooks from regular JavaScript functions.**Instead, you can:
19
+
**No llames Hooks desde funciones JavaScript regulares.**En vez de eso, puedes:
20
20
21
-
* ✅ Call Hooks from React function components.
22
-
* ✅ Call Hooks from custom Hooks (we'll learn about them [on the next page](/docs/hooks-custom.html)).
21
+
* ✅ Llama Hooks desde componentes funcionales de React.
22
+
* ✅ Llama Hooks desde Hooks personalizados (aprenderemos acerca de ellos [en la siguiente página](/docs/hooks-custom.html)).
23
23
24
-
By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
24
+
Siguiendo esta regla, te aseguras de que toda la lógica del estado de un componente sea claramente visible desde tu código fuente.
25
25
26
-
## ESLint Plugin {#eslint-plugin}
26
+
## Plugin de ESLint
27
27
28
-
We released an ESLint plugin called [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)that enforces these two rules. You can add this plugin to your project if you'd like to try it:
28
+
Lanzamos un plugin de ESLint llamado [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)que refuerza estas dos reglas. Puedes añadir este plugin a tu proyecto si quieres probarlo:
In the future, we intend to include this plugin by default into Create React App and similar toolkits.
48
+
En el futuro, tenemos la intención de incluir este plugin por defecto en Create React App y otros paquetes similares.
49
49
50
-
**You can skip to the next page explaining how to write [your own Hooks](/docs/hooks-custom.html)now.**On this page, we'll continue by explaining the reasoning behind these rules.
50
+
**Puedes pasar a la siguiente página donde explicamos como escribir [tus propios Hooks](/docs/hooks-custom.html)ahora mismo.**En esta página, vamos a continuar explicando el razonamiento detrás de estas reglas.
51
51
52
-
## Explanation {#explanation}
52
+
## Explicación
53
53
54
-
As we [learned earlier](/docs/hooks-state.html#tip-using-multiple-state-variables), we can use multiple State or Effect Hooks in a single component:
54
+
Como [aprendimos anteriormente](/docs/hooks-state.html#tip-using-multiple-state-variables), podemos usar multiples Hooks de Estado o Hooks de Efecto en un solo componente:
55
55
56
56
```js
57
57
functionForm() {
58
-
// 1. Use the name state variable
58
+
// 1. Usa la variable de estado del nombre
59
59
const [name, setName] =useState('Mary');
60
60
61
-
// 2. Use an effect for persisting the form
61
+
// 2. Usa un efecto para persistir el formulario
62
62
useEffect(functionpersistForm() {
63
63
localStorage.setItem('formData', name);
64
64
});
65
65
66
-
// 3. Use the surname state variable
66
+
// 3. Usa la variable de estado del apellido
67
67
const [surname, setSurname] =useState('Poppins');
68
68
69
-
// 4. Use an effect for updating the title
69
+
// 4. Usa un efecto para la actualización del título
70
70
useEffect(functionupdateTitle() {
71
71
document.title= name +''+ surname;
72
72
});
@@ -75,63 +75,63 @@ function Form() {
75
75
}
76
76
```
77
77
78
-
So how does React know which state corresponds to which `useState` call? The answer is that**React relies on the order in which Hooks are called**. Our example works because the order of the Hook calls is the same on every render:
78
+
Entonces, como hace React para saber cual estado corresponde a cual llamado del `useState`? La respuesta es que**React se basa en el orden en el cual los Hooks son llamados**. Nuestro ejemplo funciona porque el orden en los llamados de los Hooks son el mismo en cada render:
79
79
80
80
```js
81
81
// ------------
82
-
//First render
82
+
//Primer render
83
83
// ------------
84
-
useState('Mary') // 1. Initialize the name state variable with 'Mary'
85
-
useEffect(persistForm) // 2. Add an effect for persisting the form
86
-
useState('Poppins') // 3. Initialize the surname state variable with 'Poppins'
87
-
useEffect(updateTitle) // 4. Add an effect for updating the title
84
+
useState('Mary') // 1. Inicializa la variable de estado del nombre con 'Mary'
85
+
useEffect(persistForm) // 2. Agrega un efecto para persistir el formulario
86
+
useState('Poppins') // 3. Inicializa la variable de estado del apellido con 'Poppins'
87
+
useEffect(updateTitle) // 4. Agrega un efecto para la actualización del título
88
88
89
89
// -------------
90
-
//Second render
90
+
//Segundo render
91
91
// -------------
92
-
useState('Mary') // 1. Read the name state variable (argument is ignored)
93
-
useEffect(persistForm) // 2. Replace the effect for persisting the form
94
-
useState('Poppins') // 3. Read the surname state variable (argument is ignored)
95
-
useEffect(updateTitle) // 4. Replace the effect for updating the title
92
+
useState('Mary') // 1. Lee la variable de estado del nombre (el argumento es ignorado)
93
+
useEffect(persistForm) // 2. Reemplaza el efecto para persistir el formulario
94
+
useState('Poppins') // 3. Lee la variable de estado del apellido (el argumento es ignorado)
95
+
useEffect(updateTitle) // 4. Reemplaza el efecto de actualización del título
96
96
97
97
// ...
98
98
```
99
99
100
-
As long as the order of the Hook calls is the same between renders, React can associate some local state with each of them. But what happens if we put a Hook call (for example, the `persistForm` effect) inside a condition?
100
+
Siempre y cuando el orden de los llamados a los Hooks sean los mismos entre renders, React puede asociar algún estado local con cada uno de ellos. Pero que pasa si ponemos la llamada a un Hook (por ejemplo, el efecto `persistForm`) dentro de una condición?
101
101
102
102
```js
103
-
// 🔴 We're breaking the first rule by using a Hook in a condition
103
+
// 🔴 Estamos rompiendo la primera regla al usar un Hook en una condición
104
104
if (name !=='') {
105
105
useEffect(functionpersistForm() {
106
106
localStorage.setItem('formData', name);
107
107
});
108
108
}
109
109
```
110
110
111
-
The `name !== ''`condition is `true`on the first render, so we run this Hook. However, on the next render the user might clear the form, making the condition`false`. Now that we skip this Hook during rendering, the order of the Hook calls becomes different:
111
+
La condición `name !== ''`es `true`en el primer render, entonces corremos el Hook. Sin embargo, en el siguiente render el usuario puede borrar el formulario, haciendo la condición`false`. Ahora que nos saltamos este Hook durante el renderizado, el orden de las llamadas a los Hooks se vuelve diferente:
112
112
113
113
```js
114
-
useState('Mary') // 1. Read the name state variable (argument is ignored)
115
-
// useEffect(persistForm) // 🔴 This Hook was skipped!
116
-
useState('Poppins') // 🔴 2 (but was 3). Fail to read the surname state variable
117
-
useEffect(updateTitle) // 🔴 3 (but was 4). Fail to replace the effect
114
+
useState('Mary') // 1. Lee la variable de estado del nombre (el argumento es ignorado)
115
+
// useEffect(persistForm) // 🔴 Este Hook fue saltado
116
+
useState('Poppins') // 🔴 2 (pero era el 3). Falla la lectura de la variable de estado del apellido
117
+
useEffect(updateTitle) // 🔴 3 (pero era el 4). Falla el reemplazo del efecto
118
118
```
119
119
120
-
React wouldn't know what to return for the second `useState` Hook call. React expected that the second Hook call in this component corresponds to the `persistForm` effect, just like during the previous render, but it doesn't anymore. From that point, every next Hook call after the one we skipped would also shift by one, leading to bugs.
120
+
React no sabría que devolver para la segunda llamada del Hook `useState`. React esperaba que la segunda llamada al Hook en este componente corresponda al efecto `persistForm`, igual que en el render anterior, pero ya no lo hace. A partir de este punto, cada siguiente llamada de un Hook después de la que nos saltamos también cambiaría de puesto por uno, lo que llevaría a la aparición de errores.
121
121
122
-
**This is why Hooks must be called on the top level of our components.**If we want to run an effect conditionally, we can put that condition *inside* our Hook:
122
+
**Es por esto que los Hooks deben ser utilizados en el nivel superior de nuestros componentes.**Si queremos ejecutar un efecto condicionalmente, podemos poner esa condición *dentro* de nuestro Hook:
123
123
124
124
```js
125
125
useEffect(functionpersistForm() {
126
-
// 👍 We're not breaking the first rule anymore
126
+
// 👍 No vamos a romper la primera regla nunca más.
127
127
if (name !=='') {
128
128
localStorage.setItem('formData', name);
129
129
}
130
130
});
131
131
```
132
132
133
-
**Note that you don't need to worry about this problem if you use the [provided lint rule](https://www.npmjs.com/package/eslint-plugin-react-hooks).**But now you also know *why*Hooks work this way, and which issues the rule is preventing.
133
+
**Ten en cuenta que no necesitas preocuparte por este problema si usas las [reglas de lint provistas](https://www.npmjs.com/package/eslint-plugin-react-hooks).**Pero ahora también sabes *por qué* los Hooks funcionan de esta manera, y cuáles son los problemas que la primera regla está impidiendo.
134
134
135
-
## Next Steps {#next-steps}
135
+
## Siguientes pasos
136
136
137
-
Finally, we're ready to learn about [writing your own Hooks](/docs/hooks-custom.html)! Custom Hooks let you combine Hooks provided by React into your own abstractions, and reuse common stateful logic between different components.
137
+
Finalmente, estamos listos para aprender acerca de cómo [escribir nuestros propios Hooks](/docs/hooks-custom.html)! Los Hooks personalizados te permiten combinar los Hooks proporcionados por React en sus propias abstracciones y reutilizar la lógica de estado común entre los diferentes componentes.
0 commit comments