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
+
*Hook'lar*React 16.8'deki yeni bir eklentidir. Bir sınıf yazmadan state ve diğer React özelliklerini kullanmanıza olanak sağlarlar.
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
+
Hook'lar JavaScript fonksiyonlarıdır, ancak bunları kullanırken iki kurala uymanız gerekir. Bu kuralları otomatik olarak uygulamak için bir [linter eklentisi](https://www.npmjs.com/package/eslint-plugin-react-hooks)sunuyoruz:
12
12
13
-
### Only Call Hooks at the Top Level {#only-call-hooks-at-the-top-level}
13
+
### Hook'ları Sadece En Üst Seviyede Çağırın {#only-call-hooks-at-the-top-level}
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
+
**Döngülerde, koşullarda veya iç içe geçmiş fonksiyonlarda Hook çağrısı yapmayın.**Bunun yerine, Hook'ları her zaman React fonksiyonunuzun en üst seviyesinde kullanın. Bu kuralı uygulayarak, bir bileşenin her render edildiğinde *Hook*'ların aynı sırada çağrıldığından emin olursunuz. React'in çoklu `useState`ve`useEffect`çağrıları arasındaki Hook'ların durumunu doğru şekilde korumasını sağlayan şey budur. (Merak ediyorsanız, bunu [aşağıda](#explanation) detaylıca açıklayacağız.)
16
16
17
-
### Only Call Hooks from React Functions {#only-call-hooks-from-react-functions}
17
+
### Hook'ları Sadece React Fonksiyonlarından Çağırın {#only-call-hooks-from-react-functions}
18
18
19
-
**Don't call Hooks from regular JavaScript functions.**Instead, you can:
* ✅ Özel Hook'lardan Hook'ları çağırabilirsiniz. ([bir sonraki sayfada](/docs/hooks-custom.html) bunları öğreneceğiz.)
23
23
24
-
By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.
24
+
Bu kuralı uygulayarak, bir bileşendeki tüm durum bilgisi mantığının kaynak kodundan açıkça görülebildiğinden emin olursunuz.
25
25
26
-
## ESLint Plugin {#eslint-plugin}
26
+
## ESLint Eklentisi {#eslint-plugin}
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
+
Bu iki kuralı uygulayan [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)adında bir ESLint eklentisi yayınladık. Denemek isterseniz, bu eklentiyi projenize ekleyebilirsiniz:
29
29
30
30
```bash
31
31
npm install eslint-plugin-react-hooks
32
32
```
33
33
34
34
```js
35
-
//Your ESLint configuration
35
+
//Sizin ESLint yapılandırmanız
36
36
{
37
37
"plugins": [
38
38
// ...
39
39
"react-hooks"
40
40
],
41
41
"rules": {
42
42
// ...
43
-
"react-hooks/rules-of-hooks":"error", //Checks rules of Hooks
"react-hooks/rules-of-hooks":"error", //Hook kurallarını kontrol eder
44
+
"react-hooks/exhaustive-deps":"warn"//Efekt bağımlılıklarını kontrol eder
45
45
}
46
46
}
47
47
```
48
48
49
-
In the future, we intend to include this plugin by default into Create React App and similar toolkits.
49
+
İleride, bu eklentiyi varsayılan olarak Create React App ve benzer araç takımlarına eklemeyi düşünüyoruz.
50
50
51
-
**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.
51
+
**[Kendi Hook'larınızı](/docs/hooks-custom.html)nasıl yazacağınızı açıklayan bir sonraki sayfaya şimdi atlayabilirsiniz.**Bu sayfada, bu kuralların ardındaki mantığı açıklayarak devam edeceğiz.
52
52
53
-
## Explanation {#explanation}
53
+
## Açıklama {#explanation}
54
+
55
+
[Daha önce öğrendiğimiz](/docs/hooks-state.html#tip-using-multiple-state-variables) gibi, tek bir bileşende birden fazla State veya Efekt Hook'larını kullanabiliriz:
54
56
55
-
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:
56
57
57
58
```js
58
59
functionForm() {
59
-
// 1. Use the name state variable
60
+
// 1. name state değişkenini kullan
60
61
const [name, setName] =useState('Mary');
61
62
62
-
// 2. Use an effect for persisting the form
63
+
// 2. Formun devamlılığını sağlamak için bir efekt kullan
63
64
useEffect(functionpersistForm() {
64
65
localStorage.setItem('formData', name);
65
66
});
66
67
67
-
// 3. Use the surname state variable
68
+
// 3. surname state değişkenini kullan
68
69
const [surname, setSurname] =useState('Poppins');
69
70
70
-
// 4. Use an effect for updating the title
71
+
// 4. Başlığı güncellemek için bir efekt kullan
71
72
useEffect(functionupdateTitle() {
72
73
document.title= name +''+ surname;
73
74
});
@@ -76,63 +77,63 @@ function Form() {
76
77
}
77
78
```
78
79
79
-
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:
80
+
Peki React, hangi state'in hangi `useState`çağrısına karşılık geldiğini nasıl biliyor? Cevap, **React'in Hook'ların çağrılma sırasına dayalı olmasıdır.** Örneğimiz çalışıyor çünkü Hook çağrılarının sırası her render etmede aynı:
80
81
81
82
```js
82
83
// ------------
83
-
//First render
84
+
//İlk render etme
84
85
// ------------
85
-
useState('Mary') // 1. Initialize the name state variable with 'Mary'
86
-
useEffect(persistForm) // 2. Add an effect for persisting the form
87
-
useState('Poppins') // 3. Initialize the surname state variable with 'Poppins'
88
-
useEffect(updateTitle) // 4. Add an effect for updating the title
86
+
useState('Mary') // 1. name state değişkenini 'Mary' ile başlat
87
+
useEffect(persistForm) // 2. Formun devamlılığını sağlamak için bir efekt ekle
88
+
useState('Poppins') // 3. surname state değişkenini 'Poppins' ile başlat
89
+
useEffect(updateTitle) // 4. Başlığı güncellemek için bir efekt ekle
89
90
90
91
// -------------
91
-
//Second render
92
+
//İkinci render etme
92
93
// -------------
93
-
useState('Mary') // 1. Read the name state variable (argument is ignored)
94
-
useEffect(persistForm) // 2. Replace the effect for persisting the form
95
-
useState('Poppins') // 3. Read the surname state variable (argument is ignored)
96
-
useEffect(updateTitle) // 4. Replace the effect for updating the title
94
+
useState('Mary') // 1. name state değişkenini oku (argüman yoksayılmıştır)
95
+
useEffect(persistForm) // 2. Formun devamlılığını sağlamak efekti değiştir
96
+
useState('Poppins') // 3. surname state değişkenini oku (argüman yoksayılmıştır)
97
+
useEffect(updateTitle) // 4. Başlığı güncellemek için efekti değiştir
97
98
98
99
// ...
99
100
```
100
101
101
-
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?
102
+
Hook çağrılarının sırası render etmeler arasında aynı olduğu sürece, React bazı yerel state'leri bu çağrıların her biriyle ilişkilendirebilir. Ancak bir koşulun içine bir Hook çağrısı (örneğin, `persistForm`efekti) koyarsak ne olur?
102
103
103
104
```js
104
-
// 🔴 We're breaking the first rule by using a Hook in a condition
105
+
// 🔴 Bir koşul içerisinde Hook kullanarak ilk kuralı çiğniyoruz
105
106
if (name !=='') {
106
107
useEffect(functionpersistForm() {
107
108
localStorage.setItem('formData', name);
108
109
});
109
110
}
110
111
```
111
112
112
-
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:
113
+
İlk render etmede `name !== ''`koşulu `true`, bu yüzden bu Hook'u çalıştırıyoruz. Bununla birlikte, bir sonraki render etmede kullanıcı formu temizleyerek koşulu `false` hale getirebilir. Artık render etme sırasında bu Hook'u atladığımız için, Hook çağrılarının sırası değişiyor:
113
114
114
115
```js
115
-
useState('Mary') // 1. Read the name state variable (argument is ignored)
116
-
// useEffect(persistForm) // 🔴 This Hook was skipped!
117
-
useState('Poppins') // 🔴 2 (but was 3). Fail to read the surname state variable
118
-
useEffect(updateTitle) // 🔴 3 (but was 4). Fail to replace the effect
116
+
useState('Mary') // 1. name state değişkenini oku (argüman yoksayılmıştır)
117
+
// useEffect(persistForm) // 🔴 Bu Hook atlandı!
118
+
useState('Poppins') // 🔴 2 (ama 3'tü). surname state değişkeni okunamadı
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.
122
+
React, ikinci `useState` Hook çağrısı için ne döneceğini bilemezdi. React, bu bileşendeki ikinci Hook çağrısının, bir önceki render etme sırasında olduğu gibi, `persistForm`efektine karşılık gelmesini bekliyordu, ancak artık gelmiyor. Bu noktadan itibaren, atladığımız çağrıdan sonraki her bir Hook çağrısı da birer birer kayıp, hatalara yol açacaktır.
122
123
123
-
**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:
124
+
**Bu yüzden Hook'lar bileşenlerimizin en üst seviyesinde çağrılmalıdır.**Eğer bir efekti koşullu olarak çalıştırmak istiyorsak, bu koşulu Hook'umuzun *içerisine* koyabiliriz:
124
125
125
126
```js
126
127
useEffect(functionpersistForm() {
127
-
// 👍 We're not breaking the first rule anymore
128
+
// 👍 Artık ilk kuralı çiğnemiyoruz
128
129
if (name !=='') {
129
130
localStorage.setItem('formData', name);
130
131
}
131
132
});
132
133
```
133
134
134
-
**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.
135
+
**Eğer [sunulan lint kuralını](https://www.npmjs.com/package/eslint-plugin-react-hooks) kullanırsanız, bu sorun için endişelenmenize gerek kalmadığını unutmayın.** Ama artık Hook'ların *neden* bu şekilde çalıştığını ve kuralın hangi sorunları önlediğini de biliyorsunuz.
135
136
136
-
## Next Steps {#next-steps}
137
+
## Sonraki Adımlar {#next-steps}
137
138
138
-
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.
139
+
Sonunda, [kendi Hook'larınızı yazmayı](/docs/hooks-custom.html) öğrenmeye hazırız. Özel Hook'lar, React tarafından sağlanan Hook'ları kendi soyutlamalarınızla birleştirmenize ve farklı bileşenler arasındaki ortak durum mantığını yeniden kullanmanıza olanak sağlar.
0 commit comments