{"id":8889,"date":"2025-01-07T13:30:14","date_gmt":"2025-01-07T10:30:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/hafif-react-async-veri-cekme-ve-onbellekleme-hooku\/"},"modified":"2025-01-07T13:30:14","modified_gmt":"2025-01-07T10:30:14","slug":"hafif-react-async-veri-cekme-ve-onbellekleme-hooku","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/hafif-react-async-veri-cekme-ve-onbellekleme-hooku\/","title":{"rendered":"Hafif React Async Veri \u00c7ekme ve \u00d6nbellekleme Hook’u"},"content":{"rendered":"

<\/p>\n

Hafif React Async Veri \u00c7ekme ve \u00d6nbellekleme Hook’u<\/p>\n

React uygulamalar\u0131nda veri \u00e7ekmek ve \u00f6nbelle\u011fe almak, performans i\u00e7in kritik \u00f6neme sahiptir. Bu yaz\u0131da, asenkron veri \u00e7ekme ve \u00f6nbellekleme i\u015flemlerini kolayla\u015ft\u0131ran, hafif ve \u00f6zelle\u015ftirilebilir bir React hook’unun nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. Ayn\u0131 zamanda, bu hook’un kullan\u0131m\u0131n\u0131 ve avantajlar\u0131n\u0131 detayl\u0131 \u00f6rneklerle g\u00f6sterece\u011fiz.<\/p>\n

Hook’un Yap\u0131s\u0131 ve Mant\u0131\u011f\u0131<\/h2>\n

\u00d6ncelikle, temel mant\u0131\u011f\u0131 anlamak i\u00e7in hook’umuzun yap\u0131s\u0131na bir g\u00f6z atal\u0131m. Bu hook, verileri bir fetch \u00e7a\u011fr\u0131s\u0131yla \u00e7eker ve sonucu bir \u00f6nbellekte saklar. Ard\u0131ndan, ayn\u0131 veriler i\u00e7in tekrarlanan \u00e7a\u011fr\u0131lar \u00f6nbelle\u011fe al\u0131nm\u0131\u015f sonu\u00e7lar\u0131 do\u011frudan kullan\u0131r. Bu, gereksiz isteklerden ka\u00e7\u0131narak performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Ayr\u0131ca, hata y\u00f6netimi ve y\u00fckleme durumu gibi \u00f6nemli durumlar\u0131 da y\u00f6netir. Bu sayede, kullan\u0131c\u0131 deneyimi de olumlu etkilenir.<\/p>\n

\nimport { useState, useCallback, useEffect } from 'react';\n\nconst useAsyncData = (url, options = {}) => {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState(null);\n  const [cache, setCache] = useState({});\n\n  const fetchData = useCallback(async () => {\n    setLoading(true);\n    setError(null);\n\n    try {\n      if (cache[url]) {\n        setData(cache[url]);\n      } else {\n        const response = await fetch(url, options);\n        const jsonData = await response.json();\n        setData(jsonData);\n        setCache((prevCache) => ({ ...prevCache, [url]: jsonData }));\n      }\n    } catch (err) {\n      setError(err);\n    } finally {\n      setLoading(false);\n    }\n  }, [url, options, cache]);\n\n  useEffect(() => {\n    fetchData();\n  }, [fetchData]);\n\n  return { data, loading, error };\n};\n\nexport default useAsyncData;\n<\/code><\/pre>\n
Yukar\u0131daki kodda,  useCallback ve useEffect hook’lar\u0131n\u0131 kullanarak performans optimizasyonlar\u0131 yap\u0131yoruz.  useCallback,  fetchData fonksiyonunu bellekte tutar ve gereksiz yeniden olu\u015fturulmalar\u0131n\u0131 \u00f6nler.  useEffect,  bile\u015fen ilk kez render edildi\u011finde ve ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde fetchData fonksiyonunu \u00e7al\u0131\u015ft\u0131r\u0131r.  Bu sayede, veriler ilk render’da \u00e7ekilir ve daha sonraki de\u011fi\u015fiklikler sonucunda da g\u00fcncellenir.  Ayr\u0131ca,  hata durumlar\u0131n\u0131 ve y\u00fckleme durumunu takip ederek kullan\u0131c\u0131ya geri bildirim sa\u011fl\u0131yoruz.  <\/p>\n
Hook’un Kullan\u0131m\u0131<\/h2>\n
Bu hook’u kullanmak olduk\u00e7a basittir.  Sadece URL’yi ve iste\u011fe ba\u011fl\u0131 se\u00e7enekleri (\u00f6rne\u011fin, HTTP ba\u015fl\u0131klar\u0131) parametre olarak ge\u00e7irmeniz yeterlidir.  Sonras\u0131nda,  data, loading ve error de\u011fi\u015fkenlerini kullanarak uygulaman\u0131zda verileri i\u015fleyecektir.<\/p>\n
\nimport useAsyncData from '.\/useAsyncData';\n\nconst MyComponent = () => {\n  const { data, loading, error } = useAsyncData('https:\/\/api.example.com\/data');\n\n  if (loading) return 
Y\u00fckleniyor...<\/p>;\n  if (error) return 
Hata olu\u015ftu: {error.message}<\/p>;\n  if (!data) return 
Veri yok<\/p>;\n\n  return (\n