Hooks (useState, useEffect, useContext og flere) er React-funktioner til at håndtere state og side effects i funktionelle komponenter — og de fungerer på samme måde i React Native. Forståelse af de vigtigste hooks er afgørende for at 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 (datahentning, abonnementer, timere) med et dependency array, der styrer, hvornår det køres, og en valgfri cleanup-funktion (vigtig for at forhindre hukommelseslækager).
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åelse af React hooks er vigtig for React Native, fordi hooks er standardmåden at håndtere state og side effects i funktionelle komponenter, som er sådan moderne React Native-apps bygges, så det er vigtig viden.
Hooks fungerer identisk i React Native som i React til web, hvilket gør denne viden direkte overførbar. useState (håndtering af state, udløsning af re-renders) er fundamental for enhver komponent med skiftende data. useEffect er særligt vigtig: den håndterer side effects (datahentning, abonnementer, timere) med et dependency array, der styrer, hvornår den køres, og en valgfri cleanup-funktion (afgørende for at forhindre lækager ved at afmelde/rydde op) — forståelse af useEffect, dets dependency array og cleanup er vigtig, da side effects (som datahentning, når en skærm indlæses) er almindelige, og hvis useEffect bruges forkert, forårsager det fejl (uendelige loops fra forkerte dependencies, lækager fra manglende cleanup).
Forståelse af andre vigtige hooks — useContext (forbrug af delt data uden prop drilling), useRef (vedvarende mutable referencer), useMemo/useCallback (memoization for performance), useReducer (kompleks state) og custom hooks (udpakning af genanvendelig stateful logik som useFetch eller useAuth — et kraftfuldt mønster for kodegenbrug) — dækker værktøjskassen til at bygge rigtige komponenter.
Forståelse af reglerne for hooks (kun at kalde dem på øverste niveau og kun fra komponenter/custom hooks, da React afhænger af call order) er vigtig for at undgå subtile fejl.
Da hooks er standardmekanismen for state og side effects i moderne funktionelle React Native-komponenter (og viden overføres direkte fra React), og da forståelse af de vigtigste hooks (især useState og useEffect med dets cleanup) og reglerne er vigtig for at bygge korrekte komponenter, er forståelse af React hooks vigtig, hyppigt brugt React Native-viden — fundamental for at bygge moderne React Native-komponenter, central for at håndtere state og side effects og direkte overførbar fra web React, en kernefærdighed til React Native-udvikling.