React Hook'larını Kullanarak State Control Nasıl Oluşturulur? İçeriğimizde, React Hook'larını kullanarak state control oluşturmanın yollarını öğrenebilirsiniz State controlünüzü optimize etmek için hemen tıklayın!

Bu makalede React Hook'larının kullanımı ile Component state'inin nasıl kontrol edileceği tartışılacaktır. React Hook'ları, React uygulamalarında state yönetimini kolaylaştıran fonksiyonlardır. useState Hook'u, state değerini ve onu güncellemek için bir fonksiyonu döndürür. useEffect Hook'u, componentin render edilmesinden sonra çalıştırılacak bir fonksiyonu çağırmak için kullanılır. useContext Hook'u, React Context API'ını kullanarak componentler arasında değerlerin paylaşımını basitleştirir. useReducer Hook'u, useState yerine daha kapsamlı bir state yönetim çözümü sunar. useCallback Hook'u, componentlerin hatırlanabilecek bir fonksiyon elde etmesine olanak tanır. useMemo Hook'u, hesaplama yoğun olan fonksiyonların hatırlanabileceği şekilde optimize edilmesine olanak tanır. useRef Hook'u, bir component içindeki bir değişkenin değerini tutmak için kullanılır. useImperativeHandle Hook'u, bir componentin state'ine erişimi kolaylaştırır.

React Hook Nedir?

React Hooklar, React uygulamalarında kullanılan state ve lifecycle methods gibi özelliklerin kullanımını kolaylaştıran fonksiyonlardır. Hooklar, state yönetimindeki zorlukları ve sınıfların karmaşıklığını azaltarak, React uygulamalarının daha okunaklı ve daha kolay anlaşılır olmasını sağlar.

Hooks, React uygulamalarının kod tekrarını azaltmak ve bileşenler arasındaki iletişimi kolaylaştırmak için kullanılır. State yönetimi ve lifecycle methods gibi özellikler, React uygulamalarının ana bileşenlerinden biridir ve Hooklar, bu özellikleri daha da güçlendirerek, daha hızlı ve daha efficient uygulamalar geliştirilmesine olanak tanır.

useState Hook'u

useState Hook'u, React Hooklarının anahtar özelliklerinden biridir. Bu hook ile bir componentin state'i kontrol edilebilir ve güncellenebilir. Klasik React class componentlerindeki setState metodu yerine kullanılır.

useState, bir dizi değişken döndürür. İlk değişken, state değeridir ve ikinci değişken ise state'i güncellemek için kullanılan bir fonksiyondur. Bu fonksiyon, state değerini günceller ve componentin yeniden render edilmesini sağlar.

Bir örnek olarak, useState kullanarak bir sayacı tutan bir counter componenti şu şekilde oluşturulabilir:

• useState ile state değeri olan bir count değişkeni tanımlandı ve useState(0) ile başlangıç değeri 0 olarak atandı.
• setCount fonksiyonu, state değerini güncelleme işlemini yapar. Bu örnekte, count değişkeni her tıklamada 1 artırılır.
• onClick event ile button elementine tıkladığımızda setCount fonksiyonu çağırılır ve count değişkeni güncellenir.

useState Hook'u kullanarak component state'i kontrol edebilir ve kullanıcının sayfa etkileşimlerine yanıt verebilirsiniz.

useState Nasıl Kullanılır?

useState Hook'u, React componentlerinde state kontrolünü sağlayan fonksiyonlardan biridir. Kullanımı oldukça basittir. useState, bir dizi değişkene sahip bir diziyi döndürür. Bu değişkenlerden ilki, state değişkenin kendisidir, ikincisi ise state'i güncellemek için kullanılan bir fonksiyondur.

useState kullanarak bir count state'i tutan bir counter componenti şöyle oluşturulabilir:

Yukarıdaki örnekte, count değişkenimiz başlangıçta 0 olarak tanımlanmıştır. setCount fonksiyonu, count değişkeninin değerini artırmak veya azaltmak için kullanılabilir.

useState Hook'u, componentlerin daha yönetilebilir ve okunaklı olmasını sağlayarak React uygulamalarının geliştirme sürecini daha kolay hale getirir.

useState Örneği

useState kullanarak bir sayacı tutan bir counter componenti oluşturmak oldukça basittir. Bu örnekte, component içinde bir state değeri olan "count" değişkeni tutulacak ve bu sayacın güncellenmesi için "setCount" fonksiyonu kullanılacaktır.

Öncelikle useState hook'u kullanarak bir state değeri oluşturulur. Yukarıdaki örnekte, başlangıç değeri olarak "0" verilir. Bu sayacın başlangıç değeri olarak sıfır olarak ayarlanır.

Sonra, count değeri component içinde kullanılabilir. Örneğin, bir buton componenti kullanarak sayacı artırabiliriz. Bu butonun onClick eventi kullanılarak, setCount fonksiyonu aracılığıyla sayacın değeri güncellenebilir. Bu sayede, her butona bir kez tıklandığında, sayacın değeri bir artar.

useEffect Hook'u

useEffect Hook'u Nedir?

Bildiğimiz gibi, React componentleri, kullanıcının girdileri veya dış kaynaklı veriler tarafından değiştirilebilen bir state yönetim sistemiyle çalışır. Fakat, bazen bazı side effects'in (örneğin API'den veri çekmek gibi) herhangi bir state değişikliklerine bağlı olmayan suppler işlemlerinin yerine getirilmesi gerekebilir. İşte burada useEffect hook'u devreye girer.

Bir component render edildiğinde, useEffect çağrısında belirtilen fonksiyon çalıştırılır. Bu fonksiyon, componentteki herhangi bir state değişikliğinden bağımsız olarak bir kez çalıştırılır.

useEffect, temizleme fonksiyonu döndüren bir ikili tuple döndürür. Bu temizleme fonksiyonu, component tekrar render edilirken veya component tamamen kaldırılırken çağrılır. Bu fonksiyon, önceki useEffect çağrısında işlem yapılan css classları veya event listeneleri gibi bellekteki gereksiz kısımları kaldırmak için kullanılabilir.

useEffect Nasıl Kullanılır?

useEffect, React component'inin render edilmesinden sonra çalıştırılacak bir fonksiyonu çağırmak için kullanılır. useEffect kullanırken iki parametre kullanılır. Birinci parametre, çalıştırılacak fonksiyondur, ikinci parametre ise fonksiyonun hangi durumlarda çalıştırılacağını belirler. Bu durumlar, array şeklinde, ikinci parametrede belirtilir.

Bir custom hook kullanarak useEffect kullanımını şu şekilde gösterebiliriz:

useEffect(() => {  console.log('Component mount edildi');}, [])      

Burada, useEffect'in ikinci parametresinde boş bir dizi var. Bu, useEffect sadece component mount edildiğinde çalışacak anlamına gelir.

Bir diğer örnek:

useEffect(() => {  console.log('Component yeniden render edildi');})      

Burada, useEffect'in ikinci parametresi yok. Bu, useEffect'in tüm state veya props değiştiğinde yeniden render edildiğinde çalışacağı anlamına gelir.

Bir örnek daha:

useEffect(() => {  console.log('Username değişti');}, [username])      

Burada, useEffect'in ikinci parametresinde username değişkeni var. Bu, useEffect'in sadece username değiştiğinde çalışacağı anlamına gelir.

useEffect ile ilgili olarak bilmeniz gereken son bir şey, useEffect'in bir clean-up işlevi var. Clean-up işlevi, useEffect fonksiyonundan önceki işlemleri temizler. Kendi özel bir clean-up işlevinizi de yazabilirsiniz.

useEffect Örneği

useEffect Hook'u, React componentinin render edildikten sonra çalıştırılacak bir fonksiyonu çağırmak için kullanılır. Bu örnek, useEffect kullanarak bir API'den veri çeken bir component nasıl yazacağımızı göstermektedir.

İlk olarak, useEffect Hook'unu import ediyoruz:

import React, { useState, useEffect } from 'react';

Sonra, bir fetchData() fonksiyonu yazıyoruz, API'den verileri çeker ve state'i günceller:

const fetchData = async () => { const data = await fetch(url); setData(data); }

Son olarak, useEffect Hook'u kullanarak fetchData() fonksiyonunu çağırmamız gerekiyor:

useEffect(() => { fetchData() }, [url]);

Bu, component render edildikten sonra sadece bir kez fetchData() fonksiyonunu çağıracaktır. Ayrıca, [url] array'i, fonksiyonun hangi durumlarda çalıştırılacağını belirler. Bu örnekte, url değeri değiştirildiğinde useEffect, fetchData fonksiyonunu tekrar çağıracaktır.

useContext Hook'u

React Hooklarının en popülerlerinden biri olan useContext Hook'u, componentler arasında değerlerin paylaşımını kolaylaştırır. Bu Hook sayesinde, bir component içinde tanımlanan bir state, başka bir componentte kullanılabilir.

useContext Hook'u kullanırken, öncelikle paylaşılan değerlerin bulunduğu bir Context objesi oluşturulur. Bu obje, createContext() metodu ile oluşturulur. createContext() metodu, objeler için bir konteyner yaratır ve bu konteyneri return eder. Bu obje, useContext Hook'u ile kullanılabilir.

Bir örnek üzerinden açıklamak gerekirse, birçok componentte kullanılacak olan bir tema değeri belirlemiş olsak:

const ThemeContext = createContext('light');

Bu Context objesi, light tema ile oluşturulur. Bu objeyi kullanarak, componentlerde tema değeri kolayca paylaşılabilir:

function App() {  return (    <ThemeContext.Provider value="dark">      <Navigation />      <Content />    </ThemeContext.Provider>  );}

Yukarıdaki örnekte, App componentinde ThemeContext.Provider ile tema değeri belirlenir. Navigation ve Content componentlerinde, ThemeContext objesi useContext Hook'u ile kullanılabilir:

const theme = useContext(ThemeContext);
return (  <div className={`button ${theme === 'light' ? 'light-theme' : 'dark-theme'}`}>    {props.children}  </div>);

Bu şekilde, useContext Hook'u ile componentler arasındaki değerlerin paylaşımı kolaylaşır ve state yönetimi daha efektif hale gelir.

useContext Nasıl Kullanılır?

useContext Hook'u, Componentler arasında değerleri paylaşmak için React Context API'ını kullanır. Bu API, Componentler arasında veri akışını basitleştirir ve açıkça belirtilmedikçe, hiyerarşide herhangi bir Componentin altındaki Componentler tarafından kullanılabilir.

Bir Context oluşturmak için createContext() methodunu kullanın ve bir başlangıç değeri sağlayın. useContext Hook'u ile Context objesine erişebiliriz ve current değerine erişebiliriz. Örneğin, bir tema uygulaması için bir ThemeContext objesi oluşturabilir ve tema ayarlarını depolayabiliriz.

        const ThemeContext = createContext('light');                function App() {          return (                                                );        }                function Toolbar() {          const theme = useContext(ThemeContext);          return (            
                              {theme === 'dark' ? 'Dark' : 'Light'} Theme                          
          );        }      

Burada, App componenti içinde bir ThemeContext.Provider oluşturarak, theme ayarlarını dark olarak belirledik. Toolbar componenti içinde useContext Hook'u kullanarak, ThemeContext objesine erişip, theme ayarlarını alıyoruz.

useContext Örneği

React useContext Hook'u, bir parent componentinde tanımlanan bir state'in başka hiçbir component tarafından paylaşılmasını sağlar. Bu sayede componentler arasında veri paylaşımı basitleştirilir. Bir örnek ile açıklamak gerekirse, bir web uygulamasında tema seçimi yapan bir componentimiz olduğunu düşünelim.

Bu component, tema seçimini state olarak tutar ve bu state'e erişebilmek için useContext Hook'u kullanılır. Yani bir ThemeContext oluşturulur ve bu component içindeki ThemeContext.Provider üzerinde, tema state'i value olarak geçirilir.

Sonrasında, tema state'ine ihtiyaç duyan herhangi bir child componenti useContext Hook'u kullanarak tema state'ine erişebilir. Bu sayede her componentin kendi tema state'ini tutması gerekmez. Örneğin, bir header componentindeki logo için kullanılacak icon'un rengi değişeceği zaman, header componenti useContext Hook'u kullanarak tema state'ine erişebilir ve icon'un rengini tema state'ine göre ayarlayabilir. Bu da kod tekrarını önlemeye yardımcı olur ve uygulama performansını arttırır.

Yukarıdaki örnekte de görüldüğü gibi, useContext Hook'u kullanarak, bir tema componenti kolayca oluşturulabilir. Bu component, ThemeContext'deki tema state'ine erişebilir ve tema değiştikçe otomatik olarak yeniden render edilebilir. Bu sayede, uygulamanın teması kolaylıkla değiştirilebilir ve her componentin kendi tema state'lerini tutmasına gerek kalmaz.

useReducer Hook'u

useState, basit bir state yönetimi için yeterliyken, daha karmaşık durumlarda useReducer kullanmak daha etkili olabilir. useReducer, bir reducer fonksiyonu ve başlangıç state değeri alarak bir state yönetim sistemi sağlar. Reducer, state ve action objelerini alıp yeni state'i döndürür. Bu sayede, daha karmaşık bir state yapısına sahip olan componentlerde değişiklikleri kolaylıkla yönetebilirsiniz.

Örneğin, bir form component'i yazarken useReducer kullanarak state yönetimi sağlayabilirsiniz. initialState olarak, form verilerinin boş değerlerle başlatılabileceği bir nesne oluşturulabilir. Reducer fonksiyonu ise, action objesinde belirtilen veriye göre state'i güncelleyebilir. Bu sayede, formdaki değişiklikleri takip etmek ve formun son halini almak gibi işlemler kolaylıkla yapılabilir.

useReducer Nasıl Kullanılır?

useReducer Hook'u, state yönetiminde daha kapsamlı bir çözüm sunar. Bunun için bir reducer fonksiyonu ve başlangıç state değeri alınır. Reducer fonksiyonu, mevcut state ile bir action objesi alır ve yeni bir state döndürür.

İşlev, bir switch ifadesi içinde bir dizi case ifadesi kullanarak action objesine bağlı olarak farklı state değişiklikleri gerçekleştirir. Bu sayede state işlemleri daha organize hale getirilir ve daha kolay anlaşılır hale gelir. Ayrıca, useState'den farklı olarak, useReducer Hook'u nesne veya dizi halindeki state içeriğiyle de kullanılabilir.

Yukarıdaki örnekte, bir Counter componenti kullanılarak, useReducer Hook'uyla sayacın arttırılması veya azaltılması işlemi gerçekleştirilir. Reducer fonksiyonu, action objesine bağlı olarak state'in güncellenme sürecini işler. Bu sayede kod bloğu daha organize hale getirilir ve daha hızlı bir şekilde anlaşılır.

useReducer Örneği

React Hooklarından biri olan useReducer, useState yerine daha kapsamlı bir state yönetim çözümü sunar. Bu Hook, bir reducer fonksiyonu ve başlangıç state değeri alır. Reducer, state ve action objesi alır ve yeni state'i döndürür. useState kullanımında state'i güncellemek için ayrı bir fonksiyon kullanılırken, useReducer kullanımında state update'leri reducer fonksiyonu tarafından yönetilir.

Bir form componenti kullanılarak useReducer kullanımı açıklanabilir. Form componenti, handleSubmit fonksiyonunu tetiklerken, içerisindeki verileri API'ya post eder. Bu fonksiyondan önce, useReducer ile state yönetimi sağlanır. Örnek olarak, bir kullanıcının adı, soyadı ve e-posta bilgileri bir formda gönderilebilir. State'in başlangıç değeri aşağıdaki gibi tanımlanır:

Reducer fonksiyonu, state değişikliklerini yönetir ve yeni state'i döndürür. Dispatch fonksiyonu, reducer fonksiyonunu tetikler ve yeni state'i günceller. Örneğin:

const [state, dispatch] = useReducer(reducer, initialState);const handleSubmit = e => {  e.preventDefault();  dispatch({type: 'formSubmit', payload: {firstName, lastName, email}});};

Reducer fonksiyonu, formSubmit action'ı ile çağrılır ve yeni state, reducer fonksiyonu aracılığıyla güncellenir. Yeni state, aşağıdaki örnekteki gibi tanımlanabilir:

const reducer = (state, action) => {  switch (action.type) {    case 'formSubmit':      return {        ...state,        firstName: action.payload.firstName,        lastName: action.payload.lastName,        email: action.payload.email      };    default:      return state;  }};

Bu kullanım ile, useState kullanarak state yönetimi yerine useReducer kullanımı tercih edilebilir. Ancak, küçük boyutlu state değişiklikleri için useState kullanımı daha uygun olabilir.

useCallback Hook'u

useCallback Hook'u, React Hook'larının bir diğer kullanışlı özelliğidir. Bu Hook, componentlere hatırlanabilecek bir fonksiyon elde etme imkanını sağlar. Aynı callback fonksiyonunun, farklı componentler tarafından kullanılması gerektiği durumlarda useCallback çok işe yarar.

useCallback, bir fonksiyon ve bir dizi dependency alır. Bu dependency'ler değiştiğinde, useCallback yeni bir fonksiyon döndürür. Böylece önbelleğinde tuttuğu bu fonksiyon sayesinde componentlerin yeniden render edilmesini engeller. useMemo Hook'u gibi işleyen useCallback, state veya props değiştiğinde güncellenen componentler için performans artışı sağlar.

useCallback kullanarak bir memoized fonksiyon örneği şu şekildedir:

const memoizedAdd = useCallback(() => {
  return a + b;
}, [a, b]);

useCallback Nasıl Kullanılır?

useCallback Hook'u, React componentleri için optimize edilmiş bir fonksiyon hatırlama mekanizmasını sunar. Bunu yapmak için, useCallback fonksiyonu, bir fonksiyon ve bir dizi dependency parametresi alır. Dependenciler değiştiğinde, useCallback yeni bir fonksiyon döndürür.

useCallback, state değiştiğinde bile fonksiyonun her seferinde oluşturulmasını önleyerek React'in performansını iyileştirir. Ayrıca, useCallback ile hatırlanan bir fonksiyona işlemler uygulamak oldukça kolaydır.

useCallback'ı bir örnekle açıklayacak olursak, bir event listener fonksiyonu yazmak istediğinizi düşünelim. Bu event listener'ın belirli dependency'lere ihtiyacı vardır (örneğin, bazı state değişkenlerine). Bu nedenle, useCallback'i kullanarak bu event listener fonksiyonunu optimize edebilirsiniz. Bu sayede, dependency'ler değiştiğinde bile aynı fonksiyonu kullanabilir ve her seferinde yeni bir fonksiyon oluşturmak zorunda kalmazsınız.

useCallback'in kullanımı oldukça basittir. İlk parametre olarak hatırlanacak fonksiyonu, ikinci parametre olarak ise dependency listesi vermeniz yeterlidir. Dependency listesi olarak genellikle state değişkenleri kullanılır.

Örnek olarak;

const memoizedAdd = useCallback(() => { return a + b;}, [a, b]);

Bu örnekte, useCallback ile hatırlanan fonksiyon, argümanları a ve b olan ve onların toplamını döndüren bir fonksiyondur. useCallback'in ikinci parametresine de a ve b state değişkenleri verilmiştir. Bu, useCallback'in sadece a veya b dependency'lerinden biri değiştiğinde yeni bir fonksiyon oluşturmasını sağlar.

useCallback Örneği

Callback fonksiyonları, React componentlerinde çokça kullanılır. Fakat bu fonksiyonlar sık sık tekrar oluşturulur ve performans sorunlarına sebep olabilirler. Bu noktada useCallback Hook'u, bir componentin hatırlanabilecek bir fonksiyon elde etmesine olanak tanır.

Örneğin, iki değeri toplayan bir fonksiyon yazmak istediğimizi varsayalım. Bu fonksiyon, ilgili iki değişken her güncellendiğinde her seferinde tekrar oluşturulacaktır. Bu durum, performans kaybına sebep olur. useCallback kullanarak bu fonksiyonu bir kere oluşturarak performans kaybını önleyebiliriz.

useMemo Hook'u

useMemo Hook'u, React uygulamalarında hesaplama yoğun olan fonksiyonlar için optimize edilmiş bir çözümdür. Bu Hook, hesaplama süresinin uzun olduğu durumlarda, fonksiyonların hafızada saklanmasını sağlayarak, tekrar tekrar hesaplama yapmak yerine kaydedilen sonuçları kullanabilirsiniz. Bu da uygulamanın performansını artırır.

useMemo'nun kullanımı oldukça basittir. İlk parametresi, hesaplamayı içeren fonksiyondur, ikinci parametresi ise hesaplamanın yapılması için kullanılan dependency'leri içeren bir diziye denktir. Bu dependency'ler değişirse, useMemo hook'u yeni bir hesaplama yapar ve sonucunu günceller. Özetle, useMemo Hook'u, uygulamanın performansını artırmak için yararlı bir araçtır. Özellikle büyük veri setleri ile çalışırken çok faydalıdır.

useMemo Nasıl Kullanılır?

useMemo Hook'u, hesaplama yoğun olan fonksiyonların hatırlanabileceği şekilde optimize edilmesine olanak tanır. Bu sayede, gereksiz tekrar hesaplama yapmak yerine önceki hesaplamanın sonucu hatırlanarak işlem yapılması mümkün olur.

useMemo, bir fonksiyon ve bir dizi dependency alır. Bu dependency'ler değiştiğinde, useMemo yeni bir değer döndürür. Depencency'ler, useMemo'nun takip ettiği değerlerdir ve değişiklikleri izleyerek hesaplamayı tetiklerler.

Bir örnek vermek gerekirse, bir component içinde hesaplama yoğun bir fonksiyon kullanıyorsak, her render işlemi sırasında fonksiyon tekrar tekrar çalıştırılır ve gereksiz yere işlem gücü tüketilir. Bunun yerine, useMemo kullanarak önceki hesaplamanın sonucu hatırlanarak kullanılması mümkün hale getirilebilir.

Yukarıda verilen örnekte, useMemo kullanılarak hesaplama işleminin sonucu hatırlanarak kullanılabilir hale getirilmiştir. useMemo'nun aldığı dependency'ler olan a ve b değiştiğinde, useMemo yeni bir değer döndürecektir.

useMemo Örneği

useMemo Hook'u, hesaplama yoğun olan fonksiyonların hatırlanabileceği şekilde optimize edilmesine olanak tanır. useMemo, bir fonksiyon ve bir dizi dependency alır. Bu dependency'ler değiştiğinde, useMemo yeni bir değer döndürür.

Bir hesaplama işleminin optimizasyonu için useMemo kullanarak şöyle bir örnek yazılabilir:

Bu örnekte, useMemo kullanarak doExpensiveCalculation fonksiyonunun optimize edilmesi sağlanır. useMemo, değişkenler olan a ve b'nin değişip değerleri güncellendiğinde, yeniden hesaplamaya gerek kalmadan önceki sonucu (50) dolaylı olarak hatırlar. Böylece, gereksiz yere tekrarlanan hesaplamalar önlenebilir ve uygulama performansı arttırılabilir.

useRef Hook'u

React Hookları arasında yer alan useRef, component içindeki bir değişkenin değerini hatırlamak için kullanılır. Bu sayede, component'in render olması sırasında bile değişkenin değerini koruyabilir ve kullanabilirsiniz.

Bir örnek vermek gerekirse, bir input elementine focus vermek istediğinizde useRef kullanabilirsiniz. useRef ile bir referans oluşturduğunuz input elementine focus vermek istediğinizde, input elementi render olmadan focus alacaktır. Örneğin:

import React, { useRef } from 'react';function InputWithFocusButton() {  const inputEl = useRef(null);  const onButtonClick = () => {    // `current` nulldan farklıdır, çünkü useRef bir mutable değişken hizmeti görür.    inputEl.current.focus();  };  return (    <>            Input'a Focus Ver      );}

Bu örnekte, useRef kullanarak bir input elementine bir referans oluşturduk. Bu referansı, daha sonra input elementine focus vermek için kullanabiliriz. inputEl.current.focus() satırı input elementine focus vermeyi sağlar.

useRef, component içinde başka bir değişken hatırlamak için de kullanılabilir. Örneğin, component'in render sırasında güncellenmesi istenmeyen bir değişken (ör. animasyon durumu) için useRef kullanılabilir.

useRef Nasıl Kullanılır?

useRef, React Hook'ları arasında, bir component içindeki bir değişkenin değerini tutmak için kullanılır. useRef, bir değer alır ve bu değeri etkileyen değişiklikler, componentin render işlemi sırasında etkisi olmaz.

useRef'in en yaygın kullanımı, bir DOM elementine erişmek ve onun üzerinde bir işlem yapmaktır. useRef kullanarak bir input elementine focus verme işlemi şöyle yazılabilir:

const inputRef = useRef();inputRef.current.focus();

Bu örnekte, useRef ile bir input elementine referans oluşturduk ve inputRef.current.focus() kullanarak, o elemente focus verdik.

Ayrıca useRef, bir componentin state'ine de erişimi kolaylaştırır. Örneğin, aşağıdaki örnekte useImperativeHandle Hook'u da kullanılarak, bir child component içindeki bir fonksiyona erişim sağlanır:

useImperativeHandle(ref, () => ({    focusInput: () => {        inputRef.current.focus();    }}));

Bu örnekte useImperativeHandle, useRef ile oluşturulan input elementine referans oluşturarak, focusInput adlı bir fonksiyon döndürür. Daha sonra parent componentte, child componentin bu fonksiyonuna erişim sağlanarak input elementine focus verme işlemi gerçekleştirilir.

useRef Örneği

useRef Hook'u, component içerisinde bir değer tutmak için kullanılır. Bu örnekte useRef kullanılarak bir input elementine focus vermek için şöyle bir kod bloğu oluşturulabilir:

Yukarıdaki kod bloğunda, useRef ile bir input elementi referansı oluşturulur ve daha sonra bu referans üzerinden focus metodunu çağırarak, input elementine odaklanılır.

useImperativeHandle Hook'u

useImperativeHandle Hook'u, bir componentin state'ine erişimi kolaylaştırmayı amaçlayan bir Hook'tur. Bazen, parent component, çocuk componentinin state'ine erişmek veya işlemler yapmak isteyebilir. Bu durumda useImperativeHandle kullanılabilir.

useImperativeHandle, bir ref objesi alır ve onun üzerinde işlemler yapılacak fonksiyonları döndürür. Bu fonksiyonlar, ref objesi üzerinde kullanılabilir ve böylece parent component çocuk componentin state'ini doğrudan manipüle edebilir.

Bir örnek olarak, bir form componentindeki input alanlarına erişmek isteyebilirsiniz. Bunun için useImperativeHandle kullanarak bir ref objesi oluşturabilir ve input elementine erişimi sağlayan bir fonksiyon döndürebilirsiniz. Daha sonra parent component, bu fonksiyonu çağırarak input alanının değerini alabilir veya değiştirebilir.

Bu örnekte useImperativeHandle, ref objesini ve focusInput fonksiyonunu döndürür. focusInput fonksiyonu, input elementinin focus() metodu çağrılarak input alanına odaklanır. Böylece parent component, ref objesi üzerinden focusInput fonksiyonunu çağırarak input alanına odaklanabilir.

useImperativeHandle Nasıl Kullanılır?

useImperativeHandle Hook’u Nedir?

useImperativeHandle Hook’u, bir componentin state’ine erişimi kolaylaştırır. Bu Hook, bir çocuk component içindeki işlevlere ve değişkenlere erişmek için kullanılır.

useImperativeHandle Nasıl Kullanılır?

useImperativeHandle, bir ref objesi alır ve onun üzerinde işlemler yapılacak fonksiyonları döndürür. Bu fonksiyonlar parent component tarafından kullanılabilir hale gelir. Bu Hook, React.forwardRef ile birleştirildiğinde en iyi sonucu elde etmenizi sağlar.

Bir örnek olarak, bir form componentindeki bir input elemanına odaklanma işlemi verilebilir. Bu işlem için useRef Hook’u kullanılır. Ardından, useImperativeHandle Hook’u kullanılarak bu child component ile doğrudan etkileşim sağlanabilir ve input elemanına odaklanma işlemi gerçekleştirilebilir.

Bu örnekte, CustomInput componenti, useRef Hook’u kullanarak inputRef değerini içinde tutar. Ardından, useImperativeHandle Hook’u ile focus() fonksiyonu ref değeri için döndürülür. Parent component olan App component içinde, elemanına, inputRef ile erişim sağlanır ve ref olarak aktarılır. Son olarak, bir buton ile tetiklenen onClickHandler() fonksiyonunda, inputRef.current.focus() fonksiyonu çalıştırılarak input elemanı odaklanır.

useImperativeHandle Örneği

useImperativeHandle, child componentlerin state'ine erişimi kolaylaştırmak ve parent componentlerin child componentleri kontrol etmesine izin vermek için kullanılabilir.

Örneğin, bir form componentindeki input elementlerinin değerlerini parent componentte tutabilmek isteyebilirsiniz. Bunun için, input elementlerine useRef kullanarak referans alabilirsiniz. Daha sonra, bu referansları useImperativeHandle kullanarak parent componentin child componentlerindeki fonksiyonlara erişim sağlayabilirsiniz.

Aşağıdaki örnekte, input elementi referansı inputRef useRef ile oluşturulmuştur. Parent component içinde, child componentindeki focusInput fonksiyonuna useRef kullanarak erişilir. focusInput fonksiyonu, inputRef.current.focus() kodu ile çağrılır ve input elementine focus verilir.