React `use` Hook: Ovladavanje asinkronom potrošnjom resursa

React hookovi su revolucionirali način na koji upravljamo stanjem i popratnim pojavama (side effects) u funkcionalnim komponentama. Među najmoćnijim kombinacijama je korištenje useEffect i useState za rukovanje asinkronom potrošnjom resursa, kao što je dohvaćanje podataka s API-ja. Ovaj članak dubinski obrađuje zamršenosti korištenja hookova za asinkrone operacije, pokrivajući najbolje prakse, obradu pogrešaka i optimizaciju performansi za izgradnju robusnih i globalno dostupnih React aplikacija.

Razumijevanje osnova: useEffect i useState

Prije nego što zaronimo u složenije scenarije, ponovimo temeljne hookove koji su uključeni:

• useEffect: Ovaj hook omogućuje izvođenje popratnih pojava (side effects) u vašim funkcionalnim komponentama. Popratne pojave mogu uključivati dohvaćanje podataka, pretplate ili izravnu manipulaciju DOM-om.
• useState: Ovaj hook omogućuje dodavanje stanja vašim funkcionalnim komponentama. Stanje je ključno za upravljanje podacima koji se mijenjaju s vremenom, kao što su stanje učitavanja ili podaci dohvaćeni s API-ja.

Tipičan obrazac za dohvaćanje podataka uključuje korištenje useEffect za pokretanje asinkronog zahtjeva i useState za pohranu podataka, stanja učitavanja i eventualnih pogrešaka.

Jednostavan primjer dohvaćanja podataka

Krenimo s osnovnim primjerom dohvaćanja korisničkih podataka s hipotetskog API-ja:

Primjer: Dohvaćanje korisničkih podataka

```javascript import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(`https://api.example.com/users/${userId}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setUser(data); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [userId]); if (loading) { return

Učitavanje korisničkih podataka...

; } if (error) { return

Greška: {error.message}

; } if (!user) { return

Nema dostupnih korisničkih podataka.

; } return ( ); } export default UserProfile; ```

U ovom primjeru, useEffect dohvaća korisničke podatke svaki put kada se promijeni userId prop. Koristi async funkciju za rukovanje asinkronom prirodom fetch API-ja. Komponenta također upravlja stanjima učitavanja i pogrešaka kako bi pružila bolje korisničko iskustvo.

Rukovanje stanjima učitavanja i pogrešaka

Pružanje vizualne povratne informacije tijekom učitavanja i elegantno rukovanje pogreškama ključni su za dobro korisničko iskustvo. Prethodni primjer već demonstrira osnovno rukovanje učitavanjem i pogreškama. Proširimo te koncepte.

Stanja učitavanja

Stanje učitavanja trebalo bi jasno naznačiti da se podaci dohvaćaju. To se može postići jednostavnom porukom o učitavanju ili sofisticiranijim indikatorom učitavanja (loading spinner).

Primjer: Korištenje indikatora učitavanja

Umjesto jednostavne tekstualne poruke, mogli biste koristiti komponentu indikatora učitavanja:

```javascript // LoadingSpinner.js import React from 'react'; function LoadingSpinner() { return

; // Zamijenite sa svojom stvarnom komponentom indikatora učitavanja } export default LoadingSpinner; ```

```javascript // UserProfile.js (izmijenjeno) import React, { useState, useEffect } from 'react'; import LoadingSpinner from './LoadingSpinner'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { ... }, [userId]); // Isti useEffect kao i prije if (loading) { return ; // Koristite komponentu indikatora učitavanja } if (error) { return

Greška: {error.message}

; } if (!user) { return

Nema dostupnih korisničkih podataka.

; } return ( ... ); // Isti return kao i prije } export default UserProfile; ```

Obrada pogrešaka

Obrada pogrešaka trebala bi pružiti informativne poruke korisniku i potencijalno ponuditi načine oporavka od pogreške. To može uključivati ponovni pokušaj zahtjeva ili pružanje kontaktnih informacija za podršku.

Primjer: Prikazivanje korisnički prihvatljive poruke o pogrešci

```javascript // UserProfile.js (izmijenjeno) import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { ... }, [userId]); // Isti useEffect kao i prije if (loading) { return

Učitavanje korisničkih podataka...

; } if (error) { return ( ); } if (!user) { return

Nema dostupnih korisničkih podataka.

; } return ( ... ); // Isti return kao i prije } export default UserProfile; ```

Stvaranje prilagođenih hookova za ponovnu upotrebu

Kada se nađete u situaciji da ponavljate istu logiku dohvaćanja podataka u više komponenti, vrijeme je da stvorite prilagođeni hook. Prilagođeni hookovi promiču ponovnu upotrebu koda i olakšavaju održavanje.

Primjer: useFetch hook

Stvorimo useFetch hook koji enkapsulira logiku dohvaćanja podataka:

```javascript // useFetch.js import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP greška! status: ${response.status}`); } const jsonData = await response.json(); setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } export default useFetch; ```

Sada možete koristiti useFetch hook u svojim komponentama:

```javascript // UserProfile.js (izmijenjeno) import React from 'react'; import useFetch from './useFetch'; function UserProfile({ userId }) { const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`); if (loading) { return

Učitavanje korisničkih podataka...

; } if (error) { return

Greška: {error.message}

; } if (!user) { return

Nema dostupnih korisničkih podataka.

; } return ( ); } export default UserProfile; ```

useFetch hook značajno pojednostavljuje logiku komponente i olakšava ponovnu upotrebu funkcionalnosti dohvaćanja podataka u drugim dijelovima vaše aplikacije. Ovo je posebno korisno za složene aplikacije s brojnim ovisnostima o podacima.

Optimizacija performansi

Asinkrona potrošnja resursa može utjecati na performanse aplikacije. Evo nekoliko strategija za optimizaciju performansi pri korištenju hookova:

1. Debouncing i Throttling

Kada radite s vrijednostima koje se često mijenjaju, kao što je unos u polje za pretraživanje, debouncing i throttling mogu spriječiti prekomjerne API pozive. Debouncing osigurava da se funkcija pozove tek nakon određenog odgađanja, dok throttling ograničava učestalost pozivanja funkcije.

Primjer: Debouncing unosa za pretraživanje```javascript import React, { useState, useEffect } from 'react'; import useFetch from './useFetch'; function SearchComponent() { const [searchTerm, setSearchTerm] = useState(''); const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(''); useEffect(() => { const timerId = setTimeout(() => { setDebouncedSearchTerm(searchTerm); }, 500); // 500ms odgoda return () => { clearTimeout(timerId); }; }, [searchTerm]); const { data: results, loading, error } = useFetch(`https://api.example.com/search?q=${debouncedSearchTerm}`); const handleInputChange = (event) => { setSearchTerm(event.target.value); }; return (

); } export default SearchComponent; ```

U ovom primjeru, debouncedSearchTerm se ažurira tek nakon što korisnik prestane tipkati na 500ms, sprječavajući nepotrebne API pozive sa svakim pritiskom tipke. To poboljšava performanse i smanjuje opterećenje poslužitelja.

2. Predmemoriranje (Caching)

Predmemoriranje dohvaćenih podataka može značajno smanjiti broj API poziva. Možete implementirati predmemoriranje na različitim razinama:

• Predmemorija preglednika: Konfigurirajte svoj API da koristi odgovarajuće HTTP zaglavlja za predmemoriranje.
• Predmemorija u memoriji: Koristite jednostavan objekt za pohranu dohvaćenih podataka unutar vaše aplikacije.
• Trajna pohrana: Koristite localStorage ili sessionStorage za dugotrajnije predmemoriranje.

Primjer: Implementacija jednostavne predmemorije u memoriji u useFetch hooku

```javascript // useFetch.js (izmijenjeno) import { useState, useEffect } from 'react'; const cache = {}; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { setLoading(true); setError(null); if (cache[url]) { setData(cache[url]); setLoading(false); return; } try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP greška! status: ${response.status}`); } const jsonData = await response.json(); cache[url] = jsonData; setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, loading, error }; } export default useFetch; ```

Ovaj primjer dodaje jednostavnu predmemoriju u memoriji. Ako su podaci za određeni URL već u predmemoriji, dohvaćaju se izravno iz nje umjesto novog API poziva. To može dramatično poboljšati performanse za često pristupane podatke.

3. Memoizacija

Reactov useMemo hook može se koristiti za memoizaciju skupih izračuna koji ovise o dohvaćenim podacima. To sprječava nepotrebna ponovna iscrtavanja (re-renders) kada se podaci nisu promijenili.

Primjer: Memoizacija izvedene vrijednosti

```javascript import React, { useMemo } from 'react'; import useFetch from './useFetch'; function UserProfile({ userId }) { const { data: user, loading, error } = useFetch(`https://api.example.com/users/${userId}`); const formattedName = useMemo(() => { if (!user) return ''; return `${user.firstName} ${user.lastName}`; }, [user]); if (loading) { return

Učitavanje korisničkih podataka...

; } if (error) { return

Greška: {error.message}

; } if (!user) { return

Nema dostupnih korisničkih podataka.

; } return ( ); } export default UserProfile; ```

U ovom primjeru, formattedName se ponovno izračunava samo kada se promijeni user objekt. Ako user objekt ostane isti, vraća se memoizirana vrijednost, sprječavajući nepotrebne izračune i ponovna iscrtavanja.

4. Podjela koda (Code Splitting)

Podjela koda omogućuje vam da razbijete svoju aplikaciju na manje dijelove, koji se mogu učitavati na zahtjev. To može poboljšati početno vrijeme učitavanja vaše aplikacije, posebno za velike aplikacije s mnogo ovisnosti.

Primjer: Lijeno učitavanje (Lazy Loading) komponente

```javascript import React, { lazy, Suspense } from 'react'; const UserProfile = lazy(() => import('./UserProfile')); function App() { return ( Učitavanje korisničkog profila...

}> ); } export default App; ```

U ovom primjeru, UserProfile komponenta se učitava samo kada je potrebna. Suspense komponenta pruža zamjensko korisničko sučelje dok se komponenta učitava.

Rukovanje stanjem utrke (Race Conditions)

Stanja utrke mogu se dogoditi kada se više asinkronih operacija pokrene u istom useEffect hooku. Ako se komponenta demontira prije nego što se sve operacije dovrše, mogli biste naići na pogreške ili neočekivano ponašanje. Ključno je očistiti te operacije kada se komponenta demontira.

Primjer: Sprječavanje stanja utrke pomoću funkcije za čišćenje

```javascript import React, { useState, useEffect } from 'react'; function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { let isMounted = true; // Dodajte zastavicu za praćenje statusa montiranja komponente const fetchData = async () => { setLoading(true); setError(null); try { const response = await fetch(`https://api.example.com/users/${userId}`); if (!response.ok) { throw new Error(`HTTP greška! status: ${response.status}`); } const data = await response.json(); if (isMounted) { // Ažurirajte stanje samo ako je komponenta još uvijek montirana setUser(data); } } catch (error) { if (isMounted) { // Ažurirajte stanje samo ako je komponenta još uvijek montirana setError(error); } } finally { if (isMounted) { // Ažurirajte stanje samo ako je komponenta još uvijek montirana setLoading(false); } } }; fetchData(); return () => { isMounted = false; // Postavite zastavicu na false kada se komponenta demontira }; }, [userId]); if (loading) { return

Učitavanje korisničkih podataka...

; } if (error) { return

Greška: {error.message}

; } if (!user) { return

Nema dostupnih korisničkih podataka.

; } return (

{user.name}

Email: {user.email}

Lokacija: {user.location}

); } export default UserProfile; ```

U ovom primjeru, zastavica isMounted se koristi za praćenje je li komponenta još uvijek montirana. Stanje se ažurira samo ako je komponenta još uvijek montirana. Funkcija za čišćenje postavlja zastavicu na false kada se komponenta demontira, sprječavajući stanja utrke i curenje memorije. Alternativni pristup je korištenje `AbortController` API-ja za otkazivanje fetch zahtjeva, što je posebno važno kod većih preuzimanja ili dugotrajnijih operacija.

Globalna razmatranja za asinkronu potrošnju resursa

Prilikom izrade React aplikacija za globalnu publiku, uzmite u obzir sljedeće čimbenike:

• Mrežna latencija: Korisnici u različitim dijelovima svijeta mogu iskusiti različite mrežne latencije. Optimizirajte svoje API krajnje točke za brzinu i koristite tehnike poput predmemoriranja i podjele koda kako biste umanjili utjecaj latencije. Razmislite o korištenju CDN-a (Content Delivery Network) za posluživanje statičkih resursa s poslužitelja bližih vašim korisnicima. Na primjer, ako je vaš API smješten u Sjedinjenim Državama, korisnici u Aziji mogli bi iskusiti značajna kašnjenja. CDN može predmemorirati vaše API odgovore na različitim lokacijama, smanjujući udaljenost koju podaci trebaju prijeći.
• Lokalizacija podataka: Razmislite o potrebi lokalizacije podataka, kao što su datumi, valute i brojevi, ovisno o lokaciji korisnika. Koristite biblioteke za internacionalizaciju (i18n) poput react-intl za rukovanje formatiranjem podataka.
• Pristupačnost: Osigurajte da je vaša aplikacija dostupna korisnicima s invaliditetom. Koristite ARIA atribute i slijedite najbolje prakse pristupačnosti. Na primjer, pružite alternativni tekst za slike i osigurajte da je vaša aplikacija navigabilna pomoću tipkovnice.
• Vremenske zone: Budite svjesni vremenskih zona prilikom prikazivanja datuma i vremena. Koristite biblioteke poput moment-timezone za rukovanje pretvorbama vremenskih zona. Na primjer, ako vaša aplikacija prikazuje vremena događaja, pobrinite se da ih pretvorite u lokalnu vremensku zonu korisnika.
• Kulturna osjetljivost: Budite svjesni kulturnih razlika prilikom prikazivanja podataka i dizajniranja korisničkog sučelja. Izbjegavajte korištenje slika ili simbola koji bi mogli biti uvredljivi u određenim kulturama. Konzultirajte se s lokalnim stručnjacima kako biste osigurali da je vaša aplikacija kulturno prikladna.

Zaključak

Ovladavanje asinkronom potrošnjom resursa u Reactu pomoću hookova ključno je za izgradnju robusnih i performansnih aplikacija. Razumijevanjem osnova useEffect i useState, stvaranjem prilagođenih hookova za ponovnu upotrebu, optimizacijom performansi tehnikama poput debouncinga, predmemoriranja i memoizacije te rukovanjem stanjima utrke, možete stvoriti aplikacije koje pružaju izvrsno korisničko iskustvo korisnicima diljem svijeta. Uvijek se sjetite uzeti u obzir globalne čimbenike poput mrežne latencije, lokalizacije podataka i kulturne osjetljivosti pri razvoju aplikacija za globalnu publiku.

Dodatni resursi

• React useEffect dokumentacija
• React useState dokumentacija
• useHooks.com - Zbirka ponovno iskoristivih React hookova
• Fetch API dokumentacija