Hooks (useState, useEffect, useContext, og flere) er React-funksjoner for å håndtere state og side effects i funksjonelle komponenter — og de fungerer på samme måte i React Native. Å forstå de viktigste hooks er essensielt for å bygge React Native-komponenter.
const [count, setCount] = useState(0); // state + setter; setting it re-renders
const [user, setUser] = ();
// useEffect runs side effects (data fetching, subscriptions) after render
useEffect(() => {
fetchData(); // runs after render
// optional CLEANUP (returned function) — runs on unmount / before re-running
const sub = subscribe();
return () => sub.unsubscribe(); // CLEAN UP (prevent leaks)
}, [dependency]); // dependency array → when to re-run
// → [] = run once on mount; [dep] = run when dep changes; none = every render
useEffect håndterer side effects (henting av data, abonnementer, timere) med en dependency array som kontrollerer når den kjøres, og en valgfri cleanup-funksjon (viktig for å forhindre lekkasjer).
useContext → consume context (shared data without prop drilling)
useRef → a mutable reference that persists across renders (e.g. reference a component,
store a value without re-rendering)
useMemo → memoize an expensive computed value (performance)
useCallback → memoize a function (avoid unnecessary re-creation/re-renders)
useReducer → manage complex state with a reducer
CUSTOM HOOKS → extract reusable stateful logic (e.g. useFetch, useAuth)
⚠️ Only call hooks at the TOP LEVEL of a component (not in conditions/loops/nested functions)
⚠️ Only call hooks from React components or custom hooks
→ These rules ensure hooks work correctly (React relies on call order).
Å forstå React hooks er essensielt for React Native fordi hooks er standardmåten å håndtere state og side effects i funksjonelle komponenter, som er hvordan moderne React Native-apper bygges, så det er obligatorisk kunnskap.
Hooks fungerer identisk i React Native som i React for web, noe som gjør denne kunnskapen direkte overførbar. useState (håndtere state, utløse re-render) er fundamental for enhver komponent med endrede data. useEffect er særlig viktig: den håndterer side effects (datahenting, abonnementer, timere) med en dependency array som kontrollerer når den kjøres, og en valgfri cleanup-funksjon (avgjørende for å forhindre lekkasjer ved å avmelde/rydde opp) — å forstå useEffect, dens dependency array, og cleanup er essensielt siden side effects (som datahenting når en skjerm lastes) er vanlig, og å få useEffect feil forårsaker bugs (uendelige løkker fra feil dependencies, lekkasjer fra manglende cleanup).
Å forstå andre viktige hooks — useContext (forbruke delt data uten prop drilling), useRef (vedvarende mutable referanser), useMemo/useCallback (memoization for ytelse), useReducer (kompleks state), og custom hooks (trekk ut gjenbrukbar stateful logikk som useFetch eller useAuth — et kraftig mønster for kodegjenbruk) — dekker verktøykassen for å bygge virkelige komponenter.
Å forstå reglene for hooks (kall dem kun på toppnivå og kun fra komponenter/custom hooks, siden React er avhengig av kallrekkefølge) er essensielt for å unngå subtile bugs.
Siden hooks er standardmekanismen for state og side effects i moderne funksjonelle React Native-komponenter (og kunnskapen overføres direkte fra React), og siden det å forstå de viktigste hooks (særlig useState og useEffect med dens cleanup) og reglene er essensielt for å bygge riktige komponenter, er det å forstå React hooks essensielt, hyppig brukt React Native-kunnskap — fundamental for å bygge moderne React Native-komponenter, sentral for å håndtere state og side effects, og direkte overførbar fra web React, en kjerneferdighet for React Native-utvikling.