Rehber React UI Uzerinde Global State ve React Query

[Atlasch]

Modern FiveM scriptlerinde NUI geliştirirken artık sadece bir şeyler çizdirmek yetmiyor. Veriyi yönetmek, senkronize tutmak ve performansı korumak en büyük önceliğimiz haline geldi. Bu yazıda, karmaşık UI projelerinde hayat kurtaran iki devden bahsedeceğiz: Zustand ve React Query.

Küçük bir envanter veya basit bir HUD yapıyorsanız useState işinizi görür. Ancak şunları bir düşünün:

• Karakter verisini (nakit, banka, iş, açlık) 10 farklı component içinde kullanmanız gerekiyor.
• Veritabanından (SQL) bir veri çekiyorsunuz ve bu verinin her saniye güncellenmesini istemiyorsunuz ama taze kalmasını istiyorsunuz
• NUI tarafında bir yükleniyor durumu yönetmek tam bir işkenceye dönüşebiliyor

İşte burada Zustand (Global State) ve React Query (Server/Data State) devreye giriyor.

Zustand

Kurulum:
npm install zustand

Örnek Kullanım (Karakter Store):
import { create } from 'zustand'

const useCharacterStore = create((set) => ({
cash: 0,
bank: 0,
job: 'Unemployed',
// Veriyi güncellemek için basit bir fonksiyon
setMoney: (newCash, newBank) => set({ cash: newCash, bank: newBank }),
updateJob: (newJob) => set({ job: newJob }),
}))

export default useCharacterStore;

Context API'den hızlıdır: Sadece verisi değişen component render edilir.
Aşırı basittir: Redux gibi onlarca dosya açmanıza gerek kalmaz.

React Query
FiveM'de genellikle SendNUIMessage ile veri alırız, ancak bazen UI içinden bir API'ye veya bir JSON dosyasına istek atmamız gerekebilir. React Query, verinin "yükleniyor", "hata verdi" veya "güncel" olma durumunu otomatik yönetir.

Neden FiveM'de Kullanılır?​

Örneğin, sunucudaki "Meslek Listesi" veya "Galeri Araç Listesi" gibi verileri NUI her açıldığında tekrar tekrar istemek yerine cache (önbellek) mekanizmasıyla saklayabilirsiniz.
import { useQuery } from '@tanstack/react-query'

const fetchVehicles = async () => {
const response = await fetch('https://script-adı/getVehicles');
return response.json();
}

function VehicleList() {
const { data, isLoading, error } = useQuery({ queryKey: ['vehicles'], queryFn: fetchVehicles });

if (isLoading) return <div>Araçlar yükleniyor...</div>;
if (error) return <div>Hata oluştu!</div>;

return (
<ul>
{data.map(veh => <li key={veh.model}>{veh.name}</li>)}
</ul>
);
}

Discord: atlasqwe