Skriva anpassade hooks
Bryt ut tillståndsberoende logik till en återanvändbar anpassad hook, dela den mellan två komponenter och följ namnkonventionen och reglerna för hooks.
Skriva anpassade hooks är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad är anpassade hooks?
Anpassade hooks är JavaScript-funktioner vars namn börjar med use och som kan anropa andra React-hooks inuti sig. De gör det möjligt att flytta tillståndslogik från en komponent till en återanvändbar funktion. Logiken delas, men varje komponent som anropar den anpassade hooken får sitt eget isolerade tillstånd – anpassade hooks är inte singletoner.
Hook-reglerna gäller även anpassade hooks
Anpassade hooks följer samma regler som inbyggda hooks: anropa endast hooks på toppnivå, inte i loopar eller villkor, och anropa endast hooks från React-funktionskomponenter eller andra anpassade hooks. Namnprefixet use krävs – det signalerar till React och linterverktyg att funktionen följer dessa regler.
// 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 };
}En anpassad useCounter-hook
Hooken useCounter kapslar in en räknarens tillstånd samt åtgärderna för att öka, minska och återställa värdet. Alla komponenter som behöver en räknare kan anropa useCounter utan att upprepa logiken för tillståndshantering. Varje anrop till hooken skapar en oberoende räknare.
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>
);
}En anpassad useFetch-hook
Hooken useFetch kapslar in det vanliga mönstret för att hämta data med useEffect: den hanterar tillstånden laddar, data och fel internt och gör dem tillgängliga för komponenten. URL:en är ett beroende – om den ändras körs hämtningen på nytt.
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 };
}Använda useFetch-hooken
Komponenter som använder useFetch blir betydligt enklare. Komponenten beskriver bara vad som ska renderas för varje tillstånd (laddar, fel och data), utan att själv hantera någon hämtning. Om samma slutpunkt behövs på en annan skärm anropar du bara useFetch igen – ingen kodduplicering behövs.
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>}
/>
);
}En anpassad useToggle-hook
Hooken useToggle förenklar hanteringen av booleskt tillstånd som behöver växla mellan true och false. Den är användbar för modaler, dragspel, mörkt läge och andra funktioner som kan växlas. Hooken returnerar det aktuella värdet och en stabil toggle-funktion.
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} ... />En anpassad useForm-hook
Hooken useForm hanterar formulärets fältvärden, ändringshanterare och återställningsåtgärd. Det här mönstret eliminerar överflödig standardkod i formulär i hela appen. Hooken tar emot ett objekt med de ursprungliga fältvärdena och returnerar de aktuella värdena, en generell hanterare för fältändringar och en återställningsfunktion.
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 };
}En anpassad useNetworkStatus-hook
Hooken useNetworkStatus kapslar in NetInfo-API:t för att visa om enheten är online eller offline. Komponenter kan helt enkelt läsa det booleska värdet utan att känna till hur prenumeration på händelser konfigureras och avslutas – hooken hanterar detta internt med en rensningsfunktion i 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;
}Dela logik mellan komponenter
Den verkliga styrkan hos anpassade hookar ligger i att dela logik, inte användargränssnitt. Två skärmar kan båda anropa useNetworkStatus, och varje skärm får sin egen prenumeration. Om hooken har en sidoeffekt (till exempel en prenumeration) rensas den automatiskt bort när komponenten som använder den avmonteras. Varje komponents hook-instans är helt oberoende.
// 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' />;
}Namngivning och organisering av anpassade hookar
Ge anpassade hookar beskrivande namn: useAuth, useCart, useDebounce, useWindowDimensions. Förvara hookar i en särskild katalog med namnet hooks/ så att de hålls organiserade och är lätta att hitta. Varje hook bör ha ett enda tydligt ansvarsområde – undvik att skapa hookar som gör fem orelaterade saker.
// Project structure
src/
hooks/
useAuth.js
useFetch.js
useForm.js
useToggle.js
useNetworkStatus.jsEn anpassad useDebounce-hook
Hooken useDebounce fördröjer vidarebefordringen av ett värde tills en angiven tid har gått sedan den senaste uppdateringen. Den passar perfekt för sökfält där du vill vänta tills användaren har slutat skriva innan en API-begäran skickas. Hooken använder useEffect och en timer för att hantera fördröjningen.
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]);Snabbtest
Testa dina kunskaper om att skriva anpassade hookar från den här lektionen.
Sammanfattning av lektionen
I den här lektionen lärde du dig att anpassade hookar är funktioner som börjar med 'use' och kapslar in logik med tillstånd, att varje komponent som anropar en anpassad hook får sitt eget oberoende tillstånd och sina egna sidoeffekter samt att organisera hookar i en särskild hooks/-katalog så att varje hook har ett enda ansvarsområde. Härnäst utforskar vi Context API för att dela globalt tillstånd utan prop drilling.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Skriva anpassade hooks” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Skriva anpassade hooks”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Skriva anpassade hooks”?
Bryt ut tillståndsberoende logik till en återanvändbar anpassad hook, dela den mellan två komponenter och följ namnkonventionen och reglerna för hooks. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Skriva anpassade hooks”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Native Academy-lektionen?
Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- useRef för DOM-noder och föränderliga värden
- useReducer för komplex tillståndslogik
- useCallback och useMemo för bättre prestanda
- Skriva anpassade hooks