From 799692d4829084866f655b7fe5997ec2378df78b Mon Sep 17 00:00:00 2001 From: serkanisyapan Date: Wed, 15 Nov 2023 16:37:02 +0300 Subject: [PATCH 1/2] translate useState --- src/content/reference/react/useState.md | 374 ++++++++++++------------ 1 file changed, 187 insertions(+), 187 deletions(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index d23fa489b..a70422969 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -4,7 +4,7 @@ title: useState -`useState` is a React Hook that lets you add a [state variable](/learn/state-a-components-memory) to your component. +`useState` bileşeninize [state değişkeni](/learn/state-a-components-memory) eklemenizi sağlayan bir React Hook'udur. ```js const [state, setState] = useState(initialState); @@ -16,11 +16,11 @@ const [state, setState] = useState(initialState); --- -## Reference {/*reference*/} +## Referans {/*reference*/} ### `useState(initialState)` {/*usestate*/} -Call `useState` at the top level of your component to declare a [state variable.](/learn/state-a-components-memory) +Bir [state değişkeni](/learn/state-a-components-memory) bildirmek için bileşeninizin en üstünde `useState` çağırın. ```js import { useState } from 'react'; @@ -32,32 +32,32 @@ function MyComponent() { // ... ``` -The convention is to name state variables like `[something, setSomething]` using [array destructuring.](https://javascript.info/destructuring-assignment) +Gelenek, [dizi yapı çözmeyi (array destructuring)](https://javascript.info/destructuring-assignment) kullanarak state değişkenlerini `[something, setSomething]` olarak adlandırmaktır. -[See more examples below.](#usage) +[Aşağıda daha fazla örnek bulabilirsiniz.](#usage) -#### Parameters {/*parameters*/} +#### Parametreler {/*parameters*/} -* `initialState`: The value you want the state to be initially. It can be a value of any type, but there is a special behavior for functions. This argument is ignored after the initial render. - * If you pass a function as `initialState`, it will be treated as an _initializer function_. It should be pure, should take no arguments, and should return a value of any type. React will call your initializer function when initializing the component, and store its return value as the initial state. [See an example below.](#avoiding-recreating-the-initial-state) +* `initialState`: Başlangıçta state'in alacağı değerdir. Herhangi bir türden bir değer olabilir ancak fonksiyonlar için özel bir davranış vardır. Bu argüman ilk render'dan sonra görmezden gelinir. + * `initialState` olarak bir fonksiyon iletirseniz, bu fonksiyona _başlatıcı fonksiyon_ olarak davranılacaktır. Saf olmalıdır, argüman olmamalıdır ve herhangi bir türden değer döndürebilmelidir. React, bileşeni başlatırken başlatıcı fonksiyonunuzu çağıracak ve döndürülen değeri başlangıç state'i olarak saklayacaktır. [Aşağıdaki örneği inceleyin.](#avoiding-recreating-the-initial-state) -#### Returns {/*returns*/} +#### Döndürülenler {/*returns*/} -`useState` returns an array with exactly two values: +`useState` her zaman iki değere sahip bir dizi döndürür. -1. The current state. During the first render, it will match the `initialState` you have passed. -2. The [`set` function](#setstate) that lets you update the state to a different value and trigger a re-render. +1. Şu anki state. İlk render sırasında, ilettiğiniz `initialState` değeri ile aynıdır. +2. [`set` fonksiyonu](#setstate) state'i başka bir değer ile güncellemenizi ve yeniden render tetiklemenizi sağlar. -#### Caveats {/*caveats*/} +#### Uyarılar {/*caveats*/} -* `useState` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it. -* In Strict Mode, React will **call your initializer function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your initializer function is pure (as it should be), this should not affect the behavior. The result from one of the calls will be ignored. +* `useState` bir Hook'tur, bu yüzden sadece **bileşeninizin üst seviyesinde** ya da kendi Hook'larınızda çağırabilirsiniz. Döngülerin ya da koşullu ifadelerin içinde çağıramazsınız. Eğer buna ihtiyacınız varsa, yeni bir bileşen çıkarın ve state'i o bileşene taşıyın. +* Strict Modda React, [kazara oluşan saf olmayan şeyleri bulmanıza yardımcı olmak için](#my-initializer-or-updater-function-runs-twice) **başlatıcı fonksiyonunuzu iki defa** çağıracaktır. Bu sadece geliştirme sırasında görülen bir davranıştır ve son ürünü etkilemez. Eğer başlatıcı fonksiyonunuz saf ise (ki öyle olmalıdır), bu olması gereken davranışı etkilememelidir. Yapılan çağrılardan birinin sonucu görmezden gelinecektir. --- -### `set` functions, like `setSomething(nextState)` {/*setstate*/} +### `setSomething(nextState)` gibi `set` fonksiyonları {/*setstate*/} -The `set` function returned by `useState` lets you update the state to a different value and trigger a re-render. You can pass the next state directly, or a function that calculates it from the previous state: +`useState` tarafından döndürülen `set` fonksiyonu state'i başka bir değere güncellemenizi ve yeniden render tetiklemenizi sağlar. Bir sonraki state'i direkt olarak ya da önceki state'ten hesaplayan bir fonksiyon iletebilirsiniz: ```js const [name, setName] = useState('Edward'); @@ -68,34 +68,34 @@ function handleClick() { // ... ``` -#### Parameters {/*setstate-parameters*/} +#### Parametreler {/*setstate-parameters*/} -* `nextState`: The value that you want the state to be. It can be a value of any type, but there is a special behavior for functions. - * If you pass a function as `nextState`, it will be treated as an _updater function_. It must be pure, should take the pending state as its only argument, and should return the next state. React will put your updater function in a queue and re-render your component. During the next render, React will calculate the next state by applying all of the queued updaters to the previous state. [See an example below.](#updating-state-based-on-the-previous-state) +* `nextState`: State'in olmasını istediğiniz değerdir. Herhangi bir türden değer olabilir ama fonksiyonlar için özel bir davranış vardır. + * Eğer `nextState` olarak fonksiyon iletirseniz, o fonksiyon _güncelleyici fonksiyon_ olarak görev alacaktır. Saf olmak zorundadır, bekleme durumunu tek argümanı olarak almalı ve bir sonraki state'i döndürmelidir. React, güncelleyici fonksiyonunuzu sıraya koyacaktır ve bileşeninizi yeniden render edecektir. Bir sonraki render sırasında React, sıradaki güncelleyicilerin hepsini bir önceki state'e uygulayarak bir sonraki state'i hesaplayacaktır. [Aşağıdaki örneği inceleyin.](#updating-state-based-on-the-previous-state) -#### Returns {/*setstate-returns*/} +#### Döndürülenler {/*setstate-returns*/} -`set` functions do not have a return value. +`set` fonksiyonlarının dönüş değeri yoktur. -#### Caveats {/*setstate-caveats*/} +#### Uyarılar {/*setstate-caveats*/} -* The `set` function **only updates the state variable for the *next* render**. If you read the state variable after calling the `set` function, [you will still get the old value](#ive-updated-the-state-but-logging-gives-me-the-old-value) that was on the screen before your call. +* `set` fonksiyonu **state değişkenini sadece *sonraki* render için günceller.** Eğer state değişkenini `set` fonksiyonunu çağırdıktan sonra okursanız, [hala çağrınızdan önce ekranda gördüğünüz değeri](#ive-updated-the-state-but-logging-gives-me-the-old-value) alacaksınız. -* If the new value you provide is identical to the current `state`, as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison, React will **skip re-rendering the component and its children.** This is an optimization. Although in some cases React may still need to call your component before skipping the children, it shouldn't affect your code. +* Eğer sağladığınız yeni değer şu anki `state` değeri ile aynıysa, ki bu [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) karşılaştırması ile belirlenir, React **bileşeni ve alt elemanlarını yeniden render etmeyecektir.** Bu bir optimizasyon işlemidir. Her ne kadar bazı durumlarda React'in alt elemanları atlamadan önce bileşeninizi çağırması gerekse de bu durum kodunuzu etkilememelidir. -* React [batches state updates.](/learn/queueing-a-series-of-state-updates) It updates the screen **after all the event handlers have run** and have called their `set` functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use [`flushSync`.](/reference/react-dom/flushSync) +* React [state güncellemelerini toplu halde(batches) yapar.](/learn/queueing-a-series-of-state-updates) React, ekranı **tüm olay yöneticileri çalıştıktan** ve `set` fonksyionlarını çağırdıktan sonra günceller. Böylelikle tek bir olay sırasında olacak birden fazla yeniden render engellenmiş olur. Nadiren de olsa, örneğin DOM'a erişmek istediğinizde, React'ı ekranı erken güncellemeye zorlamak için [`flushSync`](/reference/react-dom/flushSync) kullanabilirsiniz. -* Calling the `set` function *during rendering* is only allowed from within the currently rendering component. React will discard its output and immediately attempt to render it again with the new state. This pattern is rarely needed, but you can use it to **store information from the previous renders**. [See an example below.](#storing-information-from-previous-renders) +* *Render sırasında* `set` fonksiyonu yalnızca mevcut render edilen bileşenin içinde çağırılabilir. React, bileşenin çıktısını görmezden gelecektir ve hemen yeni state ile birlikte render etmeyi deneyecektir. Bu modele nadiren ihtiyaç duyulur ama bunu *önceki render'lardan gelen bilgileri saklamak* için kullanabilirsiniz. [Aşağıdaki örneği inceleyin.](#storing-information-from-previous-renders) -* In Strict Mode, React will **call your updater function twice** in order to [help you find accidental impurities.](#my-initializer-or-updater-function-runs-twice) This is development-only behavior and does not affect production. If your updater function is pure (as it should be), this should not affect the behavior. The result from one of the calls will be ignored. +* Strict Modda React, [kazara oluşan saf olmayan şeyleri bulmanıza yardımcı olmak için](#my-initializer-or-updater-function-runs-twice) **güncelleyici fonksiyonunuzu iki defa** çağıracaktır. Bu sadece geliştirme sırasında görülen bir davranıştır ve son ürünü etkilemez. Eğer güncelleyici fonksiyonunuz saf ise (ki öyle olmalı), bu olması gereken davranışı etkilememelidir. Yapılan çağrılardan birinin sonucu görmezden gelinecektir. --- -## Usage {/*usage*/} +## Kullanım {/*usage*/} -### Adding state to a component {/*adding-state-to-a-component*/} +### Bileşene state ekleme {/*adding-state-to-a-component*/} -Call `useState` at the top level of your component to declare one or more [state variables.](/learn/state-a-components-memory) +Bir ya da birden fazla [state değişkeni](/learn/state-a-components-memory) bildirmek için bileşeninizin üst seviyesinde `useState`'i çağırın. ```js [[1, 4, "age"], [2, 4, "setAge"], [3, 4, "42"], [1, 5, "name"], [2, 5, "setName"], [3, 5, "'Taylor'"]] import { useState } from 'react'; @@ -106,14 +106,14 @@ function MyComponent() { // ... ``` -The convention is to name state variables like `[something, setSomething]` using [array destructuring.](https://javascript.info/destructuring-assignment) +Geleneksel olarak, [dizi yapı çözmeyi (destructuring)](https://javascript.info/destructuring-assignment) kullanarak state değişkenlerini `[something, setSomething]` olarak adlandırmaktayız. -`useState` returns an array with exactly two items: +`useState` her zaman iki değere sahip bir dizi döndürür: -1. The current state of this state variable, initially set to the initial state you provided. -2. The `set` function that lets you change it to any other value in response to interaction. +1. Bu state değişkeninin şu anki state'i, başlangıçta belirttiğiniz başlangıç state'ine eşitttir. +2. `set` fonksiyonu herhangi bir etkileşim sonucu state'i başka bir değerle değiştirmenizi sağlar. -To update what’s on the screen, call the `set` function with some next state: +Ekranda olanı güncellemek için, `set` fonksiyonunu sonraki herhangi bir state ile çağırın: ```js [[2, 2, "setName"]] function handleClick() { @@ -121,28 +121,28 @@ function handleClick() { } ``` -React will store the next state, render your component again with the new values, and update the UI. +React sonraki state'i saklayacaktır, bileşeninizi yeni değerler ile render edecektir ve kullanıcı arayüzünü güncelleyecektir. -Calling the `set` function [**does not** change the current state in the already executing code](#ive-updated-the-state-but-logging-gives-me-the-old-value): +`set` fonksiyonunu çağırmak [şu anda çalışan koddaki mevcut state'i **değiştirmez**](#ive-updated-the-state-but-logging-gives-me-the-old-value): ```js {3} function handleClick() { setName('Robin'); - console.log(name); // Still "Taylor"! + console.log(name); // Hala "Taylor"! } ``` -It only affects what `useState` will return starting from the *next* render. +Bu fonksiyon yalnızca *sonraki* render etme işleminden başlayarak `useState`'in ne döndüreceğini etkiler. - + -#### Counter (number) {/*counter-number*/} +#### Sayaç (sayı) {/*counter-number*/} -In this example, the `count` state variable holds a number. Clicking the button increments it. +Bu örnekte `count` state değişkeni bir sayı tutmaktadır. Butona tıklamak bu sayıyı artırır. @@ -158,7 +158,7 @@ export default function Counter() { return ( ); } @@ -168,9 +168,9 @@ export default function Counter() { -#### Text field (string) {/*text-field-string*/} +#### Metin alanı (string) {/*text-field-string*/} -In this example, the `text` state variable holds a string. When you type, `handleChange` reads the latest input value from the browser input DOM element, and calls `setText` to update the state. This allows you to display the current `text` below. +Bu örnekte `text` state değişkeni bir string tutmaktadır. Yazmaya başladığınız zaman `handleChange` fonksiyonu son input değerini tarayıcı input DOM elemanından okur ve `setText` fonksiyonu state'i güncellemek için çağrılır. Bu, aşağıdaki güncel `text` değerini göstermenizi sağlar. @@ -178,7 +178,7 @@ In this example, the `text` state variable holds a string. When you type, `handl import { useState } from 'react'; export default function MyInput() { - const [text, setText] = useState('hello'); + const [text, setText] = useState('Merhaba'); function handleChange(e) { setText(e.target.value); @@ -187,9 +187,9 @@ export default function MyInput() { return ( <> -

You typed: {text}

- ); @@ -200,9 +200,9 @@ export default function MyInput() { -#### Checkbox (boolean) {/*checkbox-boolean*/} +#### Onay kutusu (boolean) {/*checkbox-boolean*/} -In this example, the `liked` state variable holds a boolean. When you click the input, `setLiked` updates the `liked` state variable with whether the browser checkbox input is checked. The `liked` variable is used to render the text below the checkbox. +Bu örnekte `liked` state değişkeni bir boolean tutmaktadır. Input'a tıkladığınız zaman, `setLiked` fonksiyonu, `liked` state değişkenini tarayıcı onay kutusu input'unun onaylanıp onaylanmadığına göre günceller. `liked` değişkeni onay kutusu altındaki metni render etmek için kullanılır. @@ -224,9 +224,9 @@ export default function MyCheckbox() { checked={liked} onChange={handleChange} /> - I liked this + Bunu beğendim -

You {liked ? 'liked' : 'did not like'} this.

+

Bunu {liked ? 'beğendim' : 'beğenmedim'}.

); } @@ -236,9 +236,9 @@ export default function MyCheckbox() { -#### Form (two variables) {/*form-two-variables*/} +#### Form (iki değişken) {/*form-two-variables*/} -You can declare more than one state variable in the same component. Each state variable is completely independent. +Aynı bileşende birden fazla state değişkeni bildirebilirsiniz. Her state değişkeni birbirinden tamamıyla bağımsızdır. @@ -256,9 +256,9 @@ export default function Form() { onChange={e => setName(e.target.value)} /> -

Hello, {name}. You are {age}.

+

Selam, {name}. {age} yaşındasın.

); } @@ -276,9 +276,9 @@ button { display: block; margin-top: 10px; } --- -### Updating state based on the previous state {/*updating-state-based-on-the-previous-state*/} +### State'i bir önceki state'e göre güncelleme {/*updating-state-based-on-the-previous-state*/} -Suppose the `age` is `42`. This handler calls `setAge(age + 1)` three times: +Varsayalım `age` state'i `42` olsun. Bu yönetici `setAge(age + 1)` fonksiyonunu üç defa çağırır: ```js function handleClick() { @@ -288,9 +288,9 @@ function handleClick() { } ``` -However, after one click, `age` will only be `43` rather than `45`! This is because calling the `set` function [does not update](/learn/state-as-a-snapshot) the `age` state variable in the already running code. So each `setAge(age + 1)` call becomes `setAge(43)`. +Ancak bir tıklamadan sonra `age` değeri `45` yerine `43` olacak! Bunun nedeni ise `set` fonksiyonunu çağırmanın zaten çalışmakta olan kodda `age` state değişkenini [güncellememesidir.](/learn/state-as-a-snapshot) Yani her `setAge(age + 1)` çağrısı `setAge(43)` olur. -To solve this problem, **you may pass an *updater function*** to `setAge` instead of the next state: +Bu problemi çözmek için `setAge`'e bir sonraki state yerine ***güncelleyici fonksiyon* iletebilirsiniz:** ```js [[1, 2, "a", 0], [2, 2, "a + 1"], [1, 3, "a", 0], [2, 3, "a + 1"], [1, 4, "a", 0], [2, 4, "a + 1"]] function handleClick() { @@ -300,39 +300,39 @@ function handleClick() { } ``` -Here, `a => a + 1` is your updater function. It takes the pending state and calculates the next state from it. +Burada, `a => a + 1` sizin güncelleyici fonksiyonunuzdur. Bekleyen state'i alır ve ondan bir sonraki state'i hesaplar. -React puts your updater functions in a [queue.](/learn/queueing-a-series-of-state-updates) Then, during the next render, it will call them in the same order: +React güncelleyici fonksiyonlarınızı [sıraya](/learn/queueing-a-series-of-state-updates) koyar. Daha sonra, sonraki render sırasında, bu fonksiyonları aynı sırada çağıracaktır: -1. `a => a + 1` will receive `42` as the pending state and return `43` as the next state. -1. `a => a + 1` will receive `43` as the pending state and return `44` as the next state. -1. `a => a + 1` will receive `44` as the pending state and return `45` as the next state. +1. `a => a + 1` fonksiyonu `42` sayısını bekleyen state olarak alacaktır ve sonraki state olarak `43` döndürecektir. +1. `a => a + 1` fonksiyonu `43` sayısını bekleyen state olarak alacaktır ve sonraki state olarak `44` döndürecektir. +1. `a => a + 1` fonksiyonu `44` sayısını bekleyen state olarak alacaktır ve sonraki state olarak `45` döndürecektir. -There are no other queued updates, so React will store `45` as the current state in the end. +Sırada bekleyen başka güncelleme olmadığından dolayı React `45` sayısını güncel state olarak saklayacaktır. -By convention, it's common to name the pending state argument for the first letter of the state variable name, like `a` for `age`. However, you may also call it like `prevAge` or something else that you find clearer. +Geleneksel olarak, bekleyen state argümanını state değişkeni adının ilk harfi olarak adlandırmak yaygındır; örneğin `age` için `a` kullanmak. Ancak, daha açıklayıcı olmasını istiyorsanız `prevAge` ya da başka bir şey kullanabilirsiniz. -React may [call your updaters twice](#my-initializer-or-updater-function-runs-twice) in development to verify that they are [pure.](/learn/keeping-components-pure) +React, geliştirme sırasında güncelleyici fonksiyonlarınızın [saf](/learn/keeping-components-pure) olduğunu doğrulamak için [onları iki defa çağırır.](#my-initializer-or-updater-function-runs-twice) -#### Is using an updater always preferred? {/*is-using-an-updater-always-preferred*/} +#### Güncelleyici kullanmak her zaman tercih edilir mi? {/*is-using-an-updater-always-preferred*/} -You might hear a recommendation to always write code like `setAge(a => a + 1)` if the state you're setting is calculated from the previous state. There is no harm in it, but it is also not always necessary. +Eğer değiştirdiğiniz state bir önceki state'ten hesaplanıyorsa kodunuzu her zaman `setAge(a => a + 1)` olarak yazmanız size tavsiye edilmiş olabilir. Bunda bir sorun yoktur ama her zaman gerekli değildir. -In most cases, there is no difference between these two approaches. React always makes sure that for intentional user actions, like clicks, the `age` state variable would be updated before the next click. This means there is no risk of a click handler seeing a "stale" `age` at the beginning of the event handler. +Pek çok durumda bu iki yaklaşım arasında bir fark yoktur. React, tıklamalar gibi kasıtlı olarak yapılmış kullanıcı aksiyonları için `age` state değişkeninin bir sonraki tıklamadan önce güncellendiğine emin olur. Bu, tıklama yöneticisinin, olay yöneticisinin başlangıcında "eski" bir `age` değişkeni görme riski olmadığı anlamına gelir. -However, if you do multiple updates within the same event, updaters can be helpful. They're also helpful if accessing the state variable itself is inconvenient (you might run into this when optimizing re-renders). +Ancak, aynı olay içinde birden fazla güncelleme yaparsanız, güncelleyiciler yardımcı olabilir. Ayrıca state değişkenine erişmenin sakıncalı olduğu durumlarda da faydalıdırlar (bu durumlarla yeniden render'ları optimize etmeye çalışırken karşılaşabilirsiniz). -If you prefer consistency over slightly more verbose syntax, it's reasonable to always write an updater if the state you're setting is calculated from the previous state. If it's calculated from the previous state of some *other* state variable, you might want to combine them into one object and [use a reducer.](/learn/extracting-state-logic-into-a-reducer) +Kod olarak kalabılık söz dizimi yerine tutarlığı tercih ediyorsanız, değiştirdiğiniz state bir önceki state'ten hesaplanıyorsa her zaman güncelleyici yazmak mantıklı olacaktır. Eğer state *başka* bir state değişkeninin önceki state'inden hesaplanıyorsa, güncelleyicileri bir nesne içine koyabilir ve [reducer kullanabilirsiniz.](/learn/extracting-state-logic-into-a-reducer) - + -#### Passing the updater function {/*passing-the-updater-function*/} +#### Güncelleyici fonksiyonu iletme {/*passing-the-updater-function*/} -This example passes the updater function, so the "+3" button works. +Bu örnek güncelleyici fonksiyonu iletmektedir bu yüzden "+3" butonu çalışır. @@ -348,7 +348,7 @@ export default function Counter() { return ( <> -

Your age: {age}

+

Yaşınız: {age}

+ }}>Ekle ) } @@ -746,7 +746,7 @@ function Task({ todo, onChange, onDelete }) { }); }} /> ); @@ -755,7 +755,7 @@ function Task({ todo, onChange, onDelete }) { <> {todo.title} ); @@ -774,7 +774,7 @@ function Task({ todo, onChange, onDelete }) { /> {todoContent} ); @@ -791,9 +791,9 @@ ul, li { margin: 0; padding: 0; } -#### Writing concise update logic with Immer {/*writing-concise-update-logic-with-immer*/} +#### Immer kullanarak kısa ve öz güncelleme mantığı yazmak {/*writing-concise-update-logic-with-immer*/} -If updating arrays and objects without mutation feels tedious, you can use a library like [Immer](https://github.com/immerjs/use-immer) to reduce repetitive code. Immer lets you write concise code as if you were mutating objects, but under the hood it performs immutable updates: +Eğer dizileri ve nesneleri mutasyona uğratmadan güncellemek yorucu bir hale geldiyse, tekrar eden kodu azaltmak için [Immer](https://github.com/immerjs/use-immer) gibi bir kütüphane kullanabilrsiniz. Immer ile nesneleri mutasyona uğratıyormuş gibi kısa ve öz kod yazabilirsiniz ama Immer arka planda değiştirilemez(immutable) güncellemeler yapmaktadır. @@ -822,8 +822,8 @@ export default function BucketList() { return ( <> -

Art Bucket List

-

My list of art to see:

+

Görülecek Sanat Eserleri Listesi

+

Görmek istediğim eserler listesi:

@@ -882,9 +882,9 @@ function ItemList({ artworks, onToggle }) { --- -### Avoiding recreating the initial state {/*avoiding-recreating-the-initial-state*/} +### Başlangıç state'ini yeniden yaratmaktan kaçınma {/*avoiding-recreating-the-initial-state*/} -React saves the initial state once and ignores it on the next renders. +React başlangıç state'ini bir defa kaydeder ve sonraki render'larda görmezden gelir. ```js function TodoList() { @@ -892,9 +892,9 @@ function TodoList() { // ... ``` -Although the result of `createInitialTodos()` is only used for the initial render, you're still calling this function on every render. This can be wasteful if it's creating large arrays or performing expensive calculations. +`createInitialTodos()` fonksiyonunun sonucu sadece başlangıç render'ında kullanılmasına rağmen, bu fonksiyonu hala her render'da yeniden çağırmaktasınız. Eğer bu fonksiyon büyük diziler ya da pahalı hesaplamalar yapıyorsa, bu israfa neden olabilir. -To solve this, you may **pass it as an _initializer_ function** to `useState` instead: +Bu durumu çözmek için bu fonksiyonu, `useState`'e **_başlatıcı_ fonksiyon olarak** iletebilirsiniz: ```js function TodoList() { @@ -902,15 +902,15 @@ function TodoList() { // ... ``` -Notice that you’re passing `createInitialTodos`, which is the *function itself*, and not `createInitialTodos()`, which is the result of calling it. If you pass a function to `useState`, React will only call it during initialization. +Burada `createInitialTodos` olarak ilettiğinize dikkat edin. Yani burada `createInitialTodos()` fonksiyonunu çağırmanın sonucunu değil *fonksiyonun kendisini* iletiyoruz. Eğer `useState`'e fonksiyon iletirseniz, React bu fonksiyonu sadece başlangıçta çağıracaktır. -React may [call your initializers twice](#my-initializer-or-updater-function-runs-twice) in development to verify that they are [pure.](/learn/keeping-components-pure) +React, geliştirme sırasında başlatıcıların [saf](/learn/keeping-components-pure) olduğunu doğrulamak için [onları iki defa çağırabilir.](#my-initializer-or-updater-function-runs-twice) - + -#### Passing the initializer function {/*passing-the-initializer-function*/} +#### Başlatıcı fonksiyon iletme {/*passing-the-initializer-function*/} -This example passes the initializer function, so the `createInitialTodos` function only runs during initialization. It does not run when component re-renders, such as when you type into the input. +Bu örnekte başlatıcı fonksiyon iletilmektedir yani `createInitialTodos` fonksiyonu yalnızca başlangıçta çalışır. Input'a yazdığınızda olduğu gibi, bileşen yeniden render edildiğinde tekrar çalışmazlar. @@ -944,7 +944,7 @@ export default function TodoList() { id: todos.length, text: text }, ...todos]); - }}>Add + }}>Ekle
    {todos.map(item => (
  • @@ -961,9 +961,9 @@ export default function TodoList() { -#### Passing the initial state directly {/*passing-the-initial-state-directly*/} +#### Başlangıç state'ini direkt olarak iletme {/*passing-the-initial-state-directly*/} -This example **does not** pass the initializer function, so the `createInitialTodos` function runs on every render, such as when you type into the input. There is no observable difference in behavior, but this code is less efficient. +Bu örnek başlatıcı fonksiyonunu **iletmez**. Input'a bir şey yazdığınızda olduğu gibi `createInitialTodos` fonksiyonu her render'da çalışır. Davranışta gözle görülür bir değişiklik yoktur ama bu kodun verimliliği daha düşüktür. @@ -997,7 +997,7 @@ export default function TodoList() { id: todos.length, text: text }, ...todos]); - }}>Add + }}>Ekle
      {todos.map(item => (
    • @@ -1018,13 +1018,13 @@ export default function TodoList() { --- -### Resetting state with a key {/*resetting-state-with-a-key*/} +### State'i anahtar ile sıfırlama {/*resetting-state-with-a-key*/} -You'll often encounter the `key` attribute when [rendering lists.](/learn/rendering-lists) However, it also serves another purpose. +[Listeleri render ederken](/learn/rendering-lists) sık sık `key`(`anahtar`) niteliğini göreceksiniz. Ancak, bu başka bir amaca da hizmet etmektedir. -You can **reset a component's state by passing a different `key` to a component.** In this example, the Reset button changes the `version` state variable, which we pass as a `key` to the `Form`. When the `key` changes, React re-creates the `Form` component (and all of its children) from scratch, so its state gets reset. +**Bir bileşene farklı bir `key` ileterek onun state'ini** sıfırlayabilirsiniz. Bu örnekte Sıfırla butonu, `Form`'a `key` olarak ilettiğimiz `version` state değişkenini değiştirir. `key` değiştiğinde React, `Form` bileşenini sıfırdan yeniden yaratır (ve tüm alt elemanlarını) böylelikle state sıfırlanmış olur. -Read [preserving and resetting state](/learn/preserving-and-resetting-state) to learn more. +Daha fazla bilgi edinmek için [state'i korumak ve sıfırlamak](/learn/preserving-and-resetting-state) sayfasını inceleyin. @@ -1040,7 +1040,7 @@ export default function App() { return ( <> - +
      ); @@ -1055,7 +1055,7 @@ function Form() { value={name} onChange={e => setName(e.target.value)} /> -

      Hello, {name}.

      +

      Selam, {name}.

      ); } @@ -1069,19 +1069,19 @@ button { display: block; margin-bottom: 20px; } --- -### Storing information from previous renders {/*storing-information-from-previous-renders*/} +### Önceki render'lardaki bilgiyi saklama {/*storing-information-from-previous-renders*/} -Usually, you will update state in event handlers. However, in rare cases you might want to adjust state in response to rendering -- for example, you might want to change a state variable when a prop changes. +State'i genellikle olay yöneticileri içinde güncellersiniz. Ancak, bazı nadir durumlarda state'i render'a cevap olarak ayarlamak isteyebilirsiniz -- örneğin, bir prop değiştiğinde state değişkenini değiştirmek isteyebilirsiniz. -In most cases, you don't need this: +Çoğu durumda buna ihtiyacınız yoktur: -* **If the value you need can be computed entirely from the current props or other state, [remove that redundant state altogether.](/learn/choosing-the-state-structure#avoid-redundant-state)** If you're worried about recomputing too often, the [`useMemo` Hook](/reference/react/useMemo) can help. -* If you want to reset the entire component tree's state, [pass a different `key` to your component.](#resetting-state-with-a-key) -* If you can, update all the relevant state in the event handlers. +* **Eğer ihtiyacınız olan değer tamamen mevcut prop'lar ya da diğer state'ler kullanılarak hesaplanabiliyorsa, [gereksiz state'i tamamen kaldırın.](/learn/choosing-the-state-structure#avoid-redundant-state)** Sık sık yeniden hesaplama yapmaktan endişeliyseniz, [`useMemo` Hook'u](/reference/react/useMemo) size yardımcı olabilir. +* Tüm bileşen ağacının state'ini sıfırlamak istiyorsanız, [bileşeninize farklı bir `key` iletin.](#resetting-state-with-a-key) +* Eğer mümkünse, kullandığınız tüm state'leri olay yöneticileri ile güncelleyin. -In the rare case that none of these apply, there is a pattern you can use to update state based on the values that have been rendered so far, by calling a `set` function while your component is rendering. +Bunların hiçbirine uymayan nadir bir durum varsa, bileşeniniz render edilirken `set` fonksiyonunu çağırarak şu ana kadar render edilmiş değerlere dayalı olarak state'i güncellemek için kullanabileceğiniz bir model vardır. -Here's an example. This `CountLabel` component displays the `count` prop passed to it: +Aşağıdaki bunu gösteren bir örnektir. `CountLabel` bileşeni kendisine iletilen `count` prop'unu render etmektedir: ```js CountLabel.js export default function CountLabel({ count }) { @@ -1089,7 +1089,7 @@ export default function CountLabel({ count }) { } ``` -Say you want to show whether the counter has *increased or decreased* since the last change. The `count` prop doesn't tell you this -- you need to keep track of its previous value. Add the `prevCount` state variable to track it. Add another state variable called `trend` to hold whether the count has increased or decreased. Compare `prevCount` with `count`, and if they're not equal, update both `prevCount` and `trend`. Now you can show both the current count prop and *how it has changed since the last render*. +Diyelim ki sayacın son değişiklikten beri *arttığını ya da azaldığını* göstermek istiyorsunuz. `count` prop'u size bunu söylemez -- prop'un bir önceki değeri hakkında bilgiyi siz takip etmelisiniz. `prevCount` state bileşenini önceki değerleri takip etmek için ekleyin. Sayacın arttığınımı yoksa azaldığınımı takip etmek için yeni bir `trend` state değişkeni ekleyin. `prevCount` ve `count` değerlerini kıyaslayın ve değeler eşit değilse,`prevCount` ve `trend` değerlerini güncelleyin. Şimdi mevcut sayaç prop'unu ve *son render'dan itibaren nasıl değiştiğini* gösterebilirsiniz. @@ -1102,10 +1102,10 @@ export default function App() { return ( <> @@ -1121,12 +1121,12 @@ export default function CountLabel({ count }) { const [trend, setTrend] = useState(null); if (prevCount !== count) { setPrevCount(count); - setTrend(count > prevCount ? 'increasing' : 'decreasing'); + setTrend(count > prevCount ? 'artıyor' : 'azalıyor'); } return ( <>

      {count}

      - {trend &&

      The count is {trend}

      } + {trend &&

      Sayaç {trend}

      } ); } @@ -1138,34 +1138,34 @@ button { margin-bottom: 10px; }       -Note that if you call a `set` function while rendering, it must be inside a condition like `prevCount !== count`, and there must be a call like `setPrevCount(count)` inside of the condition. Otherwise, your component would re-render in a loop until it crashes. Also, you can only update the state of the *currently rendering* component like this. Calling the `set` function of *another* component during rendering is an error. Finally, your `set` call should still [update state without mutation](#updating-objects-and-arrays-in-state) -- this doesn't mean you can break other rules of [pure functions.](/learn/keeping-components-pure) +Şunu unutmayın ki eğer `set` fonksiyonunu render esnasında çağırırsanız, bu fonksiyon `prevCount !== count` gibi bir koşullu ifadenin içinde olmak zorundadır ve koşullu ifadenin içinde `setPrevCount(count)` gibi bir çağrı olmak zorundadır. Aksi halde, bileşeniniz sonsuz bir döngü içinde çökene kadar yeniden render edilecektir. Aynı zamanda, *şu anda render edilen* bileşenin state'ini sadece bu şekilde güncelleyebilirsiniz. *Başka* bir bileşenin `set` fonksiyonunu render esnasında çağırmak bir hatadır. Son olarak, `set` fonksiyonu çağrınızın [state'i mutasyona uğratmadan güncellemesine](#updating-objects-and-arrays-in-state) dikkat etmelisiniz -- bu, sizin diğer [saf fonksiyon](/learn/keeping-components-pure) kurallarını çiğneyebileceğiniz anlamına gelmez. -This pattern can be hard to understand and is usually best avoided. However, it's better than updating state in an effect. When you call the `set` function during render, React will re-render that component immediately after your component exits with a `return` statement, and before rendering the children. This way, children don't need to render twice. The rest of your component function will still execute (and the result will be thrown away). If your condition is below all the Hook calls, you may add an early `return;` to restart rendering earlier. +Bu modeli anlaması zor olabilir ve genel olarak bu modelden kaçınılması en yararlısıdır. Ancak, state'i Efekt içinde güncellemekten daha iyidir. `set` fonksiyonunu render esnasında çağırdığınızda React, bileşeniniz bir `return` ifadesine sahip olduktan hemen sonra ve alt elemanları render etmeden önce bu bileşeni yeniden render edecektir. Böylelikle, alt elemanların iki defa render edilmesine gerek olmayacaktır. Bileşeninizin geri kalan fonksiyonu hala çalışacaktır (ve sonuç görmezden gelinecektir). Eğer koşullu ifadeniz tüm Hook çağrılarının altındaysa, erken bir `return;` ifadesi ekleyerek render etmeyi erken sıfırlayabilirsiniz. --- -## Troubleshooting {/*troubleshooting*/} +## Sorun giderme {/*troubleshooting*/} -### I've updated the state, but logging gives me the old value {/*ive-updated-the-state-but-logging-gives-me-the-old-value*/} +### State'i güncelledim ama konsolda eski değeri görüyorum {/*ive-updated-the-state-but-logging-gives-me-the-old-value*/} -Calling the `set` function **does not change state in the running code**: +`set` fonksiyonunu çağırmak **çalışan koddaki state'i değiştirmez**: ```js {4,5,8} function handleClick() { console.log(count); // 0 - setCount(count + 1); // Request a re-render with 1 - console.log(count); // Still 0! + setCount(count + 1); // 1 ile yeniden render iste + console.log(count); // Hala 0! setTimeout(() => { - console.log(count); // Also 0! + console.log(count); // Bu da 0! }, 5000); } ``` -This is because [states behaves like a snapshot.](/learn/state-as-a-snapshot) Updating state requests another render with the new state value, but does not affect the `count` JavaScript variable in your already-running event handler. +Bunun nedeni [state'in anlık görüntü olarak davranmasıdır.](/learn/state-as-a-snapshot) State'i güncellemek yeni state değeri ile başka bir render isteği gönderir ama bu halihazırda çalışan olay yöneticileri içindeki JavaScript `count` değişkenini etkilemez. -If you need to use the next state, you can save it in a variable before passing it to the `set` function: +Eğer bir sonraki state'i kullanmak istiyorsanız, değeri `set` fonksiyonuna iletmeden önce başka bir değişkende saklayabilirsiniz: ```js const nextCount = count + 1; @@ -1177,19 +1177,19 @@ console.log(nextCount); // 1 --- -### I've updated the state, but the screen doesn't update {/*ive-updated-the-state-but-the-screen-doesnt-update*/} +### State'i güncelledim ama ekran güncellenmiyor {/*ive-updated-the-state-but-the-screen-doesnt-update*/} -React will **ignore your update if the next state is equal to the previous state,** as determined by an [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. This usually happens when you change an object or an array in state directly: +React, **eğer bir sonraki state'iniz bir önceki ile eşitse güncellemeyi** görmezden gelecektir. Bu karşılaştırma [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) ile yapılır. Bu durum genellikle state içindeki nesne ya da diziyi direkt olarak değiştirdiğiniz zaman meydana gelir: ```js -obj.x = 10; // 🚩 Wrong: mutating existing object -setObj(obj); // 🚩 Doesn't do anything +obj.x = 10; // 🚩 Yanlış: nesneyi mutasyona uğratır +setObj(obj); // 🚩 Hiçbir şey yapmaz ``` -You mutated an existing `obj` object and passed it back to `setObj`, so React ignored the update. To fix this, you need to ensure that you're always [_replacing_ objects and arrays in state instead of _mutating_ them](#updating-objects-and-arrays-in-state): +Var olan bir `obj` nesnesini mutasyona uğrattınız ve `setObj` fonksiyonuna geri ilettiniz ve bu yüzden React güncellemeyi görmezden geldi. Bunu düzeltmek için, her zaman [state içindeki nesneleri ve dizileri _mutasyona uğratmak_ yerine _değiştirdiğinizden_ ](#updating-objects-and-arrays-in-state) emin olmalısınız: ```js -// ✅ Correct: creating a new object +// ✅ Doğru: yeni bir nesne yaratılır setObj({ ...obj, x: 10 @@ -1198,78 +1198,78 @@ setObj({ --- -### I'm getting an error: "Too many re-renders" {/*im-getting-an-error-too-many-re-renders*/} +### Bir hata alıyorum: "Çok fazla yeniden render" {/*im-getting-an-error-too-many-re-renders*/} -You might get an error that says: `Too many re-renders. React limits the number of renders to prevent an infinite loop.` Typically, this means that you're unconditionally setting state *during render*, so your component enters a loop: render, set state (which causes a render), render, set state (which causes a render), and so on. Very often, this is caused by a mistake in specifying an event handler: +Şunu söyleyen bir hata alabilirsiniz: `Çok fazla yeniden render. React, sonsuz döngülerin önüne geçmek için yapılan render'ların sayısını kısıtlar.` Genel olarak bu, state'i *render etme esnasında* koşulsuz olarak değiştirdiğiniz anlamına gelir, yani bileşeniniz bir döngüye girer: render et, state'i değiştir (ki bu da bir render'a neden olur), render et, state'i değiştir (ki bu da bir render'a neden olur) ve bu böyle gider. Bu çoğunlukla olay yöneticisi içindeki bir hatadan kaynaklanmaktadır: ```js {1-2} -// 🚩 Wrong: calls the handler during render +// 🚩 Yanlış: yöneticiyi render esnasında çağırır return -// ✅ Correct: passes down the event handler +// ✅ Doğru: olay yöneticisini iletir return -// ✅ Correct: passes down an inline function +// ✅ Doğru: satır içi fonksiyon iletir return ``` -If you can't find the cause of this error, click on the arrow next to the error in the console and look through the JavaScript stack to find the specific `set` function call responsible for the error. +Eğer hatanın nedenini bulamıyorsanız, konsolda hatanın yanındaki ok tuşuna basın ve hataya neden olan `set` fonksiyonu çağrısını JavaScript içinde bulun. --- -### My initializer or updater function runs twice {/*my-initializer-or-updater-function-runs-twice*/} +### Başlatıcım veya güncelleyici fonksiyonum iki defa çalışıyor {/*my-initializer-or-updater-function-runs-twice*/} -In [Strict Mode](/reference/react/StrictMode), React will call some of your functions twice instead of once: +[Strict Modda](/reference/react/StrictMode) React, bazı fonksiyonlarınızı bir yerine iki defa çağıracaktır: ```js {2,5-6,11-12} function TodoList() { - // This component function will run twice for every render. + // Bu bileşen fonksiyonu her render'da iki defa çalışacaktır. const [todos, setTodos] = useState(() => { - // This initializer function will run twice during initialization. + // Bu başlatıcı fonksiyon başlangıç sırasında iki defa çalışacaktır. return createTodos(); }); function handleClick() { setTodos(prevTodos => { - // This updater function will run twice for every click. + // Bu güncelleyici fonksiyonu her bir tıklama için iki defa çalışacaktır. return [...prevTodos, createTodo()]; }); } // ... ``` -This is expected and shouldn't break your code. +Bu beklendik bir durumdur ve kodunuzda bir soruna neden olmamalıdır. -This **development-only** behavior helps you [keep components pure.](/learn/keeping-components-pure) React uses the result of one of the calls, and ignores the result of the other call. As long as your component, initializer, and updater functions are pure, this shouldn't affect your logic. However, if they are accidentally impure, this helps you notice the mistakes. +Bu **sadece geliştirme sırasında** olan davranış [bileşenlerinizi saf tutmanıza](/learn/keeping-components-pure) yardımcı olur. React, yapılan çağrılardan birinin sonucunu kullanır ve diğer çağrının sonucunu görmezden gelir. Bileşeniniz, başlatıcınız ve güncelleyici fonksiyonunuz saf olduğu sürece bu durum mantığınızı etkilememelidir. Ancak bu davranış, saf olmayan fonksiyonlarınız varsa, yaptığız hataları bulmanıza yardımcı olur. -For example, this impure updater function mutates an array in state: +Örneğin, bu saf olmayan güncelleyici fonksiyonu state içindeki diziyi mutasyona uğratmaktadır: ```js {2,3} setTodos(prevTodos => { - // 🚩 Mistake: mutating state + // 🚩 Yanlış: state'i mutasyona uğratır prevTodos.push(createTodo()); }); ``` -Because React calls your updater function twice, you'll see the todo was added twice, so you'll know that there is a mistake. In this example, you can fix the mistake by [replacing the array instead of mutating it](#updating-objects-and-arrays-in-state): +React güncelleme fonksiyonlarını iki defa çağırdığından dolayı, yapılacak işin iki kere eklendiğini göreceksiniz. Yani burada bir hata olduğunu bileceksiniz. Bu örnekteki hatayı, [diziyi mutasyona uğratmak yerine değiştirerek](#updating-objects-and-arrays-in-state) çözebilirsiniz: ```js {2,3} setTodos(prevTodos => { - // ✅ Correct: replacing with new state + // ✅ Doğru: yeni state ile değiştirilir return [...prevTodos, createTodo()]; }); ``` -Now that this updater function is pure, calling it an extra time doesn't make a difference in behavior. This is why React calling it twice helps you find mistakes. **Only component, initializer, and updater functions need to be pure.** Event handlers don't need to be pure, so React will never call your event handlers twice. +Şimdi güncelleme fonksiyonu saf olduğuna göre, fonksiyonu iki defa çağırmak davranışta herhangi bir farklılığa yol açmayacaktır. Bu yüzden React'in fonksiyonu iki defa çağırması hataları bulmanıza yardımcı olur. **Sadece bileşen, başlatıcı ve güncelleyici fonksiyonlar saf olmalıdır.** Olay yöneticilerinin saf olmasına gerek yoktur yani React olay yöneticilerinizi asla iki defa çağırmayacaktır. -Read [keeping components pure](/learn/keeping-components-pure) to learn more. +Daha fazla bilgi edinmek için [bileşenleri saf tutmak](/learn/keeping-components-pure) sayfasını okuyabilirsiniz. --- -### I'm trying to set state to a function, but it gets called instead {/*im-trying-to-set-state-to-a-function-but-it-gets-called-instead*/} +### State'e bir fonksiyon koymak istiyorum ama fonksiyon çağrılıyor {/*im-trying-to-set-state-to-a-function-but-it-gets-called-instead*/} -You can't put a function into state like this: +State içine bir fonksiyonu böyle koyamazsınız: ```js const [fn, setFn] = useState(someFunction); @@ -1279,7 +1279,7 @@ function handleClick() { } ``` -Because you're passing a function, React assumes that `someFunction` is an [initializer function](#avoiding-recreating-the-initial-state), and that `someOtherFunction` is an [updater function](#updating-state-based-on-the-previous-state), so it tries to call them and store the result. To actually *store* a function, you have to put `() =>` before them in both cases. Then React will store the functions you pass. +Bir fonksiyon ilettiğinizden dolayı React, `someFunction` fonksiyonunun [başlatıcı fonksiyon](#avoiding-recreating-the-initial-state) olduğunu düşünecektir ve `someOtherFunction` fonksiyonu bir [güncelleyi fonksiyondur](#updating-state-based-on-the-previous-state), bu yüzden React bu fonksiyonu çağırmaya ve sonucunu saklamaya çalışacaktır. Bir fonksiyonu *saklamanın* asıl yolu, `() =>` ifadesini her iki durumda da fonksiyondan önceye eklemektir. Böylelikle React, ilettiğiniz fonksiyonları saklayacaktır. ```js {1,4} const [fn, setFn] = useState(() => someFunction); From a1f77164f5060a96c50c41b3adc7d2443d2334c5 Mon Sep 17 00:00:00 2001 From: serkanisyapan Date: Thu, 16 Nov 2023 12:23:32 +0300 Subject: [PATCH 2/2] fix typos --- src/content/reference/react/useState.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md index a70422969..8d7096827 100644 --- a/src/content/reference/react/useState.md +++ b/src/content/reference/react/useState.md @@ -4,7 +4,7 @@ title: useState -`useState` bileşeninize [state değişkeni](/learn/state-a-components-memory) eklemenizi sağlayan bir React Hook'udur. +`useState`, bileşeninize [state değişkeni](/learn/state-a-components-memory) eklemenizi sağlayan bir React Hook'udur. ```js const [state, setState] = useState(initialState); @@ -20,7 +20,7 @@ const [state, setState] = useState(initialState); ### `useState(initialState)` {/*usestate*/} -Bir [state değişkeni](/learn/state-a-components-memory) bildirmek için bileşeninizin en üstünde `useState` çağırın. +Bir [state değişkeni](/learn/state-a-components-memory) bildirmek için bileşeninizin en üstünde `useState` çağırın. ```js import { useState } from 'react'; @@ -32,7 +32,7 @@ function MyComponent() { // ... ``` -Gelenek, [dizi yapı çözmeyi (array destructuring)](https://javascript.info/destructuring-assignment) kullanarak state değişkenlerini `[something, setSomething]` olarak adlandırmaktır. +Ortak düşünce, [dizi yapı çözmeyi (array destructuring)](https://javascript.info/destructuring-assignment) kullanarak state değişkenlerini `[something, setSomething]` olarak adlandırmaktır. [Aşağıda daha fazla örnek bulabilirsiniz.](#usage) @@ -106,7 +106,7 @@ function MyComponent() { // ... ``` -Geleneksel olarak, [dizi yapı çözmeyi (destructuring)](https://javascript.info/destructuring-assignment) kullanarak state değişkenlerini `[something, setSomething]` olarak adlandırmaktayız. +Ortak düşünce, [dizi yapı çözmeyi (destructuring)](https://javascript.info/destructuring-assignment) kullanarak state değişkenlerini `[something, setSomething]` olarak adlandırmaktır. `useState` her zaman iki değere sahip bir dizi döndürür: @@ -310,7 +310,7 @@ React güncelleyici fonksiyonlarınızı [sıraya](/learn/queueing-a-series-of-s Sırada bekleyen başka güncelleme olmadığından dolayı React `45` sayısını güncel state olarak saklayacaktır. -Geleneksel olarak, bekleyen state argümanını state değişkeni adının ilk harfi olarak adlandırmak yaygındır; örneğin `age` için `a` kullanmak. Ancak, daha açıklayıcı olmasını istiyorsanız `prevAge` ya da başka bir şey kullanabilirsiniz. +Ortak düşünce, bekleyen state argümanını state değişkeni adının ilk harfi olarak adlandırmaktır; örneğin `age` için `a` kullanmak. Ancak, daha açıklayıcı olmasını istiyorsanız `prevAge` ya da başka bir şey kullanabilirsiniz. React, geliştirme sırasında güncelleyici fonksiyonlarınızın [saf](/learn/keeping-components-pure) olduğunu doğrulamak için [onları iki defa çağırır.](#my-initializer-or-updater-function-runs-twice) @@ -1204,13 +1204,13 @@ setObj({ ```js {1-2} // 🚩 Yanlış: yöneticiyi render esnasında çağırır -return +return // ✅ Doğru: olay yöneticisini iletir -return +return // ✅ Doğru: satır içi fonksiyon iletir -return +return ``` Eğer hatanın nedenini bulamıyorsanız, konsolda hatanın yanındaki ok tuşuna basın ve hataya neden olan `set` fonksiyonu çağrısını JavaScript içinde bulun.