useCallback — viktiga begrepp, hooken för memoization av funktioner i React

Vad är useCallback i React

useCallback — är en hook som lades till i React 16.8 och som memoiserar funktionen: den returnerar samma referens tills beroendena ändras. Utan useCallback skapar varje deklaration av en funktion inuti komponenten ett nytt funktionsobjekt vid varje render. För primitiva värden är detta omärkbart, men när sådana callbacks skickas till barnkomponenter som optimerats genom React.memo orsakar varje ny referens en re-render av barnkomponenten.

Syntaxmässigt är useCallback ekvivalent med useMemo för funktioner: useCallback(fn, deps) — är en förkortning för useMemo(() => fn, deps). React lagrar den memoiserade funktionen i den interna lagringen av fiber-noden och jämför beroendena vid varje render. Om beroendena inte har ändrats (Object.is för varje element) returneras den tidigare funktionen.

Enligt React Documentation — useCallback (2025) behöver du inte linda in varje funktion i useCallback. Hooken har sitt pris: anrop av hooken, jämförelse av beroenden och minnesallokering för beroendearrayen. Om komponenten är enkel och inte har djupa träd med React.memo kommer useCallback bara att sakta ner applikationen. Optimering måste vara mätbar, inte intuitiv.

import { useCallback } from 'react';

function Parent() {
    const [count, setCount] = useState(0);

    // Stabil referens — samma funktion tills deps ändras
    const handleClick = useCallback(() => {
        setCount(prev => prev + 1);
    }, []);

    return <Child onClick={handleClick} />;
}

Hur fungerar memoization av funktioner

Memoization i useCallback bygger på cachelagring av resultatet av funktionsanropet. React bevarar den closure som skapades vid den första rendern och returnerar den vid efterföljande renderningar så länge beroendena förblir oförändrade. Inuti fiber-noden skapar varje useCallback-anrop en nod i hookarnas länkade lista, där tidigare beroenden och det memoiserade värdet lagras.

Processen för att jämföra beroenden sker strikt genom Object.is — det är en ytlig jämförelse, utan djup kontroll av objekt eller arrayer. Om det finns ett objekt eller en array i beroendena kommer den nya referensen vid varje render att betraktas som en ändring. Därför måste du i beroendearrayen skicka primitiva värden eller stabila referenser (till exempel från useRef eller useMemo).

Enligt React Core Team — Optimization Guide (2024) omfattar kostnaden för memoization tre komponenter: allokering av beroendearrayen vid varje render, genomgång och jämförelse av elementen genom Object.is samt potentiell overhead från garbage collection vid återskapande. För en komponent med hundratals useCallback-inpackningar kan detta bli märkbart — därför är selektivitet i användningen av hooken avgörande.

useCallback och prestanda

Det finns en utbredd myt om att useCallback automatiskt förbättrar prestandan. I verkligheten saktar useCallback i isolering (utan React.memo) till och med ner applikationen något på grund av kostnaden för att jämföra beroenden. Hooken ger verklig nytta endast i tre scenarier: förhindrande av re-renders av React.memo-komponenter, stabilitet för callbacks i useEffect och överföring till custom hooks som beror på reference equality.

Regeln är enkel: tills du har hittat ett prestandaproblem genom React DevTools Profiler — använd inte useCallback. React-teamet har upprepade gånger betonat att för tidig optimering är roten till allt ont. Skriv först ren kod utan memoization, mät, hitta flaskhalsen i profileraren och lägg först därefter till useCallback där det verkligen behövs.

// Mätbar optimering: Child är inlindad i React.memo
const Child = React.memo(({ onClick }) => {
    console.log('Child re-rendrade');
    return <button onClick={onClick}>Click</button>;
});

function Parent() {
    const handleClick = useCallback(() => {
        console.log('klickat');
    }, []);
    return <Child onClick={handleClick} />;
}

Enligt Dan Abramov — Before You memo() (2024) är över 90 % av användningarna av useCallback i open source-projekt överflödiga. Utvecklare lindar in varje funktion "för säkerhets skull" utan att mäta effekten. Alternativ: om barnkomponenten är tung och dess re-render är dyr — är React.memo + useCallback motiverade. Om barnkomponenten är lätt — är en re-render billigare än att jämföra beroenden.

När ska du använda useCallback

Första scenariot — React.memo. Om barnkomponenten är inlindad i React.memo och tar emot en callback-funktion som prop, kommer barnkomponenten utan useCallback att ritas om vid varje render av föräldern, även om dess egna data inte har ändrats. useCallback stabiliserar referensen och React.memo kan korrekt hoppa över re-rendern.

Andra scenariot — useEffect med callback i beroendena. Om funktionen skickas till useEffects beroendearray kommer varje ny referens att starta om effekten. useCallback garanterar att referensen är stabil och att effekten endast körs när de faktiska data ändras, inte vid varje render. Detta är särskilt viktigt för prenumerationer och förfrågningar.

• React.memo children — förhindrar re-renders av memoiserade barnkomponenter vid överföring av callbacks.
• useEffect dependencies — stabiliserar funktionen i effektens beroendearray och förhindrar onödiga omstarter.
• Custom hooks — om hooken tar emot en callback och beror på dess reference equality är useCallback obligatorisk.
• Context value — om en funktion skickas i kontextens value stabiliserar useMemo tillsammans med useCallback referensen.

// useCallback för stabil useEffect-beroende
const fetchData = useCallback(async (id) => {
    const res = await fetch(`/api/${id}`);
    setData(res.data);
}, []); // stabil referens, återskapas aldrig

useEffect(() => {
    fetchData(props.id);
}, [props.id, fetchData]); // effekten körs endast när props.id ändras

useCallback vs useMemo

Den främsta skillnaden mellan useCallback och useMemo är vad var och en memoiserar. useCallback memoiserar funktionen: useCallback(fn, deps) returnerar fn (samma eller tidigare version). useMemo memoiserar resultatet av funktionsanropet: useMemo(() => computeExpensive(a, b), [a, b]) returnerar det beräknade värdet, inte funktionen.

Tekniskt sett är useCallback syntaktiskt socker ovanpå useMemo: useCallback(fn, deps) är ekvivalent med useMemo(() => fn, deps). Denna syntax finns endast för läsbarhetens skull — så att utvecklaren tydligt ser att det är just funktionen som memoiseras, inte värdet. Det finns ingen skillnad i prestanda mellan useCallback och useMemo med funktion — de genererar samma kod.

// Dessa är ekvivalenta:
const handleClick = useCallback(() => doSomething(a, b), [a, b]);
const handleClick = useMemo(() => () => doSomething(a, b), [a, b]);

Vanliga misstag med useCallback

Det vanligaste misstaget — att meningslöst linda in alla funktioner i useCallback utan React.memo på barnkomponenter. Om barnkomponenten inte är inlindad i React.memo kommer den ändå att re-rendras vid varje render av föräldern, oavsett om callbackens referens ändras eller inte. useCallback utan React.memo — kostnad utan nytta.

• useCallback utan React.memo — barnkomponenten re-rendrar ändå; optimeringen är meningslös.
• Glömda beroenden — om en variabel som inte finns i deps används inuti callbacken innehåller callbacken en stale closure.
• Överdriven memoization — att linda in varje funktion, inklusive triviala onClick med console.log.
• Objekt och arrayer i beroendena — den nya referensen vid varje render betraktas som en ändring, memoizationen är värdelös.

// ❌ Värdelös: utan React.memo på child
const handle = useCallback(() => doStuff(), []);
<Child onClick={handle} />; // Child re-rendrar ändå utan React.memo

// ❌ Stale closure: saknat beroende
const handle = useCallback(() => {
    console.log(count); // count är alltid 0 — stale closure!
}, []);

// ✅ Korrekt: inkludera beroenden
const handle = useCallback(() => {
    console.log(count);
}, [count]);

Problemet med stale closure i useCallback löses genom att ange alla använda variabler i beroendearrayen. eslint-plugin-react-hooks med exhaustive-deps kontrollerar automatiskt att alla variabler från callback-kroppen finns i arrayen. Om callbacken använder setState, som inte ändras mellan renderningar, kan den säkert anges i deps — React garanterar stabiliteten för setState.