From 3136a3aa3fd6909df9512a9476815888f099de2b Mon Sep 17 00:00:00 2001 From: furkanmavili Date: Sat, 20 May 2023 17:54:46 +0300 Subject: [PATCH 1/3] translate `Referencing Values with Refs` --- .../learn/referencing-values-with-refs.md | 227 +++++++++--------- 1 file changed, 116 insertions(+), 111 deletions(-) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index da5d864ab..ec5c58276 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -1,49 +1,49 @@ --- -title: 'Referencing Values with Refs' +title: 'Ref ile Değerlere Referans Verme' --- -When you want a component to "remember" some information, but you don't want that information to [trigger new renders](/learn/render-and-commit), you can use a *ref*. +Bir bileşenin "hatırlamasını" istediğiniz bilgi varsa, ancak bu bilginin [yeni render'lar](/learn/render-and-commit) tetiklemesini istemiyorsanız, bir *ref* kullanabilirsiniz. -- How to add a ref to your component -- How to update a ref's value -- How refs are different from state -- How to use refs safely +- Bir bileşene ref nasıl eklenir +- Bir ref'in değerini nasıl güncelleyebilirsiniz +- Ref'lerin state'ten farkı nedir +- Ref'leri güvenli bir şekilde nasıl kullanabilirsiniz -## Adding a ref to your component {/*adding-a-ref-to-your-component*/} +## Bir bileşene ref eklemek {/*adding-a-ref-to-a-component*/} -You can add a ref to your component by importing the `useRef` Hook from React: +Bileşeninize bir ref eklemek için, `useRef` Hook'unu React'ten içe aktarın: ```js import { useRef } from 'react'; ``` -Inside your component, call the `useRef` Hook and pass the initial value that you want to reference as the only argument. For example, here is a ref to the value `0`: +Bileşeninizin içinde `useRef` Hook'unu çağırın ve yalnızca bir argüman olarak referans vermek istediğiniz başlangıç değerini geçirin. Örneğin, değeri `0` olan bir ref: ```js const ref = useRef(0); ``` -`useRef` returns an object like this: +`useRef` size aşağıdaki gibi bir nesne döndürür: ```js { - current: 0 // The value you passed to useRef + current: 0 // useRef'a geçirdiğiniz değer } ``` - + -You can access the current value of that ref through the `ref.current` property. This value is intentionally mutable, meaning you can both read and write to it. It's like a secret pocket of your component that React doesn't track. (This is what makes it an "escape hatch" from React's one-way data flow--more on that below!) +Bu ref'in geçerli değerine `ref.current` özelliği üzerinden erişebilirsiniz. Bu değer kasıtlı olarak değiştirilebilir, yani hem okunabilir hem de yazılabilir. Bu bileşeninizin React tarafından takip edilmediği anlamına gelir. (Bu, onu React'in tek yönlü veri akışından kaçmanızı sağlayan bir "kaçış noktası" yapar, buna aşağıda daha fazla değineceğiz!) -Here, a button will increment `ref.current` on every click: +Her tıklamada `ref.current`'i artıracak bir düğme: @@ -55,12 +55,12 @@ export default function Counter() { function handleClick() { ref.current = ref.current + 1; - alert('You clicked ' + ref.current + ' times!'); + alert(ref.current + ' kez tıkladınız!'); } return ( ); } @@ -68,20 +68,20 @@ export default function Counter() { -The ref points to a number, but, like [state](/learn/state-a-components-memory), you could point to anything: a string, an object, or even a function. Unlike state, ref is a plain JavaScript object with the `current` property that you can read and modify. +Ref bir sayıyı işaret ediyor fakat [state](/learn/state-a-components-memory) gibi herhangi bir şeye işaret edebilirsiniz: bir string, bir nesne veya hatta bir fonksiyon. State'in aksine, ref, `current` özelliği olan basit bir JavaScript nesnesidir. Bu özelliği okuyabilir ve değiştirebilirsiniz. -Note that **the component doesn't re-render with every increment.** Like state, refs are retained by React between re-renders. However, setting state re-renders a component. Changing a ref does not! +Dikkat edin **ref her arttığında bileşen yeniden render edilmez.** State gibi, ref'ler de React tarafından yeniden render'lar arasında saklanır. Ancak, state'i değiştirmek bileşeni yeniden render eder. Bir ref'i değiştirmek etmez! -## Example: building a stopwatch {/*example-building-a-stopwatch*/} +## Örnek: bir kronometre oluşturma {/*example-building-a-stopwatch*/} -You can combine refs and state in a single component. For example, let's make a stopwatch that the user can start or stop by pressing a button. In order to display how much time has passed since the user pressed "Start", you will need to keep track of when the Start button was pressed and what the current time is. **This information is used for rendering, so you'll keep it in state:** +Ref'ler ve state'i tek bir bileşenin içinde birlikte kullanabilirsiniz. Örnegin, kullanıcının bir düğmeye basarak başlatabileceği veya durdurabileceği bir kronometre yapalım. Kullanıcının "Başlat" düğmesine bastığı zamandan beri geçen süreyi göstermek için, "Başlat" düğmesinin ne zaman basıldığını ve şu anki zamanı takip etmeniz gerekir. **Bu bilgi render etmek için kullanıldığından, onu state'te tutacaksınız:** ```js const [startTime, setStartTime] = useState(null); const [now, setNow] = useState(null); ``` -When the user presses "Start", you'll use [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval) in order to update the time every 10 milliseconds: +Kullanıcı "Başlat" düğmesine bastığında, zamanı her 10 milisaniyede bir güncellemek için [`setInterval`](https://developer.mozilla.org/docs/Web/API/setInterval) kullanacaksınız: @@ -93,12 +93,12 @@ export default function Stopwatch() { const [now, setNow] = useState(null); function handleStart() { - // Start counting. + // Saymaya başla setStartTime(Date.now()); setNow(Date.now()); setInterval(() => { - // Update the current time every 10ms. + // "now" state değişkenini her 10ms'de günceller. setNow(Date.now()); }, 10); } @@ -110,9 +110,9 @@ export default function Stopwatch() { return ( <> -

Time passed: {secondsPassed.toFixed(3)}

+

Geçen zaman: {secondsPassed.toFixed(3)}

); @@ -121,7 +121,8 @@ export default function Stopwatch() { -When the "Stop" button is pressed, you need to cancel the existing interval so that it stops updating the `now` state variable. You can do this by calling [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval), but you need to give it the interval ID that was previously returned by the `setInterval` call when the user pressed Start. You need to keep the interval ID somewhere. **Since the interval ID is not used for rendering, you can keep it in a ref:** +"Durdur" düğmesine basıldığında `now` state değişkeninin güncellenmesini durdurmak için varolan intervali iptal etmemiz gerekiyor. Bunu yapmak için [`clearInterval`](https://developer.mozilla.org/docs/Web/API/clearInterval) çağırmamız gerekiyor, ancak kullanıcı Başlat'a bastığında `setInterval` çağrısından dönen interval ID'sini vermeniz gerekir. Bu interval ID'yi bir yerde saklamanız gerekir. **Interval ID herhangi bir render işleminde kullanılmadığından, onu bir ref'te saklayabilirsiniz:** + @@ -154,12 +155,12 @@ export default function Stopwatch() { return ( <> -

Time passed: {secondsPassed.toFixed(3)}

+

Geçen zaman: {secondsPassed.toFixed(3)}

); @@ -168,20 +169,22 @@ export default function Stopwatch() { -When a piece of information is used for rendering, keep it in state. When a piece of information is only needed by event handlers and changing it doesn't require a re-render, using a ref may be more efficient. +Ne zaman bir bilgi render etmek için kullanılırsa, onu state'te tutun. Bir bilgi parçası yalnızca olay işleyicileri için gerekiyorsa ve değiştirmek bir yeniden render gerektirmiyorsa, bir ref kullanmak daha verimli olabilir. + +## Ref ve State arasındaki farklar {/*differences-between-refs-and-state*/} + +Muhtemelen ref'lerin state'ten daha "esnek" olduğunu düşünüyorsunuz. Örneğin, ref'leri state ayarlama fonksiyonu olmadan değiştirebilirsiniz. Ama çoğu zaman state kullanmak isteyeceksiniz. Ref'ler bir "kaçış noktası"dır ve bunlara çok fazla güvenmemelisiniz. State ve ref'ler arasındaki farkları görelim: -## Differences between refs and state {/*differences-between-refs-and-state*/} -Perhaps you're thinking refs seem less "strict" than state—you can mutate them instead of always having to use a state setting function, for instance. But in most cases, you'll want to use state. Refs are an "escape hatch" you won't need often. Here's how state and refs compare: | refs | state | | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -| `useRef(initialValue)` returns `{ current: initialValue }` | `useState(initialValue)` returns the current value of a state variable and a state setter function ( `[value, setValue]`) | -| Doesn't trigger re-render when you change it. | Triggers re-render when you change it. | -| Mutable—you can modify and update `current`'s value outside of the rendering process. | "Immutable"—you must use the state setting function to modify state variables to queue a re-render. | -| You shouldn't read (or write) the `current` value during rendering. | You can read state at any time. However, each render has its own [snapshot](/learn/state-as-a-snapshot) of state which does not change. +| `useRef(initialValue)` `{ current: initialValue }` döndürür. | `useState(initialValue)` state değişkeninin şuanki değerini ve bir state ayarlama fonksiyonu (`[value, setValue]`) döndürür. | +| Değiştirildiğinde yeniden render tetiklenmez. | Değiştirildiğinde yeniden render tetiklenir. | +| Değiştirilebilir; `current` değerini render işlemi dışında da değiştirilebilir ve güncelleyebilirsiniz. | Değiştirilemez; yeniden render tetiklemek için state değiştirme fonksiyonunu kullanmalısınız. | +| Render işlemi sırasında `current` değerini okumamalısınız (veya yazmamalısınız). | State'i her zaman okuyabilirsiniz. Ancak, her render'ın değişmeyen kendi [anlık görüntüsü](/learn/state-as-a-snapshot) vardır. | -Here is a counter button that's implemented with state: +State kullanılarak oluşturulmuş bir sayaç düğmesi: @@ -197,7 +200,7 @@ export default function Counter() { return ( ); } @@ -205,9 +208,9 @@ export default function Counter() { -Because the `count` value is displayed, it makes sense to use a state value for it. When the counter's value is set with `setCount()`, React re-renders the component and the screen updates to reflect the new count. +`count` değeri ekranda görüntülendiği için onu state'te tutmak mantıklıdır. Sayacın değeri `setCount()` ile ayarlandığında, React bileşeni yeniden render eder ve ekran yeni sayıyı yansıtır. -If you tried to implement this with a ref, React would never re-render the component, so you'd never see the count change! See how clicking this button **does not update its text**: +Eğer bunu ref kullanarak yapmaya çalışırsanız, React bileşeni yeniden render etmez ve sayıyı ekranda göremezsiniz! Bu düğmeye tıkladığınızda **sayı değişmez**: @@ -218,13 +221,13 @@ export default function Counter() { let countRef = useRef(0); function handleClick() { - // This doesn't re-render the component! + // Bu bileşeni yeniden render etmez! countRef.current = countRef.current + 1; } return ( ); } @@ -232,13 +235,14 @@ export default function Counter() { -This is why reading `ref.current` during render leads to unreliable code. If you need that, use state instead. +Bu yüzden render işlemi sırasında `ref.current` değerini okumak güvenilmez kod yazmanıza neden olur. Eğer bunu yapmanız gerekiyorsa, bunun yerine state kullanın. -#### How does useRef work inside? {/*how-does-use-ref-work-inside*/} +#### useRef nasıl çalışır? {/*how-does-use-ref-work-inside*/} + +`useState` ve `useRef` React tarafından sağlansa da, `useRef` prensipte `useState` üzerinde oluşturulabilir. React içinde `useRef`'in aşağıdaki gibi oluşturulduğunu hayal edebilirsiniz: -Although both `useState` and `useRef` are provided by React, in principle `useRef` could be implemented _on top of_ `useState`. You can imagine that inside of React, `useRef` is implemented like this: ```js // Inside of React @@ -248,52 +252,54 @@ function useRef(initialValue) { } ``` -During the first render, `useRef` returns `{ current: initialValue }`. This object is stored by React, so during the next render the same object will be returned. Note how the state setter is unused in this example. It is unnecessary because `useRef` always needs to return the same object! +İlk render sırasında, `useRef` `{ current: initialValue }` döndürür. Bu nesne React tarafından saklanır, bu yüzden bir sonraki render sırasında aynı nesne döndürülür. Bu örnekte state ayarlama fonksiyonunun kullanılmadığına dikkat edin. Her zaman aynı nesneyi döndürmesi gerektiği için gereksizdir! -React provides a built-in version of `useRef` because it is common enough in practice. But you can think of it as a regular state variable without a setter. If you're familiar with object-oriented programming, refs might remind you of instance fields--but instead of `this.something` you write `somethingRef.current`. +React `useRef`'i içinde sağladığı için, pratikte yeterince yaygındır. Fakat onu bir ayarlayıcı olmadan normal bir state değişkeni olarak düşünebilirsiniz. Nesne yönelimli programlamaya aşinaysanız, ref'ler size nesne değişkenlerini hatırlatabilir - fakat `this.something` yerine `somethingRef.current` yazarsınız. -## When to use refs {/*when-to-use-refs*/} +## Ref'ler ne zaman kullanılmalıdır? {/*when-to-use-refs*/} -Typically, you will use a ref when your component needs to "step outside" React and communicate with external APIs—often a browser API that won't impact the appearance of the component. Here are a few of these rare situations: +Genellikle, bileşeninizin React dışına çıkması ve harici API'lar (genellikle bileşenin görünümünü etkilemeyen bir tarayıcı API'si olabilir) ile iletişim kurması gerektiğinde bir ref kullanırsınız. -- Storing [timeout IDs](https://developer.mozilla.org/docs/Web/API/setTimeout) -- Storing and manipulating [DOM elements](https://developer.mozilla.org/docs/Web/API/Element), which we cover on [the next page](/learn/manipulating-the-dom-with-refs) -- Storing other objects that aren't necessary to calculate the JSX. +- [timeout ID'lerini](https://developer.mozilla.org/docs/Web/API/setTimeout) saklamak +- [DOM elemanlarını](https://developer.mozilla.org/docs/Web/API/Element) saklamak ve manipüle etmek. Bunu [bir sonraki sayfada](/learn/manipulating-the-dom-with-refs) ele alacağız. +- JSX'i hesaplamak için gerekli olmayan diğer nesneleri saklamak. -If your component needs to store some value, but it doesn't impact the rendering logic, choose refs. +Eğer bileşeninizin bir değeri saklaması gerekiyorsa, ancak render mantığını etkilemiyorsa, ref'leri seçin. -## Best practices for refs {/*best-practices-for-refs*/} +## Ref'ler için en iyi uygulamalar {/*refler-için-en-iyi-uygulamalar*/} -Following these principles will make your components more predictable: +Bu prensipleri takip etmek bileşenlerinizi daha öngörülebilir hale getirecektir: -- **Treat refs as an escape hatch.** Refs are useful when you work with external systems or browser APIs. If much of your application logic and data flow relies on refs, you might want to rethink your approach. -- **Don't read or write `ref.current` during rendering.** If some information is needed during rendering, use [state](/learn/state-a-components-memory) instead. Since React doesn't know when `ref.current` changes, even reading it while rendering makes your component's behavior difficult to predict. (The only exception to this is code like `if (!ref.current) ref.current = new Thing()` which only sets the ref once during the first render.) +- **Ref'lere bir kaçış noktası gibi davranın** Ref'ler harici sistemler veya tarayıcı API'ları ile çalışırken yararlıdır. Uygulamanızın mantığının ve veri akışının büyük bir kısmı ref'lere bağlıysa, yaklaşımınızı yeniden düşünmelisiniz. +- **Render işlemi sırasında `ref.current`'i okumayın veya yazmayın.** Render işlemi sırasında bazı bilgilere ihtiyaç duyuluyorsa, bunun yerine [state](/learn/state-a-components-memory) kullanın. React `ref.current`'in ne zaman değiştiğini bilmediği için, render işlemi sırasında okumak bileşeninizin davranışının tahmin edilmesini zorlaştırır. (Tek istisna `if (!ref.current) ref.current = new Thing()` gibi bir koddur, bu sadece ref'i ilk render sırasında bir kez ayarlar.) -Limitations of React state don't apply to refs. For example, state acts like a [snapshot for every render](/learn/state-as-a-snapshot) and [doesn't update synchronously.](/learn/queueing-a-series-of-state-updates) But when you mutate the current value of a ref, it changes immediately: + +React state'in kısıtlamaları ref'ler için geçerli değildir. Örneğin, state [her render için anlık görüntü](/learn/state-as-a-snapshot) gibi davranır ve [eşzamanlı olarak güncellenmez.](/learn/queueing-a-series-of-state-updates) Fakat bir ref'in geçerli değerini değiştirdiğinizde, hemen değişir: ```js ref.current = 5; console.log(ref.current); // 5 ``` -This is because **the ref itself is a regular JavaScript object,** and so it behaves like one. +Bunun nedeni **ref'in kendisi normal bir JavaScript nesnesi olması** ve öyle davranılmasıdır. -You also don't need to worry about [avoiding mutation](/learn/updating-objects-in-state) when you work with a ref. As long as the object you're mutating isn't used for rendering, React doesn't care what you do with the ref or its contents. + +Ayrıca bir ref ile çalışırken [mutasyondan kaçınmaya](/learn/updating-objects-in-state) gerek yoktur. Mutasyona uğrayan nesne render işlemi için kullanılmıyorsa, React ref veya içeriğiyle ne yaptığınızı umursamaz. -## Refs and the DOM {/*refs-and-the-dom*/} +## Ref'ler ve DOM {/*refs-and-the-dom*/} -You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `
`, React will put the corresponding DOM element into `myRef.current`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs) +Bir ref'i herhangi bir değere işaret edecek şekilde ayarlayabilirsiniz. Fakat ref'lerin en yaygın kullanımı DOM elemanlarına erişmektir. Örneğin, bir input'a programatik olarak odaklanmak istiyorsanız bu kullanışlıdır. JSX'te `ref` özelliğine bir ref geçtiğinizde, `
` gibi, React karşılık gelen DOM elemanını `myRef.current`'e koyar. Bunu [Ref'ler ile DOM'u Manipüle etme](/learn/manipulating-the-dom-with-refs) bölümünde daha fazla okuyabilirsiniz. -- Refs are an escape hatch to hold onto values that aren't used for rendering. You won't need them often. -- A ref is a plain JavaScript object with a single property called `current`, which you can read or set. -- You can ask React to give you a ref by calling the `useRef` Hook. -- Like state, refs let you retain information between re-renders of a component. -- Unlike state, setting the ref's `current` value does not trigger a re-render. -- Don't read or write `ref.current` during rendering. This makes your component hard to predict. +- Ref'ler render işlemi için kullanılmayan değerleri tutmak için kullanılan bir kaçış noktasıdır. Bunlara çok fazla ihtiyacınız olmayacak. +- Bir ref, `current` adında tek bir özelliği olan basit bir JavaScript nesnesidir. Bu özelliği okuyabilir veya ayarlayabilirsiniz. +- React'ten size bir ref vermesi için `useRef` Hook'unu çağırabilirsiniz. +- State gibi, ref'ler de bileşenler arasında yeniden render'lar arasında bilgi tutmanızı sağlar. +- State'in aksine, ref'in `current` değerini ayarlamak yeniden render tetiklemez. +- Render işlemi sırasında `ref.current`'i okumayın veya yazmayın. Bu bileşeninizi tahmin edilmesi zor hale getirir. @@ -301,13 +307,13 @@ You can point a ref to any value. However, the most common use case for a ref is -#### Fix a broken chat input {/*fix-a-broken-chat-input*/} +#### Bozuk sohbet inputunu düzelt {/*fix-a-broken-chat-input*/} -Type a message and click "Send". You will notice there is a three second delay before you see the "Sent!" alert. During this delay, you can see an "Undo" button. Click it. This "Undo" button is supposed to stop the "Sent!" message from appearing. It does this by calling [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) for the timeout ID saved during `handleSend`. However, even after "Undo" is clicked, the "Sent!" message still appears. Find why it doesn't work, and fix it. +Bir mesaj yazın ve "Gönder" düğmesine basın. "Gönderildi!" uyarısını görmek için üç saniye beklemeniz gerektiğini fark edeceksiniz. Bu gecikme sırasında "Geri Al" düğmesini görebilirsiniz. Ona tıklayın. Bu "Geri Al" düğmesinin "Gönderildi!" mesajının görünmesini durdurması gerekiyor. "Geri Al" düğmesi tıklandığında `handleSend` sırasında kaydedilen timeout ID ile [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) çağrısı yapıyor. Ancak, "Geri Al" tıklandıktan sonra bile "Gönderildi!" mesajı hala görünüyor. Neden çalışmadığını bulun ve düzeltin. -Regular variables like `let timeoutID` don't "survive" between re-renders because every render runs your component (and initializes its variables) from scratch. Should you keep the timeout ID somewhere else? +`let timeoutID` gibi değişkenler her render'da bileşeninizin yeniden çalıştırılmasıyla (ve değişkenlerinin sıfırlanmasıyla) birlikte "hayatta kalamaz". Timeout ID'yi başka bir yerde mi saklamalısınız? @@ -324,7 +330,7 @@ export default function Chat() { function handleSend() { setIsSending(true); timeoutID = setTimeout(() => { - alert('Sent!'); + alert('Gönderildi!'); setIsSending(false); }, 3000); } @@ -344,11 +350,11 @@ export default function Chat() { {isSending && } @@ -360,7 +366,7 @@ export default function Chat() { -Whenever your component re-renders (such as when you set state), all local variables get initialized from scratch. This is why you can't save the timeout ID in a local variable like `timeoutID` and then expect another event handler to "see" it in the future. Instead, store it in a ref, which React will preserve between renders. +Bileşeniniz tekrar render edildiğinde (örneğin state değiştirildiğinde) tüm yerel değişkenler sıfırlanır. Bu yüzden `timeoutID` gibi bir yerel değişkende timeout ID'sini kaydedemez ve sonra başka bir olay işleyicisinin gelecekte onu "görmesini" bekleyemezsiniz. Bunun yerine, React'in render'lar arasında koruyacağı bir ref'te saklayın. @@ -375,7 +381,7 @@ export default function Chat() { function handleSend() { setIsSending(true); timeoutRef.current = setTimeout(() => { - alert('Sent!'); + alert('Gönderildi!'); setIsSending(false); }, 3000); } @@ -395,11 +401,11 @@ export default function Chat() { {isSending && } @@ -412,9 +418,9 @@ export default function Chat() { -#### Fix a component failing to re-render {/*fix-a-component-failing-to-re-render*/} +#### Yeniden render edilemeyen bileşeni düzelt {/*fix-a-component-failing-to-re-render*/} -This button is supposed to toggle between showing "On" and "Off". However, it always shows "Off". What is wrong with this code? Fix it. +Bu düğme "Açık" ve "Kapalı" arasında geçiş yapmalıdır. Ancak her zaman "Kapalı" olarak gözüküyor. Bu kodda ne yanlış? Düzeltin. @@ -428,7 +434,7 @@ export default function Toggle() { ); } @@ -438,7 +444,7 @@ export default function Toggle() { -In this example, the current value of a ref is used to calculate the rendering output: `{isOnRef.current ? 'On' : 'Off'}`. This is a sign that this information should not be in a ref, and should have instead been put in state. To fix it, remove the ref and use state instead: +Bu örnekte bir ref'in geçerli değeri render çıktısını hesaplamak için kullanılıyor: `{isOnRef.current ? 'Açık' : 'Kapalı'}`. Bu, bu bilginin bir ref'te olmaması gerektiğinin ve bunun yerine state'e konması gerektiğinin bir işaretidir. Düzeltmek için ref'i kaldırın ve yerine state kullanın: @@ -452,7 +458,7 @@ export default function Toggle() { ); } @@ -462,17 +468,17 @@ export default function Toggle() { -#### Fix debouncing {/*fix-debouncing*/} +#### Debouncing'i düzeltin {/*fix-debouncing*/} -In this example, all button click handlers are ["debounced".](https://redd.one/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things". +Bu örnekte tüm düğme tıklama işleyicileri ["debounced"](https://redd.one/blog/debounce-vs-throttle). Bu ne anlama geldiğini görmek için bir düğmeye basın. Mesajın bir saniye sonra göründüğünü fark edeceksiniz. Mesajı beklerken düğmeye basarsanız, zamanlayıcı sıfırlanır. Yani aynı düğmeye hızlıca birkaç kez tıklamaya devam ederseniz, mesaj tıklamayı bıraktıktan bir saniye sonra görünecektir. Debouncing, kullanıcının "bir şeyler yapmayı durdurana kadar" bazı eylemleri geciktirmenizi sağlar. -This example works, but not quite as intended. The buttons are not independent. To see the problem, click one of the buttons, and then immediately click another button. You'd expect that after a delay, you would see both button's messages. But only the last button's message shows up. The first button's message gets lost. +Örnek çalışıyor fakat tam olarak istenildiği gibi değil. Düğmeler bağımsız değil. Problemi görmek için bir düğmeye basın ve hemen başka bir düğmeye basın. Biraz bekledikten sonra her iki düğmenin de mesajını görmeyi beklersiniz. Fakat sadece son düğmenin mesajı görünüyor. İlk basılan düğmenin mesajı kayboluyor. -Why are the buttons interfering with each other? Find and fix the issue. +Neden düğmeler birbirlerine karışıyor? Sorunu bulun ve düzeltin. -The last timeout ID variable is shared between all `DebouncedButton` components. This is why clicking one button resets another button's timeout. Can you store a separate timeout ID for each button? +Son timout ID değişkeni tüm `DebouncedButton` bileşenleri arasında paylaşılıyor. Bu yüzden bir düğmeye basmak başka bir düğmenin zamanlayıcısını sıfırlıyor. Her düğmede ayrı bir timeout ID değişkeni saklayabilir misiniz? @@ -498,19 +504,19 @@ export default function Dashboard() { return ( <> alert('Spaceship launched!')} + onClick={() => alert('Uzay gemisi fırlatıldı!')} > - Launch the spaceship + Uzay gemisini fırlat alert('Soup boiled!')} + onClick={() => alert('Çorba kaynadı!')} > - Boil the soup + Çorbayı kaynat alert('Lullaby sung!')} + onClick={() => alert('Ninni söylendi!')} > - Sing a lullaby + Ninni söyle ) @@ -525,7 +531,7 @@ button { display: block; margin: 10px; } -A variable like `timeoutID` is shared between all components. This is why clicking on the second button resets the first button's pending timeout. To fix this, you can keep timeout in a ref. Each button will get its own ref, so they won't conflict with each other. Notice how clicking two buttons fast will show both messages. +`timeoutId` değişkeni tüm bileşenler arasında paylaşılıyor. Bu yüzden ikinci düğmeye basmak ilk düğmenin bekleyen zamanlayıcısını sıfırlıyor. Bu sorunu çözmek için zamanlayıcıyı ref'te tutmalıyız. Her düğmenin kendi ref'i olacak, böylece birbirleriyle çakışmayacaklar. İki düğmeye hızlıca basarsanız, her ikisinin de mesajını göreceksiniz. @@ -549,20 +555,20 @@ function DebouncedButton({ onClick, children }) { export default function Dashboard() { return ( <> - alert('Spaceship launched!')} + alert('Uzay gemisi fırlatıldı!')} > - Launch the spaceship + Uzay gemisini fırlat alert('Soup boiled!')} + onClick={() => alert('Çorba kaynadı!')} > - Boil the soup + Çorbayı kaynat alert('Lullaby sung!')} + onClick={() => alert('Ninni söylendi!')} > - Sing a lullaby + Ninni söyle ) @@ -577,12 +583,11 @@ button { display: block; margin: 10px; } -#### Read the latest state {/*read-the-latest-state*/} - -In this example, after you press "Send", there is a small delay before the message is shown. Type "hello", press Send, and then quickly edit the input again. Despite your edits, the alert would still show "hello" (which was the value of state [at the time](/learn/state-as-a-snapshot#state-over-time) the button was clicked). +#### En son state'i oku {/*read-the-latest-state*/} -Usually, this behavior is what you want in an app. However, there may be occasional cases where you want some asynchronous code to read the *latest* version of some state. Can you think of a way to make the alert show the *current* input text rather than what it was at the time of the click? +Bu örnekte, "Gönder" düğmesine bastıktan sonra mesajın görüntülenmeden önce küçük bir gecikme bulunmaktadır. "Merhaba" yazın ve "Gönder" düğmesine basın, arından hızlıca girdiyi tekrar düzenleyin. Düzenlemenize rağmen uyarıda hala "Merhaba" yazıyor (bu, düğmeye basıldığında state'in [o anki](/learn/state-as-a-snapshot#state-over-time)) değeri idi. +Genellikle bu davranış uygulamada istediğinizdir. Ancak, bazen bazı asenkron kodun bazı state'in *en son* halini okumasını isteyebilirsiniz. Düğmeye basıldığı zaman input'taki değer neyse o değeri göstermek yerine, alert'in *şu anki* input değerini göstermesini sağlayacak bir yol düşünebilir misiniz? ```js @@ -593,7 +598,7 @@ export default function Chat() { function handleSend() { setTimeout(() => { - alert('Sending: ' + text); + alert('Gönderiliyor: ' + text); }, 3000); } @@ -605,7 +610,7 @@ export default function Chat() { /> ); @@ -616,7 +621,7 @@ export default function Chat() { -State works [like a snapshot](/learn/state-as-a-snapshot), so you can't read the latest state from an asynchronous operation like a timeout. However, you can keep the latest input text in a ref. A ref is mutable, so you can read the `current` property at any time. Since the current text is also used for rendering, in this example, you will need *both* a state variable (for rendering), *and* a ref (to read it in the timeout). You will need to update the current ref value manually. +State bir [anlık görüntü](/learn/state-as-a-snapshot) gibi çalıştığından, bir timeout gibi asenkron bir işlemden en son state'i okuyamazsınız. Ancak, en son input değerini bir ref'te tutabilirsiniz. Bir ref değiştirilebilir olduğundan, herhangi bir zamanda `current` özelliğini okuyabilirsiniz. Çünkü şu anki metin render etmek için de kullanılır, bu örnekte, *hem* bir state değişkenine (render etmek için) *hem de* bir ref'e ihtiyacınız olacak (timeout'ta okumak için). Şu anki ref değerini manuel olarak güncellemeniz gerekecek. @@ -634,7 +639,7 @@ export default function Chat() { function handleSend() { setTimeout(() => { - alert('Sending: ' + textRef.current); + alert('Gönderiliyor: ' + textRef.current); }, 3000); } @@ -646,7 +651,7 @@ export default function Chat() { /> ); From 2bd695eb085cbd98b71cf55ab1fed4c2d39f006d Mon Sep 17 00:00:00 2001 From: furkanmavili Date: Thu, 25 May 2023 18:05:38 +0300 Subject: [PATCH 2/3] update requested changes --- .../learn/referencing-values-with-refs.md | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index ec5c58276..38fe09564 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -17,7 +17,7 @@ Bir bileşenin "hatırlamasını" istediğiniz bilgi varsa, ancak bu bilginin [y -## Bir bileşene ref eklemek {/*adding-a-ref-to-a-component*/} +## Bir bileşene ref eklemek {/*adding-a-ref-to-your-component*/} Bileşeninize bir ref eklemek için, `useRef` Hook'unu React'ten içe aktarın: @@ -98,7 +98,7 @@ export default function Stopwatch() { setNow(Date.now()); setInterval(() => { - // "now" state değişkenini her 10ms'de günceller. + // Şuanki zamanı her 10ms'de bir güncelle. setNow(Date.now()); }, 10); } @@ -171,9 +171,9 @@ export default function Stopwatch() { Ne zaman bir bilgi render etmek için kullanılırsa, onu state'te tutun. Bir bilgi parçası yalnızca olay işleyicileri için gerekiyorsa ve değiştirmek bir yeniden render gerektirmiyorsa, bir ref kullanmak daha verimli olabilir. -## Ref ve State arasındaki farklar {/*differences-between-refs-and-state*/} +## Ref ve state arasındaki farklar {/*differences-between-refs-and-state*/} -Muhtemelen ref'lerin state'ten daha "esnek" olduğunu düşünüyorsunuz. Örneğin, ref'leri state ayarlama fonksiyonu olmadan değiştirebilirsiniz. Ama çoğu zaman state kullanmak isteyeceksiniz. Ref'ler bir "kaçış noktası"dır ve bunlara çok fazla güvenmemelisiniz. State ve ref'ler arasındaki farkları görelim: +Muhtemelen ref'lerin state'ten daha "esnek" olduğunu düşünüyorsunuz. Örneğin, ref'leri state ayarlama fonksiyonu olmadan değiştirebilirsiniz. Ama çoğu zaman state kullanmak isteyeceksiniz. Ref'ler çoğunlukla ihtiyacınız olmayan bir "kaçış noktası"dır. State ve ref'ler arasındaki farkları görelim: @@ -184,7 +184,7 @@ Muhtemelen ref'lerin state'ten daha "esnek" olduğunu düşünüyorsunuz. Örne | Değiştirilebilir; `current` değerini render işlemi dışında da değiştirilebilir ve güncelleyebilirsiniz. | Değiştirilemez; yeniden render tetiklemek için state değiştirme fonksiyonunu kullanmalısınız. | | Render işlemi sırasında `current` değerini okumamalısınız (veya yazmamalısınız). | State'i her zaman okuyabilirsiniz. Ancak, her render'ın değişmeyen kendi [anlık görüntüsü](/learn/state-as-a-snapshot) vardır. | -State kullanılarak oluşturulmuş bir sayaç düğmesi: +State kullanılarak oluşturulmuş bir sayaç buton'u: @@ -254,13 +254,13 @@ function useRef(initialValue) { İlk render sırasında, `useRef` `{ current: initialValue }` döndürür. Bu nesne React tarafından saklanır, bu yüzden bir sonraki render sırasında aynı nesne döndürülür. Bu örnekte state ayarlama fonksiyonunun kullanılmadığına dikkat edin. Her zaman aynı nesneyi döndürmesi gerektiği için gereksizdir! -React `useRef`'i içinde sağladığı için, pratikte yeterince yaygındır. Fakat onu bir ayarlayıcı olmadan normal bir state değişkeni olarak düşünebilirsiniz. Nesne yönelimli programlamaya aşinaysanız, ref'ler size nesne değişkenlerini hatırlatabilir - fakat `this.something` yerine `somethingRef.current` yazarsınız. +Pratikte yeterince yaygın olduğu için, React `useRef`'i içinde sağlar. Fakat onu bir ayarlayıcı olmadan normal bir state değişkeni olarak düşünebilirsiniz. Nesne yönelimli programlamaya aşinaysanız, ref'ler size nesne değişkenlerini hatırlatabilir - fakat `this.something` yerine `somethingRef.current` yazarsınız. ## Ref'ler ne zaman kullanılmalıdır? {/*when-to-use-refs*/} -Genellikle, bileşeninizin React dışına çıkması ve harici API'lar (genellikle bileşenin görünümünü etkilemeyen bir tarayıcı API'si olabilir) ile iletişim kurması gerektiğinde bir ref kullanırsınız. +Genellikle, bileşeninizin React "dışına çıkması" ve harici API'lar (genellikle bileşenin görünümünü etkilemeyen bir tarayıcı API'si olabilir) ile iletişim kurması gerektiğinde bir ref kullanırsınız. İşte bu nadir durumlara birkaç örnek: - [timeout ID'lerini](https://developer.mozilla.org/docs/Web/API/setTimeout) saklamak - [DOM elemanlarını](https://developer.mozilla.org/docs/Web/API/Element) saklamak ve manipüle etmek. Bunu [bir sonraki sayfada](/learn/manipulating-the-dom-with-refs) ele alacağız. @@ -268,7 +268,7 @@ Genellikle, bileşeninizin React dışına çıkması ve harici API'lar (genelli Eğer bileşeninizin bir değeri saklaması gerekiyorsa, ancak render mantığını etkilemiyorsa, ref'leri seçin. -## Ref'ler için en iyi uygulamalar {/*refler-için-en-iyi-uygulamalar*/} +## Ref'ler için en iyi pratikler {/*best-practices-for-refs*/} Bu prensipleri takip etmek bileşenlerinizi daha öngörülebilir hale getirecektir: @@ -283,7 +283,7 @@ ref.current = 5; console.log(ref.current); // 5 ``` -Bunun nedeni **ref'in kendisi normal bir JavaScript nesnesi olması** ve öyle davranılmasıdır. +Bunun nedeni **ref'in kendisi normal bir JavaScript nesnesi olması** ve öyle davranılmasıdır. Ayrıca bir ref ile çalışırken [mutasyondan kaçınmaya](/learn/updating-objects-in-state) gerek yoktur. Mutasyona uğrayan nesne render işlemi için kullanılmıyorsa, React ref veya içeriğiyle ne yaptığınızı umursamaz. @@ -307,9 +307,9 @@ Bir ref'i herhangi bir değere işaret edecek şekilde ayarlayabilirsiniz. Fakat -#### Bozuk sohbet inputunu düzelt {/*fix-a-broken-chat-input*/} +#### Bozuk bir sohbet inputunu düzelt {/*fix-a-broken-chat-input*/} -Bir mesaj yazın ve "Gönder" düğmesine basın. "Gönderildi!" uyarısını görmek için üç saniye beklemeniz gerektiğini fark edeceksiniz. Bu gecikme sırasında "Geri Al" düğmesini görebilirsiniz. Ona tıklayın. Bu "Geri Al" düğmesinin "Gönderildi!" mesajının görünmesini durdurması gerekiyor. "Geri Al" düğmesi tıklandığında `handleSend` sırasında kaydedilen timeout ID ile [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) çağrısı yapıyor. Ancak, "Geri Al" tıklandıktan sonra bile "Gönderildi!" mesajı hala görünüyor. Neden çalışmadığını bulun ve düzeltin. +Bir mesaj yazın ve "Gönder" butonunna basın. "Gönderildi!" uyarısını görmek için üç saniye beklemeniz gerektiğini fark edeceksiniz. Bu gecikme sırasında "Geri Al" butonunu görebilirsiniz. Ona tıklayın. Bu "Geri Al" butonunun "Gönderildi!" mesajının görünmesini durdurması gerekiyor. "Geri Al" butonuna tıklandığında `handleSend` sırasında kaydedilen timeout ID ile [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) çağrısı yapıyor. Ancak, "Geri Al" tıklandıktan sonra bile "Gönderildi!" mesajı hala görünüyor. Neden çalışmadığını bulun ve düzeltin. @@ -420,7 +420,7 @@ export default function Chat() { #### Yeniden render edilemeyen bileşeni düzelt {/*fix-a-component-failing-to-re-render*/} -Bu düğme "Açık" ve "Kapalı" arasında geçiş yapmalıdır. Ancak her zaman "Kapalı" olarak gözüküyor. Bu kodda ne yanlış? Düzeltin. +Bu buton "Açık" ve "Kapalı" arasında geçiş yapmalıdır. Ancak her zaman "Kapalı" olarak gözüküyor. Bu kodda ne yanlış? Düzeltin. @@ -444,7 +444,7 @@ export default function Toggle() { -Bu örnekte bir ref'in geçerli değeri render çıktısını hesaplamak için kullanılıyor: `{isOnRef.current ? 'Açık' : 'Kapalı'}`. Bu, bu bilginin bir ref'te olmaması gerektiğinin ve bunun yerine state'e konması gerektiğinin bir işaretidir. Düzeltmek için ref'i kaldırın ve yerine state kullanın: +Bu örnekte bir ref'in geçerli değeri render çıktısını hesaplamak için kullanılıyor: `{isOnRef.current ? 'Açık' : 'Kapalı'}`. Bu, ilgili bilginin bir ref'te olmaması gerektiğinin ve bunun yerine state'e konması gerektiğinin bir işaretidir. Düzeltmek için ref'i kaldırın ve yerine state kullanın: @@ -470,15 +470,15 @@ export default function Toggle() { #### Debouncing'i düzeltin {/*fix-debouncing*/} -Bu örnekte tüm düğme tıklama işleyicileri ["debounced"](https://redd.one/blog/debounce-vs-throttle). Bu ne anlama geldiğini görmek için bir düğmeye basın. Mesajın bir saniye sonra göründüğünü fark edeceksiniz. Mesajı beklerken düğmeye basarsanız, zamanlayıcı sıfırlanır. Yani aynı düğmeye hızlıca birkaç kez tıklamaya devam ederseniz, mesaj tıklamayı bıraktıktan bir saniye sonra görünecektir. Debouncing, kullanıcının "bir şeyler yapmayı durdurana kadar" bazı eylemleri geciktirmenizi sağlar. +Bu örnekte tüm buton tıklama işleyicileri ["debounce edilmiştir"](https://redd.one/blog/debounce-vs-throttle). Bunun ne anlama geldiğini görmek için bir butona basın. Mesajın bir saniye sonra göründüğünü fark edeceksiniz. Mesajı beklerken düğmeye basarsanız, zamanlayıcı sıfırlanır. Yani aynı düğmeye hızlıca birkaç kez tıklamaya devam ederseniz, mesaj tıklamayı bıraktıktan bir saniye sonra görünecektir. Debouncing, kullanıcının "bir şeyler yapmayı durdurana kadar" bazı eylemleri geciktirmenizi sağlar. -Örnek çalışıyor fakat tam olarak istenildiği gibi değil. Düğmeler bağımsız değil. Problemi görmek için bir düğmeye basın ve hemen başka bir düğmeye basın. Biraz bekledikten sonra her iki düğmenin de mesajını görmeyi beklersiniz. Fakat sadece son düğmenin mesajı görünüyor. İlk basılan düğmenin mesajı kayboluyor. +Örnek çalışıyor, fakat tam olarak istenildiği gibi değil. Butonlar birbirinden bağımsız değil. Problemi görmek için bir butona basın ve ardından hemen başka bir butona basın. Biraz bekledikten sonra her iki butonun de mesajını görmeyi beklersiniz. Fakat sadece son butonun mesajı görünüyor. İlk basılan butonun mesajı kayboluyor. -Neden düğmeler birbirlerine karışıyor? Sorunu bulun ve düzeltin. +Neden butonlar birbirini etkiliyor? Sorunu bulun ve düzeltin. -Son timout ID değişkeni tüm `DebouncedButton` bileşenleri arasında paylaşılıyor. Bu yüzden bir düğmeye basmak başka bir düğmenin zamanlayıcısını sıfırlıyor. Her düğmede ayrı bir timeout ID değişkeni saklayabilir misiniz? +Son timout ID değişkeni tüm `DebouncedButton` bileşenleri arasında paylaşılıyor. Bu yüzden bir butona basmak başka bir butonun zamanlayıcısını sıfırlıyor. Her butonda ayrı bir timeout ID değişkeni saklayabilir misiniz? @@ -531,7 +531,7 @@ button { display: block; margin: 10px; } -`timeoutId` değişkeni tüm bileşenler arasında paylaşılıyor. Bu yüzden ikinci düğmeye basmak ilk düğmenin bekleyen zamanlayıcısını sıfırlıyor. Bu sorunu çözmek için zamanlayıcıyı ref'te tutmalıyız. Her düğmenin kendi ref'i olacak, böylece birbirleriyle çakışmayacaklar. İki düğmeye hızlıca basarsanız, her ikisinin de mesajını göreceksiniz. +`timeoutId` değişkeni tüm bileşenler arasında paylaşılıyor. Bu yüzden ikinci butona basmak ilk butonun bekleyen zamanlayıcısını sıfırlıyor. Bu sorunu çözmek için zamanlayıcıyı ref'te tutmalıyız. Her butonun kendi ref'i olacak, böylece birbirleriyle çakışmayacaklar. Dikkat ederseniz, iki butona hızlıca basmak her ikisinin de mesajını gösterecektir. From 272a3af18aeac04406e61ee3dfbc54afed07b876 Mon Sep 17 00:00:00 2001 From: furkanmavili Date: Thu, 25 May 2023 18:12:52 +0300 Subject: [PATCH 3/3] fix typo --- src/content/learn/referencing-values-with-refs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 38fe09564..ecd23dfe0 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -283,7 +283,7 @@ ref.current = 5; console.log(ref.current); // 5 ``` -Bunun nedeni **ref'in kendisi normal bir JavaScript nesnesi olması** ve öyle davranılmasıdır. +Bunun nedeni **ref'in kendisinin normal bir JavaScript nesnesi olması** ve öyle davranılmasıdır. Ayrıca bir ref ile çalışırken [mutasyondan kaçınmaya](/learn/updating-objects-in-state) gerek yoktur. Mutasyona uğrayan nesne render işlemi için kullanılmıyorsa, React ref veya içeriğiyle ne yaptığınızı umursamaz. @@ -309,7 +309,7 @@ Bir ref'i herhangi bir değere işaret edecek şekilde ayarlayabilirsiniz. Fakat #### Bozuk bir sohbet inputunu düzelt {/*fix-a-broken-chat-input*/} -Bir mesaj yazın ve "Gönder" butonunna basın. "Gönderildi!" uyarısını görmek için üç saniye beklemeniz gerektiğini fark edeceksiniz. Bu gecikme sırasında "Geri Al" butonunu görebilirsiniz. Ona tıklayın. Bu "Geri Al" butonunun "Gönderildi!" mesajının görünmesini durdurması gerekiyor. "Geri Al" butonuna tıklandığında `handleSend` sırasında kaydedilen timeout ID ile [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) çağrısı yapıyor. Ancak, "Geri Al" tıklandıktan sonra bile "Gönderildi!" mesajı hala görünüyor. Neden çalışmadığını bulun ve düzeltin. +Bir mesaj yazın ve "Gönder" butonuna basın. "Gönderildi!" uyarısını görmek için üç saniye beklemeniz gerektiğini fark edeceksiniz. Bu gecikme sırasında "Geri Al" butonunu görebilirsiniz. Ona tıklayın. Bu "Geri Al" butonunun "Gönderildi!" mesajının görünmesini durdurması gerekiyor. "Geri Al" butonuna tıklandığında `handleSend` sırasında kaydedilen timeout ID ile [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout) çağrısı yapıyor. Ancak, "Geri Al" tıklandıktan sonra bile "Gönderildi!" mesajı hala görünüyor. Neden çalışmadığını bulun ve düzeltin.