React Kancalarıyla Sunucu İsteklerini Optimize Etme

giriiş

Bir React geliştiricisi olarak, kötü yönetilen sunucu istekleriyle uğraşmaktan bıktınız mı? Daha fazla aramayın; React Kancaları, geliştiricilerin işlevsel bileşenlerde durum ve diğer React özelliklerini kullanmalarına olanak tanıyan ve sunucu isteklerinizi optimize etmenize ve web uygulamanızın performansını bir üst seviyeye taşımanıza yardımcı olabilecek güçlü bir React kütüphanesi özelliğidir.

"Sunucu isteklerinin ne önemi var? Neden önemliler?" diye düşünüyor olabilirsiniz. Size söyleyeyim: Sunucu istekleri, kullanıcı deneyimini belirlemede büyük rol oynar. Kötü yönetilen sunucu istekleri, yavaş yükleme sürelerine, düşük performansa ve sinir bozucu bir kullanıcı deneyimine yol açabilir. React Hooks, sunucu isteklerini verimli ve düzenli bir şekilde yönetmenin bir yolunu sunarak daha hızlı yükleme, gelişmiş performans ve daha iyi bir kullanıcı deneyimi sağlar.

Bu eğitim, sunucu istek performansını iyileştirmek, sunucu isteklerini daha etkili bir şekilde yönetmek ve daha optimize edilmiş web uygulamaları oluşturmanıza yardımcı olmak için React Hooks'u kullanma konusunda size rehberlik edecektir.

Bu eğitimin sonunda, sunucu isteklerini optimize etmek için React Hooks'un nasıl kullanılacağı konusunda kapsamlı bir anlayışa sahip olacak ve bu teknikleri web uygulamalarınızın performansını ve kullanıcı deneyimini iyileştirmek için projelerinizde uygulayabileceksiniz.

Ön koşullar

JavaScript'i Anlamak
React Hooks'a Giriş
JavaScript'te sunucu isteklerinin nasıl yapılacağını öğrenin.
Bir geliştirme çalışma ortamı
Bir kod düzenleyici

Ayrıca API'lerle çalışma deneyimine sahip olmak ve RESTful prensiplerini anlamak faydalı olacaktır.

Sunucu isteği optimizasyonunda yeniyseniz endişelenmeyin; bu eğitim, her seviyeden geliştirici için tasarlanmıştır. Henüz kavramlara aşina değilseniz, kendi başınıza biraz daha araştırma ve deneme yapmanız gerekebilir. Ancak endişelenmeyin; biraz sabır ve pratikle, sunucu isteği optimizasyonu sanatında kısa sürede ustalaşabilirsiniz! Öyleyse, başlayalım ve React uygulamanızın performansını artıralım.

Yeni bir React projesi kurma

Yeni bir React projesi kurmak, acemi geliştiriciler için göz korkutucu bir görev olabilir, ancak Create React App (CRA) aracı sayesinde bu hiç bu kadar kolay olmamıştı. CRA, yeni bir React projesi kurma sürecini otomatikleştiren ve React uygulamaları oluşturmak için optimize edilmiş bir geliştirme ortamı sağlayan popüler bir komut satırı arayüzü aracıdır.

Bir React projesi oluşturmak için bilgisayarınıza Node.js ve npm yüklemeniz gerekir. Henüz yüklü değilse, resmi Node.js web sitesinden indirebilirsiniz. Bu araçları yükledikten sonra, uygulamanın oluşturulmasını istediğiniz dizine gitmek için terminalinizi veya komut isteminizi açın ve yeni bir React projesi oluşturmak için aşağıdaki komutu kullanın:

 npx create-react-app digital-ocean-tutorial

Uygulama başarıyla oluşturulursa aşağıdaki çıktı görüntülenecektir:

...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd digital-ocean-tutorial
npm start

Bu, yeni React projeniz için gerekli tüm dosyaları içeren, projenizle aynı ada sahip yeni bir dizin oluşturacaktır.

Kurulum işlemi tamamlandıktan sonra, aşağıdaki komutu çalıştırarak yeni React proje dizinine gidin:

cd digital-ocean-tutorial

Daha sonra geliştirme sunucusunu başlatmak için aşağıdaki komutu çalıştırın:

npm start

Her şey yolunda giderse sunucu başlamalı ve aşağıdaki çıktı görüntülenmelidir:

Compiled successfully!
You can now view digital-ocean-tutorial in the browser
http://localhost:3000
Note that the development build is not optimized.
To create a production build, use npm run build.

Bu, yeni React projenizi varsayılan web tarayıcınızda başlatacaktır. Artık "React'a Hoş Geldiniz" mesajını görebilmeniz gerekir. Bu, projenizin düzgün bir şekilde kurulduğu ve bir sonraki harika uygulamanızı oluşturmaya başlamanız için hazır olduğu anlamına gelir!

CRA ile geliştirme ortamınızı kurma ve yapılandırma konusunda endişelenmeden kod yazmaya odaklanabilirsiniz.

Artık React projenizi kurduğunuza göre, React kancalarını kullanarak sunucu isteklerini optimize etmenin farklı yollarına bakalım.

Bileşenleri UseEffect kancasıyla senkronize edin

React'teki useEffect kancası, geliştiricilerin veri alma gibi yan etkileri hem verimli hem de anlaşılır bir şekilde ele alarak bir bileşeni sunucu gibi harici bir sistemle senkronize etmelerini sağlar. useEffect kancasının en yaygın kullanım alanlarından biri, sunucu istekleri yapmak ve bileşenin durumunu güncellemektir.

Sunucu istekleri için useEffect kancasını kullanmanın bir yolu, isteği useEffect kancası içinde gerçekleştiren bir işlevi çağırmaktır. Bu işlev, isteği gerçekleştirmek için Fetch API'sini veya Axios gibi bir kütüphaneyi kullanmalı ve ardından setState kancasını kullanarak bileşenin durumunu yanıt verileriyle güncellemelidir.

Bir JSON vekil API'sinden veri almak ve bileşenin durumunu güncellemek için useEffect kancasının nasıl kullanılacağına dair bir örneğe bakalım. Projenizin src klasöründeki app.js dosyasına gidin, varsayılan kodu kaldırın ve aşağıdaki kod parçacığıyla değiştirin:

import React, { useEffect, useState } from 'react';
function MyComponent() {
const [data, setData] = useState([]);
useEffect(() => {
async function fetchData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
setData(data);
}
fetchData();
}, []);
return (
<div>
{data.map((item) => (
<div key={item.id}>
<h2>- {item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
);
}
export default MyComponent

Yukarıdaki örnekte, useEffect kancası boş bir bağımlılık dizisiyle çağrılır; bu, yalnızca bileşenin ilk işlenmesinde yürütüldüğü anlamına gelir. Bileşen durumu boş bir diziyle başlatılır ve sunucuya bir istekte bulunmak ve durumu yanıt verileriyle güncellemek için useEffect kancasının içinde fetchData işlevi çağrılır.

Tarayıcınızı veya uygulamanızı yenilediğinizde, yukarıdaki kod örneğinde yapılan isteğin sonucunu aşağıdaki resimde gösterildiği gibi görebilmelisiniz:

Gereksiz yeniden işlemelerin performans sorunlarına yol açabileceğini unutmamak önemlidir, bu nedenle useEffect kancasının neden olduğu işleme sayısını en aza indirmek en iyisidir. Bunu yapmanın bir yolu, bağımlılık dizisine yalnızca kanca tarafından kullanılan özellikleri ve durum değişkenlerini eklemektir.

Sunucuya istek gönderirken doğru hata yönetimi, bileşenin bozulmasını önlemek için de önemlidir. Hata yönetimi, fetchData fonksiyonuna bir try-catch bloğu eklenerek ve setError kancası kullanılarak bileşen durumu bir hata mesajıyla güncellenerek yapılabilir. Bu şekilde, uygulama bir sorun oluşması durumunda kullanıcıya bir hata mesajı gösterebilir.

En iyi uygulamaları takip ederek, React bileşeninde sunucu isteklerini güvenle işleyebilir ve daha iyi bir kullanıcı deneyimi yaratabilirsiniz.

useMemo kancasını kullanarak sunucu isteği performansını optimize edin

React'teki useMemo kancası, geliştiricilerin hesaplama sonuçlarını depolayarak verileri hatırlamalarını ve böylece işlemi tekrarlamak zorunda kalmadan yeniden kullanılabilmelerini sağlayan bir performans optimizasyon aracıdır. Bu, özellikle sunucu istekleriyle çalışırken faydalı olabilir, çünkü gereksiz yeniden işlemeyi önlemeye ve bileşen performansını iyileştirmeye yardımcı olabilir.

Bir sunucu isteği bağlamında useMemo kancasını kullanmanın bir yolu, sunucudan döndürülen verileri hatırlamak ve bunları bileşenin durumunu güncellemek için kullanmaktır. Bu, useEffect kancası içinde useMemo kancasını çağırarak, sunucu verilerini ilk argüman olarak, bağımlılık dizisini ise ikinci argüman olarak geçirerek yapılabilir. Bağımlılık dizisi, depolanan verileri hesaplamak için kullanılan tüm özellikleri veya durum değişkenlerini içermelidir.

Bu yöntemi, JSON vekil API'sinden veriyi ezberlemek ve bileşenin durumunu güncellemek için useMemo kancasını kullanarak denemek için app.js'deki kodu aşağıdaki kod parçacığıyla değiştirin:

import { useEffect, useState, useMemo } from 'react';
function MyComponent({ postId }) {
const [data, setData] = useState({});
useEffect(() => {
async function fetchData() {
const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
const data = await response.json();
setData(data);
}
fetchData();
}, [postId]);
const title = useMemo(() => data.title, [data]);
return (
<div>
<h2>{title}</h2>
</div>
);
}
export default MyComponent

Yukarıdaki örnekte, useEffect kancası, bağımlılık dizisi olarak postId kullanılarak çağrılır; bu, postId özelliği her değiştiğinde çalıştırılacağı anlamına gelir. Bileşen durumu boş bir nesneyle başlatılır, ardından sunucuya bir istekte bulunmak ve durumu yanıt verileriyle güncellemek için useEffect kancasının içinde fetchData işlevi çağrılır. Bileşenin içinde, başlığı korumak için useMemo kancasını kullanırız; böylece başlık, veriler her değiştiğinde güncellenir.

Yukarıdaki kod örneğindeki isteğin sonucu aşağıdadır:

useMemo'nun her zaman gerekli olmadığını ve yalnızca bileşenin sık sık değişebilen ve hesaplama açısından maliyetli olabilecek bazı özelliklere veya durumlara bağlı olduğu durumlarda kullanılması gerektiğini unutmayın. useMemo'nun yanlış kullanımı bellek sızıntılarına ve diğer performans sorunlarına yol açabilir.

useReducer Hook ile sunucu istek durumunu yönetme

React'teki useReducer kancası, useState kancasına benzer, ancak daha karmaşık ve öngörülebilir bir durum yönetimi sağlar. Durumu doğrudan güncellemek yerine, useReducer, durum güncellemesini açıklayan eylemleri ve durumu dağıtım eylemine göre güncelleyen bir azaltıcı işlevi dağıtmanıza olanak tanır.

Sunucu isteklerini işlemek için useReducer kancasını kullanmanın avantajlarından biri, ilgili konuların daha iyi ayrılmasıdır. Sunucu isteklerini işleme mantığının bileşen genelinde dağınık olması yerine, reducer fonksiyonunda kapsüllenmesi, bileşen kodunun anlaşılmasını ve bakımını kolaylaştırır.

Bu yaklaşımı, useReducer kancasını kullanarak JSON değişken API'sinden veri hatırlamak ve bileşenin durumunu güncellemek için app.js'deki kodu aşağıdaki kod parçacığıyla değiştirin:

import { useReducer } from 'react';
const initialState = { data: [], loading: false, error: '' };
const reducer = (state, action) => {
switch (action.type) {
case 'FETCH_DATA_REQUEST':
return { ...state, loading: true };
case 'FETCH_DATA_SUCCESS':
return { ...state, data: action.payload, loading: false };
case 'FETCH_DATA_FAILURE':
return { ...state, error: action.payload, loading: false };
default:
return state;
}
};
function MyComponent() {
const [state, dispatch] = useReducer(reducer, initialState);
const fetchData = async () => {
dispatch({ type: 'FETCH_DATA_REQUEST' });
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
}
};
return (
<div>
{state.loading ? (
<p>Loading...</p>
) : state.error ? (
<p>{state.error}</p>
) :
<div>
{state.data.map((item) => (
<div key={item.id}>
<h2>{item.title}</h2>
<p>{item.body}</p>
</div>
))}
</div>
)}
<button onClick={fetchData}>Fetch Data</button>
</div>
);
}
export default MyComponent

Verilen kod parçacığında, useReducer kancası, reducer fonksiyonuyla çağrılır ve başlangıç durumu argüman olarak iletilir. Bileşen durumu, veri olarak boş bir dizi, false olarak ayarlanmış bir yükleme değişkeni ve boş bir hata mesajı değişkeniyle başlatılır. "Verileri Al" düğmesine tıklandığında, istek durumuna yanıt olarak eylemler gönderen fetchData fonksiyonu çalıştırılır; bu eylem başarılı veya başarısız olabilir.

Yukarıdaki kod örneğinde yapılan isteğin sonucu aşağıdadır:

Ayrıca, useReducer kancası karmaşık durumların daha verimli yönetilmesini sağlar. Durumu güncellemek için eylemler ve azaltıcılar kullanmak, farklı eylemlerin durumun farklı bölümleri üzerindeki etkisini kontrol etmeyi kolaylaştırır ve böylece uygulamada yeni özellikler eklemeyi ve sorunları gidermeyi kolaylaştırır.

Sonuç

Kısacası, bu eğitimde React Kancaları ile sunucu isteklerini optimize etmenin temelleri ele alınmıştır. React Kancaları, geliştiricilerin fonksiyonel bileşenlerde durum ve diğer React özelliklerini kullanmalarına olanak tanıyan güçlü bir React kütüphanesi özelliğidir. useEffect, useMemo ve useReducer kancalarını kullanarak sunucu isteklerini kolayca yönetip optimize edebilir, böylece daha hızlı yükleme süreleri, gelişmiş performans ve kullanıcılarınız için daha iyi bir kullanıcı deneyimi elde edebilirsiniz. Bu eğitimde gösterilen teknikleri izleyerek web uygulamalarınızın performansını ve kullanıcı deneyimini iyileştirebilirsiniz.

Şimdi bu teknikleri kendi projelerinizde deneme sırası sizde. Bir sonraki adımda, sayfalama ve önbelleğe alma gibi daha gelişmiş konuları keşfedebilirsiniz. React Hooks'un sürekli gelişen bir teknoloji olduğunu unutmayın, bu nedenle sunucu isteklerinizi optimize etmeye devam etmek için en son güncellemeleri ve en iyi uygulamaları takip edin.