React Native Academy · Lektion

useEffect-hooken och beroendearrayer

Förstå när useEffect körs, styr den med en beroendearray och städa upp prenumerationer eller timers genom att returnera en städfunktion.

Lektion 1 av 413 steg

useEffect-hooken och beroendearrayer är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 1 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 useEffect?

useEffect gör det möjligt för funktionskomponenter att utföra biverkningar: hämta data, konfigurera prenumerationer, manipulera DOM, starta timers eller anropa native API:er. Biverkningar kan inte köras direkt i renderingsfunktionen eftersom renderingar måste vara rena. useEffect körs efter att komponenten har renderats på skärmen.

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    console.log('Component rendered');
    // Side effects go here
  });
}

Beroendearrayen

Det andra argumentet till useEffect är beroendearrayen. React använder den för att avgöra när effekten ska köras igen. Om beroendearrayen utelämnas körs effekten efter varje rendering. Om den är tom ([]) körs effekten en gång efter den första renderingen. Om den innehåller värden körs effekten igen när något av dessa värden ändras.

// Runs after every render
useEffect(() => { ... });

// Runs once on mount
useEffect(() => { ... }, []);

// Runs on mount and whenever userId changes
useEffect(() => { ... }, [userId]);

Hämta data vid montering

Det vanligaste useEffect-mönstret är att hämta data när en komponent monteras för första gången. Skicka med en tom beroendearray för att säkerställa att hämtningen körs exakt en gång. Spara resultatet i tillståndet och rendera det i JSX. React anropar effekten efter den första visningen, så komponenten renderas först med ett tomt eller laddande tillstånd innan datan anländer.

function PostsScreen() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []); // empty array = run once on mount

  return <FlatList data={posts} ... />;
}

Reaktiva beroenden

När du vill att effekten ska köras igen varje gång ett värde ändras, till exempel en sökfråga eller ett användar-ID, anger du värdet i beroendearrayen. React jämför varje beroende med dess föregående värde efter varje rendering och kör effekten igen om något har ändrats. Detta skapar ett reaktivt dataflöde: UI-händelse → tillståndsuppdatering → effekten körs igen.

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/users/' + userId)
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, [userId]); // re-fetch whenever userId changes

  if (!user) return <ActivityIndicator />;
  return <Text>{user.name}</Text>;
}

Rensningsfunktionen

Returnera en funktion från effekten för att utföra rensning. React anropar rensningsfunktionen innan effekten körs igen, när beroenden ändras, och när komponenten avmonteras. Använd den för att avsluta prenumerationer, rensa timers eller avbryta fetch-anrop för att förhindra minnesläckor och tillståndsuppdateringar på avmonterade komponenter.

useEffect(() => {
  const timer = setInterval(() => {
    setTime(Date.now());
  }, 1000);

  return () => clearInterval(timer); // cleanup on unmount or re-run
}, []);

Avbryt fetch-anrop med AbortController

När en komponent avmonteras innan ett fetch-anrop har slutförts varnar React för att tillståndet uppdateras på en avmonterad komponent. Använd AbortController för att avbryta det pågående fetch-anropet i rensningsfunktionen. Om du fångar abortfelet, som är ett AbortError, förhindrar du att det loggas som ett oväntat fel.

useEffect(() => {
  const controller = new AbortController();

  fetch('/api/data', { signal: controller.signal })
    .then((res) => res.json())
    .then((data) => setData(data))
    .catch((err) => {
      if (err.name !== 'AbortError') setError(err);
    });

  return () => controller.abort();
}, []);

Kör kod endast vid avmontering

Om du vill köra kod endast när komponenten avmonteras, till exempel avsluta en prenumeration på en händelselyssnare, returnerar du en rensningsfunktion från en useEffect med en tom beroendearray. React anropar rensningen endast när komponenten lämnar trädet, aldrig vid efterföljande renderingar.

useEffect(() => {
  const subscription = eventEmitter.addListener('change', handler);

  return () => {
    subscription.remove(); // only on unmount
  };
}, []); // empty array = mount-only effect

Flera useEffect-anrop

Du kan och bör använda flera useEffect-anrop i en komponent – ett för varje oberoende biverkning. React kör dem i den ordning de visas efter varje rendering. När effekterna hålls separerade efter ansvarsområde blir koden enklare att läsa och du undviker komplexa beroendearrayer som blandar orelaterad logik.

// Effect 1: fetch user data
useEffect(() => {
  fetchUser(userId).then(setUser);
}, [userId]);

// Effect 2: analytics page view
useEffect(() => {
  analytics.logScreenView('Profile');
}, []);

// Effect 3: sync title to header
useEffect(() => {
  navigation.setOptions({ title: user?.name ?? 'Profile' });
}, [user, navigation]);

Fallgropar med beroenden: saknade beroenden

Ett vanligt fel är att utelämna ett beroende från arrayen. Effekten fångar då ett inaktuellt värde för det saknade beroendet och körs med föråldrade data. Ta alltid med alla värden från komponentens omfång som läses inuti effekten. ESLint-regeln react-hooks/exhaustive-deps upptäcker automatiskt sådana fel.

// Bug: fetchUser uses userId but it is not in deps
// If userId changes, the effect still runs with the old userId
useEffect(() => {
  fetchUser(userId).then(setUser);
}, []); // Missing userId!

// Correct:
useEffect(() => {
  fetchUser(userId).then(setUser);
}, [userId]);

Undvik oändliga loopar

Om din effekt uppdaterar state som också finns med som ett beroende uppstår en oändlig loop: renderering → effekt → state-uppdatering → renderering → effekt → .... Förhindra detta med ett villkor inuti effekten, eller strukturera om koden så att effekten inte utlöser den state-uppdatering som fick den att köras.

// Infinite loop: effect updates 'count' which is in deps
useEffect(() => {
  setCount(count + 1); // triggers re-render → effect runs again
}, [count]);

// Fix: use functional updater — no need to list count as dep
useEffect(() => {
  setCount((c) => c + 1);
}, []); // only runs once

Jämförelse mellan effekter och livscykelmetoder

useEffect ersätter de tre klassiska livscykelmetoderna för klasskomponenter: componentDidMount (tom beroendearray), componentDidUpdate (med beroenden) och componentWillUnmount (rensningsfunktion). En hook hanterar alla tre faserna, vilket håller relaterad logik samlad i stället för utspridd i tre separata metoder.

useEffect(() => {
  // componentDidMount equivalent — fetch initial data
  fetchData();

  return () => {
    // componentWillUnmount equivalent — cancel subscriptions
    cancelSubscription();
  };
}, []); // runs once on mount, cleanup on unmount

Snabbkontroll

Testa dina kunskaper om useEffect-hooken och beroendearrayen från den här lektionen.

Besvara frågan i den interaktiva lektionen

Sammanfattning av lektionen

I den här lektionen har du lärt dig att: useEffect kör sidoeffekter efter renderering, beroendearrayen styr när effekten körs igen – en tom array innebär en gång vid montering och returnera en rensningsfunktion för att avbryta prenumerationer, timers och fetch-förfrågningar när komponenten avmonteras. Härnäst gör vi GET-förfrågningar med Axios inuti useEffect.

Gratis att börja

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

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”useEffect-hooken och beroendearrayer” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”useEffect-hooken och beroendearrayer”, 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 ”useEffect-hooken och beroendearrayer”?

Förstå när useEffect körs, styr den med en beroendearray och städa upp prenumerationer eller timers genom att returnera en städfunktion. 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 1 av 4.

Hur lång tid tar lektionen ”useEffect-hooken och beroendearrayer”?

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

← Tillbaka till React Native Academy