Help me bij het implementeren van aangepaste hooks voor het beheren van API-interacties in mijn React-toepassing
description
Door aangepaste hooks te implementeren, kunt u uw API-beheer vereenvoudigen, de herbruikbaarheid van code verbeteren en de algehele prestaties van uw React-toepassing verhogen. Deze aanpak leidt ook tot schonere componenten en gemakkelijker testen.
prompt
try_prompt
Help me aangepaste React hooks te maken die API-interacties in mijn toepassing stroomlijnen. Ik wil laadstatussen, foutafhandeling en gegevensophali ... more
generate_helper
...
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een voorbeeld van een aangepaste React hook die je kunt gebruiken om gegevens van jouw API-eindpunt https://api.example.com/users op te halen, inclusief beheer van laadstatus, foutafhandeling en gegevens:
```jsx
import { useState, useEffect } from 'react';
function useFetchUsers() {
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('https://api.example.com/users');
if (!response.ok) {
throw new Error(`Fout bij ophalen: ${response.status} ${response.statusText}`);
}
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchData();
}, []);
return { data, loading, error };
}
export default useFetchUsers;
```
**Gebruik in je component:**
```jsx
import React from 'react';
import useFetchUsers from './useFetchUsers';
function GebruikersLijst() {
const { data, loading, error } = useFetchUsers();
if (loading) return <p>Bezig met laden...</p>;
if (error) return <p>Fout: {error}</p>;
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
export default GebruikersLijst;
```
Deze hook kun je hergebruiken voor andere API-eindpunten door de URL aan te passen en eventueel de fetch logica te parametriseren. Wil je het uitbreiden met bijvoorbeeld POST-verzoeken of andere functionaliteiten, laat het gerust weten!
provider: deepseek
model: deepseek-chat
Zeker! Ik zal je helpen met het maken van aangepaste React hooks voor API-interacties. Hier is een complete implementatie met laadstatussen, foutafhandeling en gegevensophaling:
## 1. Basis API Hook
```jsx
import { useState, useEffect, useCallback } from 'react';
// Basis hook voor API-aanroepen
export const useApi = (url, options = {}) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const fetchData = useCallback(async (fetchOptions = {}) => {
setLoading(true);
setError(null);
try {
const response = await fetch(url, {
...options,
...fetchOptions,
headers: {
'Content-Type': 'application/json',
...options.headers,
...fetchOptions.headers,
},
});
if (!response.ok) {
throw new Error(`HTTP fout! status: ${response.status}`);
}
const result = await response.json();
setData(result);
return result;
} catch (err) {
setError(err.message);
throw err;
} finally {
setLoading(false);
}
}, [url, options]);
useEffect(() => {
if (options.autoFetch !== false) {
fetchData();
}
}, [fetchData, options.autoFetch]);
const refetch = () => fetchData();
return {
data,
loading,
error,
refetch,
fetchData,
};
};
```
## 2. Gespecialiseerde Hook voor Gebruikers
```jsx
import { useCallback } from 'react';
import { useApi } from './useApi';
// Gespecialiseerde hook voor gebruikersbeheer
export const useUsers = () => {
const baseUrl = 'https://api.example.com/users';
// Hook voor ophalen van alle gebruikers
const useGetUsers = () => useApi(baseUrl);
// Hook voor ophalen van specifieke gebruiker
const useGetUser = (userId) => useApi(userId ? `${baseUrl}/${userId}` : null);
// Hook voor maken van nieuwe gebruiker
const useCreateUser = () => {
const [creating, setCreating] = useState(false);
const [createError, setCreateError] = useState(null);
const createUser = useCallback(async (userData) => {
setCreating(true);
setCreateError(null);
try {
const response = await fetch(baseUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(userData),
});
if (!response.ok) {
throw new Error(`Gebruiker aanmaken mislukt: ${response.status}`);
}
return await response.json();
} catch (err) {
setCreateError(err.message);
throw err;
} finally {
setCreating(false);
}
}, []);
return { createUser, creating, createError };
};
// Hook voor bijwerken van gebruiker
const useUpdateUser = () => {
const [updating, setUpdating] = useState(false);
const [updateError, setUpdateError] = useState(null);
const updateUser = useCallback(async (userId, userData) => {
setUpdating(true);
setUpdateError(null);
try {
const response = await fetch(`${baseUrl}/${userId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(userData),
});
if (!response.ok) {
throw new Error(`Gebruiker bijwerken mislukt: ${response.status}`);
}
return await response.json();
} catch (err) {
setUpdateError(err.message);
throw err;
} finally {
setUpdating(false);
}
}, []);
return { updateUser, updating, updateError };
};
// Hook voor verwijderen van gebruiker
const useDeleteUser = () => {
const [deleting, setDeleting] = useState(false);
const [deleteError, setDeleteError] = useState(null);
const deleteUser = useCallback(async (userId) => {
setDeleting(true);
setDeleteError(null);
try {
const response = await fetch(`${baseUrl}/${userId}`, {
method: 'DELETE',
});
if (!response.ok) {
throw new Error(`Gebruiker verwijderen mislukt: ${response.status}`);
}
return true;
} catch (err) {
setDeleteError(err.message);
throw err;
} finally {
setDeleting(false);
}
}, []);
return { deleteUser, deleting, deleteError };
};
return {
useGetUsers,
useGetUser,
useCreateUser,
useUpdateUser,
useDeleteUser,
};
};
```
## 3. Gebruik in Componenten
```jsx
import React from 'react';
import { useUsers } from './hooks/useUsers';
// Voorbeeld component voor gebruikerslijst
const UsersList = () => {
const { useGetUsers } = useUsers();
const { data: users, loading, error, refetch } = useGetUsers();
if (loading) return <div>Gebruikers laden...</div>;
if (error) return <div>Fout: {error}</div>;
return (
<div>
<h2>Gebruikers</h2>
<button onClick={refetch}>Vernieuwen</button>
<ul>
{users?.map(user => (
<li key={user.id}>{user.name} - {user.email}</li>
))}
</ul>
</div>
);
};
// Voorbeeld component voor nieuwe gebruiker
const CreateUserForm = () => {
const { useCreateUser } = useUsers();
const { createUser, creating, createError } = useCreateUser();
const handleSubmit = async (event) => {
event.preventDefault();
const formData = new FormData(event.target);
try {
await createUser({
name: formData.get('name'),
email: formData.get('email'),
});
event.target.reset();
alert('Gebruiker succesvol aangemaakt!');
} catch (err) {
console.error('Fout bij aanmaken gebruiker:', err);
}
};
return (
<form onSubmit={handleSubmit}>
<h2>Nieuwe Gebruiker</h2>
{createError && <div style={{color: 'red'}}>Fout: {createError}</div>}
<input name="name" placeholder="Naam" required />
<input name="email" type="email" placeholder="E-mail" required />
<button type="submit" disabled={creating}>
{creating ? 'Aanmaken...' : 'Gebruiker Aanmaken'}
</button>
</form>
);
};
// Hoofd component
const App = () => {
return (
<div>
<h1>Gebruikersbeheer</h1>
<CreateUserForm />
<UsersList />
</div>
);
};
export default App;
```
## 4. Geavanceerde Hook met Cache en Retry
```jsx
import { useCallback, useRef } from 'react';
export const useAdvancedApi = (url, options = {}) => {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const cache = useRef(new Map());
const fetchWithRetry = useCallback(async (retries = 3, delay = 1000) => {
for (let attempt = 1; attempt <= retries; attempt++) {
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const result = await response.json();
cache.current.set(url, result);
return result;
} catch (err) {
if (attempt === retries) throw err;
await new Promise(resolve => setTimeout(resolve, delay * attempt));
}
}
}, [url, options]);
const fetchData = useCallback(async () => {
// Cache check
if (cache.current.has(url)) {
setData(cache.current.get(url));
return;
}
setLoading(true);
setError(null);
try {
const result = await fetchWithRetry();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
}, [url, fetchWithRetry]);
useEffect(() => {
fetchData();
}, [fetchData]);
return {
data,
loading,
error,
refetch: fetchData,
};
};
```
Deze hooks bieden:
- **Laadstatussen**: `loading` state voor UI feedback
- **Foutafhandeling**: `error` state voor foutmeldingen
- **Hergebruik**: Eenvoudig te hergebruiken in verschillende componenten
- **Type-safety**: Duidelijke return types
- **Cache**: Optionele caching voor betere prestaties
- **Retry mechanisme**: Automatische retry bij falende requests
Je kunt deze hooks eenvoudig uitbreiden met extra functionaliteit zoals request annulering, paginering, of authenticatie headers.