Bugün, React’ta custom hook kullanarak nasıl basit bir API istek yönetimi yapabileceğimizi göreceğiz. Özellikle birçok farklı endpoint ile çalışıyorsanız bu tarz bir hook, kodunuzu daha konsolide ve temiz tutmanıza yardımcı olabilir.
Nedir bu “Custom Hook”?
React, useState ve useEffect gibi birçok yerleşik hook’a sahip. Ancak bazen belirli bir işlevi yerine getirmek için kendi özel hook’larımızı oluşturmamız gerekebilir. Custom hook, özellikle belirli bir işlevi birkaç yerde kullanacaksak bize ciddi zaman kazandırabilir.
useAPI Hook: Özelleştirilmiş Bir Hook Oluşturmak
İşte basit bir useAPI hook tasarımı:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import { useState, useEffect } from 'react'; const useAPI = (url, method = 'GET', initialData = null) => { const [data, setData] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(url, { method: method, headers: { 'Content-Type': 'application/json', }, body: method === 'GET' || method === 'DELETE' ? null : JSON.stringify(initialData), }); if (!response.ok) { throw new Error('Network response was not ok'); } const responseData = await response.json(); setData(responseData); } catch (err) { setError(err.message || 'Something went wrong!'); } setLoading(false); }; fetchData(); }, [url, method, initialData]); return { data, error, loading }; }; export default useAPI; |
Bu hook, bize üç değer döndürüyor:
- data (API’dan dönen veri)
- error (herhangi bir hata durumu için)
- loading (verinin yüklenip yüklenmediğini kontrol etmek için)
Hook’un Kullanımı
Şimdi bu hook’u nasıl kullanacağımıza dair örnekler görelim:
GET isteği:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import useAPI from './path_to_useAPI'; const FetchDataComponent = () => { const { data, error, loading } = useAPI('http://localhost:3001/api/products'); if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error}</div>; return <div>Data: {JSON.stringify(data)}</div>; }; |
POST isteği:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import useAPI from './path_to_useAPI'; const PostDataComponent = () => { const newProduct = { name: 'Product 1', price: 25, }; const { data, error, loading } = useAPI('http://localhost:3001/api/products', 'POST', newProduct); if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error}</div>; return <div>Post Response: {JSON.stringify(data)}</div>; }; |
PUT (Update) isteği:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import useAPI from './path_to_useAPI'; const UpdateDataComponent = () => { const updatedProduct = { name: 'Updated Name', price: 26, }; const { data, error, loading } = useAPI('http://localhost:3001/api/products/1', 'PUT', updatedProduct); if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error}</div>; return <div>Update Response: {JSON.stringify(data)}</div>; }; |
DELETE isteği:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import useAPI from './path_to_useAPI'; const DeleteDataComponent = () => { const { data, error, loading } = useAPI('http://localhost:3001/api/products/1', 'DELETE'); if (loading) return <div>Loading...</div>; if (error) return <div>Error: {error}</div>; return <div>Delete Response: {JSON.stringify(data)}</div>; }; |
Bu hook’u kullanırken, istediğiniz HTTP metodu ve gerekirse göndermek istediğiniz veriyi hook’a argüman olarak geçirebilirsiniz. Bu sayede farklı API isteklerini tek bir hook ile yönetebilirsiniz.
Umarım “React’ta Custom Hook ile API İstekleri” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
React useEffect Nedir? React useEffect Kullanımı
Yeni bir yazımda görüşmek üzere.
Happy coding!
