Aangepaste hooks schrijven
Haal stateful logica uit naar een herbruikbare custom hook, deel deze tussen twee componenten en volg de naamgevingsconventie en regels voor hooks.
Aangepaste hooks schrijven is een gratis React Native Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Wat zijn aangepaste hooks?
Aangepaste hooks zijn JavaScript-functies waarvan de namen beginnen met use en die andere React-hooks mogen aanroepen. Hiermee kun je stateful logica uit een component halen en in een herbruikbare functie onderbrengen. De logica wordt gedeeld, maar elke component die de aangepaste hook aanroept, krijgt een eigen geïsoleerde toestand — aangepaste hooks zijn geen singletons.
De regels voor hooks gelden ook voor aangepaste hooks
Aangepaste hooks volgen dezelfde regels als ingebouwde hooks: roep hooks alleen op het hoogste niveau aan (niet binnen lussen of voorwaarden) en roep hooks alleen aan vanuit React-functiecomponenten of andere aangepaste hooks. Het naamvoorvoegsel use is vereist — het geeft React en linters aan dat de functie deze regels volgt.
// Valid custom hook — starts with 'use'
function useCounter(initialValue) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(c => c + 1);
const decrement = () => setCount(c => c - 1);
const reset = () => setCount(initialValue);
return { count, increment, decrement, reset };
}Een aangepaste useCounter-hook
De hook useCounter kapselt de status van een teller en de acties voor verhogen, verlagen en resetten in. Elk component dat een teller nodig heeft, kan useCounter aanroepen zonder de logica voor statusbeheer te herhalen. Elke aanroep van de hook maakt een onafhankelijke teller.
function CounterScreen() {
const { count, increment, decrement, reset } = useCounter(0);
return (
<View>
<Text>Count: {count}</Text>
<Button title='+' onPress={increment} />
<Button title='-' onPress={decrement} />
<Button title='Reset' onPress={reset} />
</View>
);
}Een aangepaste useFetch-hook
Een useFetch-hook verpakt het veelvoorkomende patroon voor het ophalen van gegevens met useEffect: de hook beheert de statussen voor laden, gegevens en fouten intern en maakt ze beschikbaar voor het component. De URL is een afhankelijkheid — als die verandert, wordt het ophalen opnieuw gestart.
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then((res) => res.json())
.then((json) => { setData(json); setLoading(false); })
.catch((err) => { setError(err); setLoading(false); });
}, [url]);
return { data, loading, error };
}De useFetch-hook gebruiken
Componenten die useFetch gebruiken, worden aanzienlijk eenvoudiger. Het component beschrijft alleen wat er voor elke status moet worden weergegeven (laden, fout, gegevens), zonder zelf ophaallogica te beheren. Als hetzelfde eindpunt in een ander scherm nodig is, roep je gewoon opnieuw useFetch aan — zonder dubbele code.
function PostsScreen() {
const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts');
if (loading) return <ActivityIndicator />;
if (error) return <Text>Error: {error.message}</Text>;
return (
<FlatList
data={data}
keyExtractor={(item) => String(item.id)}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>
);
}Een aangepaste useToggle-hook
Een useToggle-hook vereenvoudigt het beheer van een booleaanse status die tussen waar en onwaar moet wisselen. Dit is handig voor modals, accordeons, de donkere modus en elke andere functie die kan worden aan- of uitgezet. De hook retourneert de huidige waarde en een stabiele togglefunctie.
function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);
const toggle = useCallback(() => setValue((v) => !v), []);
return [value, toggle];
}
// Usage
const [isVisible, toggleVisible] = useToggle(false);
<Button title='Show/Hide' onPress={toggleVisible} />
<Modal visible={isVisible} ... />Een aangepaste useForm-hook
Een useForm-hook beheert de waarden van formuliervelden, de wijzigingshandler en de resetactie. Dit patroon voorkomt herhalende basiscode in formulieren door de hele app. De hook accepteert een object met de beginwaarden van de velden en retourneert de huidige waarden, een algemene handler voor wijzigingen in velden en een resetfunctie.
function useForm(initialValues) {
const [values, setValues] = useState(initialValues);
const handleChange = useCallback((field, value) => {
setValues((prev) => ({ ...prev, [field]: value }));
}, []);
const reset = useCallback(() => setValues(initialValues), [initialValues]);
return { values, handleChange, reset };
}Een aangepaste useNetworkStatus-hook
Een useNetworkStatus-hook verpakt de NetInfo-API om de online- of offlinestatus van het apparaat beschikbaar te maken. Componenten kunnen eenvoudig de booleaanse waarde lezen zonder iets te weten over het instellen en opruimen van gebeurtenisabonnementen — de hook handelt dat intern af met een opruimfunctie van useEffect.
import NetInfo from '@react-native-community/netinfo';
function useNetworkStatus() {
const [isOnline, setIsOnline] = useState(true);
useEffect(() => {
const unsubscribe = NetInfo.addEventListener((state) => {
setIsOnline(state.isConnected ?? true);
});
return unsubscribe; // cleanup on unmount
}, []);
return isOnline;
}Logica delen tussen componenten
De echte kracht van aangepaste hooks zit in het delen van logica, niet van de gebruikersinterface. Twee schermen kunnen allebei useNetworkStatus aanroepen en krijgen elk hun eigen abonnement. Als de hook een bijwerking heeft (zoals een abonnement), wordt die automatisch opgeruimd wanneer het component dat de hook gebruikt, wordt ontkoppeld. Elke instantie van de hook in een component is volledig onafhankelijk.
// Both screens share the same logic, not the same state
function HomeScreen() {
const isOnline = useNetworkStatus();
return <Text>{isOnline ? 'Online' : 'Offline'}</Text>;
}
function ProfileScreen() {
const isOnline = useNetworkStatus(); // independent subscription
return <Banner visible={!isOnline} message='No connection' />;
}Naamgeving en organisatie van aangepaste hooks
Geef aangepaste hooks beschrijvende namen: useAuth, useCart, useDebounce, useWindowDimensions. Bewaar hooks in een speciale map hooks/, zodat ze georganiseerd en gemakkelijk terug te vinden zijn. Elke hook hoort één duidelijke verantwoordelijkheid te hebben — vermijd hooks die vijf ongerelateerde dingen doen.
// Project structure
src/
hooks/
useAuth.js
useFetch.js
useForm.js
useToggle.js
useNetworkStatus.jsEen aangepaste useDebounce-hook
Een useDebounce-hook stelt het doorgeven van een waarde uit totdat er een opgegeven tijd is verstreken sinds de laatste wijziging. Dit is ideaal voor zoekvelden waarbij je wilt wachten tot de gebruiker klaar is met typen voordat je een API-aanvraag verstuurt. De hook gebruikt useEffect en een timer om de vertraging te beheren.
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debouncedValue;
}
// Usage
const debouncedQuery = useDebounce(searchQuery, 400);
useEffect(() => { fetchResults(debouncedQuery); }, [debouncedQuery]);Korte controle
Test je begrip van het schrijven van aangepaste hooks uit deze les.
Samenvatting van de les
In deze les heb je geleerd dat aangepaste hooks functies zijn die met 'use' beginnen en logica met status inkapselen, dat elk component dat een aangepaste hook aanroept zijn eigen onafhankelijke status en bijwerkingen krijgt en dat je hooks in een speciale map hooks/ organiseert, waarbij elke hook één verantwoordelijkheid heeft. Hierna verkennen we de Context API voor het delen van globale status zonder prop drilling.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Aangepaste hooks schrijven” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Aangepaste hooks schrijven”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “Aangepaste hooks schrijven”?
Haal stateful logica uit naar een herbruikbare custom hook, deel deze tussen twee componenten en volg de naamgevingsconventie en regels voor hooks. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Aangepaste hooks schrijven”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- useRef voor DOM-nodes en veranderlijke waarden
- useReducer voor complexe statuslogica
- useCallback en useMemo voor betere prestaties
- Aangepaste hooks schrijven