Bu yazıda, React uygulamalarında API'lerle etkileşim sağlamak için useState, useEffect ve useContext Hook'larının kullanımından bahsedilmektedir React, sadece kullanıcı arayüzü oluşturmakla kalmaz, aynı zamanda dış verilere erişim sağlama ihtiyacı da duyabilir Bu ihtiyacı karşılamak için Hook'lar kullanılabilir useState, component durumunu yönetirken, useEffect yükleme ve güncelleme olaylarını kontrol eder useContext ise veri paylaşımını sağlar Ayrıca Axios gibi kütüphanelerle API istekleri kolayca yapılabilir Bu yazıda, Hook'larla API'lerle etkileşim yapma örnekleriyle birlikte öğrenilebilir

Bu yazıda, React uygulamalarında API'lerle etkileşim sağlamak için React Hook'larının kullanımını öğreneceksiniz. React, bir uygulamanın sadece kullanıcı arayüzünü oluşturmaktan çok daha fazlasını yapabildiği için sıklıkla kullanılır. Bu nedenle, uygulamanın çalışması için dış verilere erişmek gerekebilir. React Hook'ları bu dış verilere erişim sürecini kolaylaştırır.

React Hook'ları kullanarak, özellikle useState, useEffect ve useContext Hook'ları ile API istekleri yapabiliriz. useState, bir component'in durumunun yönetimini sağlar. useEffect, bir componente yüklenirken veya güncellendiğinde çalışan kod bloklarını içerir. useContext ise komponentler arasında veri paylaşımı sağlar. Ayrıca, en yaygın kullanılan API istekleri için Axios kütüphanesi kullanılabilir.

Bu yazıda, useState, useEffect ve useContext Hook'larını öğrenecek ve örneklerle API'lerle nasıl etkileşim sağlanacağını göreceksiniz. React uygulamalarının daha işlevsel olması için React Hook'ları kullanarak dış verilere erişmek artık daha kolay olacak.

API İletişimi ve React

API'ler, React uygulamalarında veri yükleme ve işleme işlemlerini gerçekleştirmek için kullanılan temel araçlardan biridir. Birçok uygulama, kullanıcılara özel içerik göstermek veya ihtiyaçlarına yönelik veriler sağlamak için API'lerle etkileşimde bulunur. React kullanarak, bir API'den veri almak veya bir API'ye veri göndermek oldukça kolaydır.

React, veri yükleme işlemlerini basitleştiren bir dizi API ve araç seti sağlar. API'lerle etkileşim sağlamak için Axios gibi kütüphaneler kullanılabilir. Bu kütüphaneler, API isteklerini yapmak, gelen veriyi işlemek ve sonuçları kullanıcı arabirimi ile göstermek için kullanılabilir. API'ler, React uygulamalarının hızını ve kullanıcı deneyimini önemli ölçüde artırabilir.

React Hook'ları

React Hook'ları, React uygulamaları için oldukça önemli ve yararlı bir özellik olarak karşımıza çıkmaktadır. Bu özellik sayesinde, durum yönetimi ve yaşam döngüsü yönetimi gibi işlemler oldukça kolay bir şekilde yapılabilmektedir. Hook'lar, React bileşenleri içinde state ve diğer React özelliklerini kullanmak için hizmet eden fonksiyonlardır.

React Hook'ları, React ekibinin fonksiyonel komponentler üzerinde daha fazla çalışmalarının bir sonucu olarak ortaya çıktı. Hook'lar, sınıf bazlı komponentlerin yerini alarak, React'ta daha fazla işlevselliği sağladılar. State yönetimi için useState, yaşam döngüsü olayları için useEffect ve veri paylaşımı için useContext gibi birçok kullanışlı Hook bulunmaktadır. Bu sayede, React uygulamalarını daha güçlü ve daha akıcı hale getirerek, daha iyi bir kullanıcı deneyimi sunmaktadır.

useState Hook'u

useState Hook'u: React uygulamalarında durum yönetimi için kullanılan en temel kancadır. useState, bir durum değişkeni ve bu değişkeni güncelleyen bir işlev döndürür. Component içinde durum değişkeni tutmak ve güncellemek için kullanılır. Örneğin, bir butona tıklandığında bir metin alanındaki değeri güncellemek istediğimizi düşünelim. Aşağıdaki örnekte useState kullanarak bu işlemi gerçekleştirebiliriz:

useState'in kullanımı oldukça basittir. State'in ilk değeri, useState() içindeki parametreye atanabilir. useState(), bir dizi döndürür – ilk öğesi state değeri, ikinci öğesi ise state'i güncelleyen işlevdir. Aşağıda useState kullanarak bir sayacın değerini artıran ve azaltan örnek kod bulunmaktadır:

Kullanımı

useState, React uygulamalarında durum yönetimi için kullanılan en temel kancadır. Bu kancayı kullanarak, bir dizi döndürülebilir ve bu dizi iki öğe içerir. İlk öğe, durumun mevcut değeridir. İkinci öğe ise durumun mevcut değerini güncelleyen bir işlevdir. Bu işlev, durumun yeni değerini belirleyerek component'in yeniden yüklenmesini sağlar. Örneğin, şu kod kullanılarak bir useState durumu oluşturulabilir:

const [data, setData] = useState([]);

Bu kod, boş bir dizi olan data adlı bir durum oluşturur ve setData işlevi, bu durumun değerini güncellemek için kullanılabilir. setState işlevi kullanıldığında, React bu component'in yeniden yüklendiğini fark eder ve güncellenmiş durumu ekranda gösterir.

Örnek Kod

Bu örnek kod, useState kancasının kullanımını gösterir. useState, bir dizi döndürür ve ilk olarak, durum değerini içerir, ikinci olarak, durum değerini güncelleme işlevini içerir. Bu örnekte, "data" adında bir durum değeri oluşturuldu ve setData adında bir işlev, bu durum değerini güncellemek için kullanıldı. İlk değer [], yani boş bir dizi olarak ayarlanır. Bu dizi daha sonra, API isteği sonucu gelen verilerle doldurulabilecek bir depolama alanı olarak kullanılabilir.

const [data, setData] = useState([]);

useEffect Hook'u

useEffect Hook'u, React uygulamalarında component'lerin mount edildiğinde ve güncellendiğinde belirtilen fonksiyonları çalıştırmamızı sağlayan bir React Hook'udur. Bu kısma, genellikle API isteklerini yapmak, veri kaynaklarından güncel verileri çekmek, kullanıcı arayüzünü güncellemek veya browser storagedaki verileri kullanmak gibi birçok farklı işi yerine getiren fonksiyonlar yazılabilir.

useEffect fonksiyonunun ikinci parametresi, 'dependency array' olarak adlandırılan ve değişkenleri içeren bir diziye sahiptir. Bu dizi, belirli bir değişken değiştirdiğimizde useEffect'in yeniden çalıştırmasını sağlar. Burada boş bir dizi kullanırsak, useEffect yalnızca bir kez tetiklenecek ve component mount edildiğinde bir kez çalışacaktır. Dolayısıyla, eğer bir değişkenin değişiminde useEffect'in işlem yapmasını istiyorsak, o değişkeni de bağımlılık dizisi içine eklemeliyiz.

Ayrıca, useEffect Hook'unun kullanımı ile birlikte cleanup fonksiyonları da tanımlanabilir. Bu işlevsellik özellikle event listener'ların sihirdarlığı ile uğraşırken çok faydalı olabilir. Örneğin, component'imiz unmount edildiğinde kullanılmayan bir event listener'ı kaldırmak için bir cleanup fonksiyonu yazabiliriz.

Kullanımı

useEffect Hook'u, bir component'in 'mount' and 'update' durumlarında çalıştırabileceğimiz bir fonksiyondur. Bu hook, AJAX istekleri yapmak, animasyonlar oluşturmak, kullanıcı etkileşimleri yanıt vermek gibi pek çok senaryoda kullanılabilir. Kullanımı oldukça kolaydır.

useEffect, bir fonksiyon ve bir bağımlılık dizesi döndürür. Bağımlılık dizesi, efektin yeniden çalışmasını tetikleyen değişkenleri belirtir. Bu değişkenler, fonksiyonun çalıştırılma zamanını kontrol eder. Bağımlılıkların belirtilmemesi durumunda, fonksiyon her güncellemede çalışır.

Bu özelliği kullanarak React uygulamamızda API istekleri yapabilir, verileri güncelleyebilir veya sayfa yenilendiğinde animasyonlu geçişler oluşturabiliriz. useEffect Hook'u, uygulama performansını da arttırır. Çünkü, her render işlemi sırasında yayınlanan side-effects yönetimi için ayrı bir metod kullanmadığımızda performans kaybı yaşanır.

Örnek Kod

=useEffect(() => {

Örnek kodumuzda, axios kütüphanesi kullanılarak bir API isteği yapılıyor. fetchData adında bir fonksiyon oluşturuluyor ve async-await kullanarak örnek bir API isteği yapıyoruz. İstenen veri geldikten sonra ise setData fonksiyonu sayesinde durum değerimiz güncelleniyor.

Bu kullanım şekli, useEffect'in ardışık bir Axios isteğinden sonra verileri alarak, setState ile yeniden render edilmesini sağlamaktadır.

Örneğin, bir haber sitesinde kullanmak için kullanıcının seçtiği kategorilere göre en son haberleri görüntüleyen bir bileşen düşünelim. Bu bileşen componentDidMount'ta başlayacaktır ve kategoriye göre güncellenen sonrası news select'i tıklanarak istek sonrası güncellenecektir.

Bu işlemlerin hepsini useEffect kullanarak yapabiliriz.

Bu kullanım örneği, idareli şekilde yan etkilerin kontrol edilmesi ve öngörülebilir sonuçlar sunmasıyla birlikte, useEffect kancasının sağlam bir örneği olarak gösterilebilir.

// API isteği yap

Axios kütüphanesi, API isteklerini yapmak için en yaygın kullanılan kütüphanelerden biridir. Örnek bir API isteği yapmak için aşağıdaki örneği kullanabiliriz.

Örnek olarak, aşağıdaki kodda, örnek bir veri API'sine istek yapılır ve gelen veri state'e atanır:

      async function fetchData() {      const result = await axios('https://example.com/data');      setData(result.data);    }    fetchData();  

=async function fetchData() {

=Bu fonksiyon, API'ye istek yapmak ve verileri uygulamaya eklemek için kullanılır. Önceki örnekte olduğu gibi axios kullanarak bir ağ isteği yaparız ve veriyi setData işlevi aracılığıyla durumumuza kaydederiz. Bu işlem, useEffect kancası içinde yapılır, böylece bileşen yüklendiğinde ve yeniden render edildiğinde API isteği yenilenir.

=Örnek Kod:

useEffect(() => {

async function fetchData() {

const result = await axios('https://example.com/data');

setData(result.data);

}

fetchData();

}, []);

Bu örnek kod satırı, axios kütüphanesi kullanarak örnek bir veri isteği yapmak için kullanılır. 'https://example.com/data' URL'sindeki verilere erişmek için axios get() yöntemi kullanılır ve sonuç 'result' değişkeninde saklanır.

Bu kod, useState() kancasıyla durum yönetimi yaparken, useEffect() kancasıyla API verilerinin düzenli olarak güncellenmesini sağlamak için kullanılabilir. Ayrıca, useContext() kancası ile bileşen ağacındaki her bir bileşenin ilgili bilgileri paylaşmasını ve veri paylaşımını kolaylaştırabilir.

Bu örnek kod satırı, önemli bir bileşen olan axios kütüphanesi hakkında bilgi sahibi olmak isteyen tüm React geliştiricileri için yararlı olabilir.axios, birçok yöntem ve özelliği içeren kapsamlı bir kütüphanedir ve en yaygın kullanılanlardan biridir.

setData(result.data); kod satırı, API'den gelen verileri state'teki veri dizisine kaydetmektedir. Bu sayede, API'den alınan veriler kullanıcılara gösterilebilir. Ayrıca, useState kancası ile birlikte kullanılır ve verilerin güncellenmesi sağlanır. Eğer API'den veri çekilirken hata oluşursa, bu hata try-catch blokları içerisinde yönetilebilir. Özetle, setData fonksiyonu, API verilerinin state içindeki veri dizisine kaydedilmesini sağlar ve uygulamanın verileri güncel tutmasına yardımcı olur.

useContext, component ağacındaki her bir bileşenin ilgili bilgileri paylaşmasını sağlayarak veri paylaşımını kolaylaştıran bir kancadır. Bunu yaparken, kapsayıcı bileşen üzerinden aldığı bilgiyi istediği alt bileşenle paylaşabilir. Bu, uygulamanın büyümesiyle birlikte, bilginin çok sayıda değerinin saklanması için ideal bir araçtır.

Kontekst kullanımı, verileri props aracılığıyla birçok bileşene aktarmak yerine, tüm alt bileşenlerin paylaştığı ortak bir veri deposu sağlamak anlamına gelir. Bu, uygulamanın boyutları büyüdükçe yönetimi kolaylaştırır.

Bir önceki örnekte olduğu gibi, önce bir tane context nesnesi oluşturmalıyız. Bu context nesnesi, app bileşeninin alt bileşenine props geçmek yerine paylaşılan verileri kullanacaktır. Bunun yanı sıra, diğer react hooks'larıyla birlikte de kullanılabilir.

Bu örnek, react uygulamasında tüm bileşenler tarafından paylaşılan bir 'data' nesnesi oluşturur:

const DataContext = React.createContext({});      

Sonrasında, app bileşeninde, data nesnesi ve bir setData fonksiyonu oluşturulur. Bu fonksiyon, data nesnesindeki verileri değiştirmek için kullanılır. Ardından, oluşturulan context nesnesi, alt bileşenleri saran içine yerleştirilir. Dolayısıyla, tüm bileşenler, data nesnesine ve setData fonksiyonuna erişebilir.

Örnek kod:

function App() {  const [data, setData] = useState([]);  return (    <DataContext.Provider value={{ data, setData }}>      <Component1 />      <Component2 />    </DataContext.Provider>  );}      

fetchData() fonksiyonu, useEffect Hook'unun ilk parametresinde bulunur ve API'den veri yüklemesi yapar. Bir axios isteği kullanarak API'den veri aldıktan sonra, veriyi setData fonksiyonu kullanarak state'e kaydeder. Bu şekilde, API'den alınan veriler render edilebilir.

Bu kısım, useEffect Hook'unun kullanımını göstermektedir. useEffect, içindeki fonksiyonu component'in "mount" veya "update" durumlarında çalıştırır. Fonksiyonun çalışması bağımlılık dizgisinde belirtilen değişkenlerden biri değiştiğinde de tetiklenir. Bağımlılık dizgisine eklenen bir değişken değişmediği sürece efekt değişmez. Eğer boş bir dizi sağlanırsa, useEffect, yalnızca component "mount" olduğunda çalışır.

useEffect, bir fonksiyon ve bir bağımlılık dizisi alır. Bağımlılık dizisi, efektin yeniden çalışmasını tetikleyen değişkenleri belirtir. Eğer boş bir dizi sağlanırsa, useEffect sadece component "mount" olduğunda çalışır.

Aşağıdaki örnekte, useEffect, API için axios kullanarak örnek veri çekiyor. useEffect, boş dizi sağlanarak sadece mount durumunda bir kere çalışır. İlgili API, "https://example.com/data" adresinde yer almaktadır.

useEffect(() => {    // API isteği yap    async function fetchData() {      const result = await axios('https://example.com/data');      setData(result.data);    }    fetchData();  }, []);

useContext Hook'u

useContext Hook'u

useContext, React uygulamalarında verileri alt bileşenlere aktarmak için kullanılan bir kancadır. Bu kancaya bağlı olan bileşenler, üst bileşenin durumunda meydana gelen herhangi bir değişiklikten etkilenir. Bu sayede, veri paylaşımı kolaylaştırılır ve uygulamanın performansı artırılır.

Kullanımı ise oldukça basittir. İlk olarak, bir createContext fonksiyonu kullanarak bir bağlam nesnesi oluşturulması gerekiyor. Bu bağlam nesnesinin varsayılan değeri, alt bileşenlerin paylaşacağı verileri içermelidir. Daha sonra, bu bağlam nesnesi, Provider bileşeni ile kullanılabilir hale getirilir. Provider bileşeninin value özelliği, alt bileşenlerin paylaşacağı verileri içermelidir.

Aşağıdaki örnekte, DataContext adında bir bağlam nesnesi oluşturuluyor ve bu nesne, App bileşeni içinde kullanılıyor. App bileşeni, alt bileşenlere DataContext.Provider bileşeni aracılığıyla verileri iletiyor.

const DataContext = React.createContext({});function App() {  const [data, setData] = useState([]);  return (                      );}

Bu örnekte, alt bileşenler data ve setData değişkenlerine kolayca erişebilirler.

Kullanımı

useContext, React uygulamalarında veri paylaşımını kolaylaştırmak için kullanılan bir kancadır. useContext, component ağacındaki her bir bileşenin ilgili bilgileri paylaşmasını sağlayarak, verilere kolayca erişilmesini sağlar. useContext kullanmak için, öncelikle bir bağlam nesnesi oluşturulur. Ardından bu bağlam nesnesi, createContext metoduna parametre olarak verilerek oluşturulabilir.

Bir sonraki adımda ise, örnek olarak App bileşeninde useState kullanarak veriler oluşturulur. Bu oluşturulan veriler, DataContext nesnesinde yer alan setData fonksiyonuyla güncellenebilir. Son olarak, Provider bileşeni içerisine, ilgili verileri kullanmasını istediğimiz bileşenler yerleştirilir ve bu bileşenler kullanılarak, tüm alt bileşenlerin paylaştığı verilere erişilir.

Örnek Kod

Örnek Kod:

Bu örnek kod, createContext metodu kullanılarak bir veri bağlamı oluşturmaktadır. createContext metodu, bir bağlam nesnesi oluşturur ve daha sonra bu nesnenin kullanılmasıyla, veri paylaşımını kolaylaştırır.

Bu örnek, createContext metodu kullanarak veri paylaşımını gösterir. Bu özellik sayesinde, verileri bir bileşenden diğerine iletebiliriz. Bu, React uygulamalarının yapısını kolaylaştırır ve verilerin geçişini daha verimli hale getirir.

React uygulamalarını oluşturduğumuzda, genellikle birkaç bileşenden oluşan bir ağa sahip oluruz. Bu bileşenler, aralarında veri paylaşımı yapabildikleri gibi, asenkron olarak API'lerle de iletişim kurabilirler. Bu noktada, bir bileşen örneği olan App bileşenimizde useContext ve useState hook'larının kullanımı, API'lerle etkileşim konusunda kullanışlı bir bileşen yapmamızı sağlar. Örneğin, API'den alınan verileri data olarak depolayıp, setData fonksiyonuyla bu verileri güncelleyebiliriz. Bu veriler, tüm alt bileşenler tarafından paylaşılabilir. Ancak, bu yöntemle birden çok API iletişiminde sıkışabilirim. Bu durumlarda Axios kütüphanesi kullanışlı bir seçim olacaktır. Axios, önceden yapılmış istekleri kullanarak API'lerle etkileşimi kolaylaştırır.

const [data, setData] = useState([]); Hook kullanarak React uygulamalarımızda durum yönetimini kolayca sağlayabiliriz. Bu örnekte, useState() kancasını kullanarak boş bir dizinin durumunu (state) tutuyoruz ve setData() metodu ile state'i güncelliyoruz. Ayrıca, veri almak için API kullanırken useState() kancasını kullanarak sayfa yenilemeden durumu güncelleyebiliriz. Bu yöntem, kullanıcıya daha iyi bir kullanıcı deneyimi sağlar.

Kancalar, uygulamanın ayak uydurmasını sağlayan performansı artıran birçok kullanışlı özellik sağlar. useState(), useEffect() ve useContext() kancaları, uygulama durumunu, senkronizasyonunu ve veri paylaşımını kolaylaştırmak için kullanılabilir. Bu kancalar sayesinde, React uygulamalarımızı daha verimli ve daha etkili bir şekilde yönetebiliriz.

useState() kancası, bir dizi içinde iki öğe döndürür. İlk öğe, durum değişkenin kendisidir. İkinci öğe ise durum değişkenini güncellemek için kullanacağımız bir yöntemdir. Bu yöntem, dizi dizisi olmadan da kullanılabilir.

• Durum Değişkeni: Dizinin ilk elemanı olan 'data' bu örnekte veri durumunu tutmaktadır.
• setState() Yöntemi: Dizinin ikinci elemanı olan 'setData' fonksiyonu, durum değişkenini güncelleme işlevini yerine getirir.

return() metodu, JSX kodunun geri dönüşünü belirtmek için kullanılan bir React Hook'udur. Bu, bir bileşenin görüntülenen içeriğine karşılık gelen JSX ifadeleri içerir. Bu kod parçasının içerisinde, bir data kümelerinin haritasını oluşturmaya çalıştığımızı düşünelim. map() metodu, data kümesindeki öğeleri işleyen ve oluşturulan bileşenleri üzerinde gösteren bir fonksiyondur.

Örneğin, aşağıdaki kodda 'data' durumu üzerine bir harita işlevi yerleştirilir ve sonraki satırlarda oluşturulan bileşenler için bir anahtar ve bileşen gövdesi belirtmek için JSX kullanılır:

return (  <div>    <ul>      data.map(item => (      <li key=`${item.id}`>{item.title}</li>      ))    </ul>  </div>)

  async function getData() {    try {      const response = await axios.get('https://jsonplaceholder.typicode.com/todos');      console.log(response.data);    } catch (error) {      console.error(error);    }  }

axios.get('https://jsonplaceholder.typicode.com/posts')  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });

npm install axios

import axios from 'axios';

const result = await axios('https://jsonplaceholder.typicode.com/posts');console.log(result.data);