1. september 2025Norsk

Lær å optimalisere React custom hooks ved å forstå og administrere avhengigheter i useEffect. Forbedre ytelsen og unngå vanlige fallgruver.

React Egendefinerte Hook-avhengigheter: Mestring av Effektoptimalisering for Ytelse

React custom hooks er et kraftig verktøy for å abstrahere og gjenbruke logikk på tvers av komponentene dine. Imidlertid kan feil håndtering av avhengigheter innenfor `useEffect` føre til ytelsesproblemer, unødvendige re-renders og til og med uendelige løkker. Denne guiden gir en omfattende forståelse av `useEffect`-avhengigheter og beste praksis for å optimalisere dine custom hooks.

Forstå useEffect og Avhengigheter

`useEffect`-hooken i React lar deg utføre sideeffekter i komponentene dine, som datahenting, DOM-manipulering eller oppsett av abonnementer. Det andre argumentet til `useEffect` er en valgfri array av avhengigheter. Denne arrayen forteller React når effekten skal kjøre på nytt. Hvis noen av verdiene i avhengighets-arrayen endres mellom renders, vil effekten bli gjenutført. Hvis avhengighets-arrayen er tom (`[]`), vil effekten bare kjøre én gang etter den første renderingen. Hvis avhengighets-arrayen utelates helt, vil effekten kjøre etter hver rendering.

Hvorfor Avhengigheter Betyr Noe

Avhengigheter er avgjørende for å kontrollere når effekten din kjører. Hvis du inkluderer en avhengighet som faktisk ikke trenger å trigge effekten, ender du opp med unødvendige gjenutførelser, noe som potensielt kan påvirke ytelsen. Motsatt, hvis du utelater en avhengighet som *trenger* å trigge effekten, kan komponenten din ikke oppdatere seg riktig, noe som fører til feil og uventet oppførsel. La oss se på et grunnleggende eksempel:

            
import React, { useState, useEffect } from 'react';

function ExampleComponent({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      setUserData(data);
    }

    fetchData();
  }, [userId]); // Avhengighets-array: kjører kun på nytt når userId endres

  if (!userData) {
    return Laster...;
  }

  return (
    
      {userData.name}
      {userData.email}
    
  );
}

export default ExampleComponent;

I dette eksemplet henter effekten brukerdata fra et API. Avhengighets-arrayen inkluderer `userId`. Dette sikrer at effekten bare kjører når `userId`-proppen endres. Hvis `userId` forblir den samme, vil effekten ikke kjøre på nytt, noe som forhindrer unødvendige API-kall.

Vanlige Fallgruver og Hvordan Unngå Dem

Flere vanlige fallgruver kan oppstå når man jobber med `useEffect`-avhengigheter. Å forstå disse fallgruvene og hvordan man unngår dem, er avgjørende for å skrive effektiv og feilfri React-kode.

1. Manglende Avhengigheter

Den vanligste feilen er å utelate en avhengighet som *burde* inkluderes i avhengighets-arrayen. Dette kan føre til "stale closures" og uventet oppførsel. For eksempel:

            
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1); // Potensielt problem: `count` er ingen avhengighet
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Tom avhengighets-array: effekt kjører kun én gang

  return Antall: {count};
}

export default Counter;

I dette eksemplet er `count`-variabelen ikke inkludert i avhengighets-arrayen. Som et resultat bruker `setInterval`-callbacken alltid den opprinnelige verdien av `count` (som er 0). Telleren vil ikke inkrementere riktig. Den korrekte versjonen bør inkludere `count` i avhengighets-arrayen:

            
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1); // Korrekt: bruk funksjonell oppdatering
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Nå trengs ingen avhengighet siden vi bruker den funksjonelle oppdateringsformen.

  return Antall: {count};
}

export default Counter;

Lærdom: Sørg alltid for at alle variabler som brukes inne i effekten, og som er definert utenfor effektens omfang, er inkludert i avhengighets-arrayen. Bruk om mulig funksjonelle oppdateringer (`setCount(prevCount => prevCount + 1)`) for å unngå behovet for `count`-avhengigheten.

2. Inkludere Unødvendige Avhengigheter

Å inkludere unødvendige avhengigheter kan føre til overflødige re-renders og ytelsesnedgang. Tenk for eksempel på en komponent som mottar en prop som er et objekt:

            
import React, { useState, useEffect } from 'react';

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Utfør kompleks databehandling
    const result = processData(data);
    setProcessedData(result);
  }, [data]); // Problem: `data` er et objekt, så det endres ved hver rendering

  function processData(data) {
    // Kompleks databehandlingslogikk
    return data;
  }

  if (!processedData) {
    return Laster...;
  }

  return {processedData.value};
}

export default DisplayData;

I dette tilfellet, selv om innholdet i `data`-objektet forblir logisk det samme, opprettes et nytt objekt ved hver rendering av foreldrekomponenten. Dette betyr at `useEffect` vil kjøre på nytt ved hver rendering, selv om databehandlingen faktisk ikke trenger å gjøres på nytt. Her er noen strategier for å løse dette:

Løsning 1: Memoizering med `useMemo`

Bruk `useMemo` til å memoizere `data`-proppen. Dette vil bare gjenskape `data`-objektet hvis dets relevante egenskaper endres.

            
import React, { useState, useEffect, useMemo } from 'react';

function ParentComponent() {
  const [value, setValue] = useState(0);

  // Memoizer `data`-objektet
  const data = useMemo(() => ({ value }), [value]);

  return ;
}

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Utfør kompleks databehandling
    const result = processData(data);
    setProcessedData(result);
  }, [data]); // Nå endres `data` kun når `value` endres

  function processData(data) {
    // Kompleks databehandlingslogikk
    return data;
  }

  if (!processedData) {
    return Laster...;
  }

  return {processedData.value};
}

export default ParentComponent;

Løsning 2: Destrukturering av Proppen

Send individuelle egenskaper fra `data`-objektet som props i stedet for hele objektet. Dette lar `useEffect` bare kjøre på nytt når de spesifikke egenskapene det avhenger av endres.

            
import React, { useState, useEffect } from 'react';

function ParentComponent() {
  const [value, setValue] = useState(0);

  return ; // Send `value` direkte
}

function DisplayData({ value }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Utfør kompleks databehandling
    const result = processData(value);
    setProcessedData(result);
  }, [value]); // Kjører kun på nytt når `value` endres

  function processData(value) {
    // Kompleks databehandlingslogikk
    return { value }; // Pakk inn i objekt om nødvendig inne i DisplayData
  }

  if (!processedData) {
    return Laster...;
  }

  return {processedData.value};
}

export default ParentComponent;

Løsning 3: Bruk av `useRef` for å Sammenligne Verdier

Hvis du trenger å sammenligne *innholdet* i `data`-objektet og bare kjøre effekten på nytt når innholdet endres, kan du bruke `useRef` til å lagre den forrige verdien av `data` og utføre en dyp sammenligning.

            
import React, { useState, useEffect, useRef } from 'react';
import { isEqual } from 'lodash'; // Krever lodash-biblioteket (npm install lodash)

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);
  const previousData = useRef(data);

  useEffect(() => {
    if (!isEqual(data, previousData.current)) {
      // Utfør kompleks databehandling
      const result = processData(data);
      setProcessedData(result);
      previousData.current = data;
    }
  }, [data]); // `data` er fortsatt i avhengighets-arrayen, men vi sjekker for dyp likhet

  function processData(data) {
    // Kompleks databehandlingslogikk
    return data;
  }

  if (!processedData) {
    return Laster...;
  }

  return {processedData.value};
}

export default DisplayData;

Merk: Dype sammenligninger kan være kostbare, så bruk denne tilnærmingen med omhu. Dette eksemplet er også avhengig av `lodash`-biblioteket. Du kan installere det ved å bruke `npm install lodash` eller `yarn add lodash`.

Lærdom: Vurder nøye hvilke avhengigheter som er virkelig nødvendige. Unngå å inkludere objekter eller arrays som gjenskapes ved hver rendering hvis innholdet forblir logisk det samme. Bruk memoizering, destrukturering eller dype sammenligningsteknikker for å optimalisere ytelsen.

3. Uendelige Løkker

Feil håndtering av avhengigheter kan føre til uendelige løkker, der `useEffect`-hooken kontinuerlig kjører på nytt, noe som får komponenten din til å fryse eller krasje. Dette skjer ofte når effekten oppdaterer en tilstandsvariabel som også er en avhengighet av effekten. For eksempel:

            
import React, { useState, useEffect } from 'react';

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Hent data fra et API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result); // Oppdaterer `data`-tilstand
      });
  }, [data]); // Problem: `data` er en avhengighet, så effekten kjører på nytt når `data` endres

  if (!data) {
    return Laster...;
  }

  return {data.value};
}

export default InfiniteLoop;

I dette eksemplet henter effekten data og setter det til `data`-tilstandsvariabelen. Imidlertid er `data` også en avhengighet av effekten. Dette betyr at hver gang `data` oppdateres, kjører effekten på nytt, henter data igjen og setter `data` igjen, noe som fører til en uendelig løkke. Det er flere måter å løse dette på:

Løsning 1: Tom Avhengighets-array (Kun Første Lasting)

Hvis du bare vil hente data én gang når komponenten monteres, kan du bruke en tom avhengighets-array:

            
import React, { useState, useEffect } from 'react';

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Hent data fra et API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result);
      });
  }, []); // Tom avhengighets-array: effekt kjører kun én gang

  if (!data) {
    return Laster...;
  }

  return {data.value};
}

export default InfiniteLoop;

Løsning 2: Bruk en Separat Tilstand for Lasting

Bruk en separat tilstandsvariabel for å spore om data er lastet. Dette forhindrer at effekten kjører på nytt når `data`-tilstanden endres.

            
import React, { useState, useEffect } from 'react';

function InfiniteLoop() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (isLoading) {
      // Hent data fra et API
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(result => {
          setData(result);
          setIsLoading(false);
        });
    }
  }, [isLoading]); // Kjører kun på nytt når `isLoading` endres

  if (!data) {
    return Laster...;
  }

  return {data.value};
}

export default InfiniteLoop;

Løsning 3: Betinget Datahenting

Hent data kun hvis det for øyeblikket er null. Dette forhindrer etterfølgende hentinger etter at de første dataene er lastet.

            
import React, { useState, useEffect } from 'react';

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    if (!data) {
      // Hent data fra et API
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(result => {
          setData(result);
        });
    }
  }, [data]); // `data` er fortsatt en avhengighet, men effekten er betinget

  if (!data) {
    return Laster...;
  }

  return {data.value};
}

export default InfiniteLoop;

Lærdom: Vær ekstremt forsiktig når du oppdaterer en tilstandsvariabel som også er en avhengighet av effekten. Bruk tomme avhengighets-arrays, separate lastetilstander eller betinget logikk for å forhindre uendelige løkker.

4. Foranderlige Objekter og Arrays

Når du arbeider med foranderlige objekter eller arrays som avhengigheter, vil endringer i objektets egenskaper eller array-elementer ikke automatisk utløse effekten. Dette er fordi React utfører en grunn sammenligning av avhengighetene.

            
import React, { useState, useEffect } from 'react';

function MutableObject() {
  const [config, setConfig] = useState({ theme: 'light', language: 'en' });

  useEffect(() => {
    console.log('Konfigurasjon endret:', config);
  }, [config]); // Problem: Endringer i `config.theme` eller `config.language` vil ikke utløse effekten

  const toggleTheme = () => {
    // Mutering av objektet
    config.theme = config.theme === 'light' ? 'dark' : 'light';
    setConfig(config); // Dette vil ikke utløse en re-render eller effekten
  };

  return (
    
      Tema: {config.theme}, Språk: {config.language}
      
    
  );
}

export default MutableObject;

I dette eksemplet endrer `toggleTheme`-funksjonen direkte `config`-objektet, noe som er dårlig praksis. Reacts grunne sammenligning ser at `config` fortsatt er det *samme* objektet i minnet, selv om egenskapene er endret. For å fikse dette må du opprette et *nytt* objekt når du oppdaterer tilstanden:

            
import React, { useState, useEffect } from 'react';

function MutableObject() {
  const [config, setConfig] = useState({ theme: 'light', language: 'en' });

  useEffect(() => {
    console.log('Konfigurasjon endret:', config);
  }, [config]); // Nå vil effekten utløses når `config` endres

  const toggleTheme = () => {
    setConfig({ ...config, theme: config.theme === 'light' ? 'dark' : 'light' }); // Opprett et nytt objekt
  };

  return (
    
      Tema: {config.theme}, Språk: {config.language}
      
    
  );
}

export default MutableObject;

Ved å bruke spredningsoperatoren (`...config`) oppretter vi et nytt objekt med den oppdaterte `theme`-egenskapen. Dette utløser en re-render og effekten blir gjenutført.

Lærdom: Behandle alltid tilstandsvariabler som uforanderlige. Når du oppdaterer objekter eller arrays, opprett nye instanser i stedet for å endre eksisterende. Bruk spredningsoperatoren (`...`), `Array.map()`, `Array.filter()`, eller lignende teknikker for å opprette nye kopier.

Optimalisering av Custom Hooks med Avhengigheter

Nå som vi forstår de vanlige fallgruvene, la oss se på hvordan man optimaliserer custom hooks ved nøye å administrere avhengigheter.

1. Memoizering av Funksjoner med `useCallback`

Hvis din custom hook returnerer en funksjon som brukes som en avhengighet i en annen `useEffect`, bør du memoizere funksjonen ved å bruke `useCallback`. Dette forhindrer at funksjonen blir gjenskapt ved hver rendering, noe som unødvendig ville utløse effekten.

            
import React, { useState, useEffect, useCallback } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = useCallback(async () => {
    setIsLoading(true);
    try {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err);
    } finally {
      setIsLoading(false);
    }
  }, [url]); // Memoizer `fetchData` basert på `url`

  useEffect(() => {
    fetchData();
  }, [fetchData]); // Nå endres `fetchData` kun når `url` endres

  return { data, isLoading, error };
}

function MyComponent() {
  const [userId, setUserId] = useState(1);
  const { data, isLoading, error } = useFetchData(`https://api.example.com/users/${userId}`);

  return (
    
      {/* ... */}
    
  );
}

export default MyComponent;

I dette eksemplet er `fetchData`-funksjonen memoizert ved hjelp av `useCallback`. Avhengighets-arrayen inkluderer `url`, som er den eneste variabelen som påvirker funksjonens oppførsel. Dette sikrer at `fetchData` kun endres når `url` endres. Derfor vil `useEffect`-hooken i `useFetchData` kun kjøre på nytt når `url` endres.

2. Bruk av `useRef` for Stabile Referanser

Noen ganger må du få tilgang til den nyeste verdien av en prop eller tilstandsvariabel inne i en effekt, men du vil ikke at effekten skal kjøre på nytt når den verdien endres. I dette tilfellet kan du bruke `useRef` for å opprette en stabil referanse til verdien.

            
import React, { useState, useEffect, useRef } from 'react';

function LogLatestValue({ value }) {
  const latestValue = useRef(value);

  useEffect(() => {
    latestValue.current = value; // Oppdater referansen ved hver rendering
  }, [value]); // Oppdater referansen når `value` endres

  useEffect(() => {
    // Logg den nyeste verdien etter 5 sekunder
    const timerId = setTimeout(() => {
      console.log('Nyeste verdi:', latestValue.current); // Få tilgang til den nyeste verdien fra referansen
    }, 5000);

    return () => clearTimeout(timerId);
  }, []); // Effekten kjører kun én gang ved montering

  return Verdi: {value};
}

export default LogLatestValue;

I dette eksemplet oppdateres `latestValue`-referansen ved hver rendering med den nåværende verdien av `value`-proppen. Effekten som logger verdien kjører imidlertid bare én gang ved montering, takket være den tomme avhengighets-arrayen. Inne i effekten får vi tilgang til den nyeste verdien ved hjelp av `latestValue.current`. Dette lar oss få tilgang til den mest oppdaterte verdien av `value` uten å føre til at effekten kjører på nytt hver gang `value` endres.

3. Opprette Egendefinert Abstraksjon

Opprett en egendefinert komparator eller abstraksjon hvis du jobber med et objekt, og bare en liten undergruppe av egenskapene er viktig for `useEffect`-kallene.

            
import React, { useState, useEffect } from 'react';

// Egendefinert komparator for å kun spore temaendringer.
function useTheme(config) {
    const [theme, setTheme] = useState(config.theme);

    useEffect(() => {
        setTheme(config.theme);
    }, [config.theme]);

    return theme;
}

function ConfigComponent({ config }) {
    const theme = useTheme(config);

    return (
        Det nåværende temaet er {theme}
    )
}

export default ConfigComponent;

Lærdom: Bruk `useCallback` til å memoizere funksjoner som brukes som avhengigheter. Bruk `useRef` til å opprette stabile referanser til verdier du trenger tilgang til inne i effekter uten å føre til at effektene kjører på nytt. Når du arbeider med komplekse objekter eller arrays, vurder å opprette egendefinerte komparatorer eller abstraksjonslag for å bare utløse effekter når relevante egenskaper endres.

Globale Hensyn

Når du utvikler React-applikasjoner for et globalt publikum, er det viktig å vurdere hvordan avhengigheter kan påvirke lokalisering og internasjonalisering. Her er noen viktige hensyn:

1. Språk/Sted-endringer (Locale Changes)

Hvis komponenten din avhenger av brukerens språk/sted (f.eks. for formatering av datoer, tall eller valuta), bør du inkludere stedet i avhengighets-arrayen. Dette sikrer at effekten kjører på nytt når stedet endres, og oppdaterer komponenten med riktig formatering.

            
import React, { useState, useEffect } from 'react';
import { format } from 'date-fns'; // Krever date-fns-biblioteket (npm install date-fns)

function LocalizedDate({ date, locale }) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    setFormattedDate(format(date, 'PPPP', { locale }));
  }, [date, locale]); // Kjører på nytt når `date` eller `locale` endres

  return {formattedDate};
}

export default LocalizedDate;

I dette eksemplet brukes `format`-funksjonen fra `date-fns`-biblioteket til å formatere datoen i henhold til det angitte stedet. `locale` er inkludert i avhengighets-arrayen, så effekten kjører på nytt når stedet endres, og oppdaterer den formaterte datoen.

2. Tidssonehensyn

Når du arbeider med datoer og klokkeslett, vær oppmerksom på tidssoner. Hvis komponenten din viser datoer eller klokkeslett i brukerens lokale tidssone, må du kanskje inkludere tidssonen i avhengighets-arrayen. Tidssoneendringer er imidlertid mindre hyppige enn språk/sted-endringer, så du kan vurdere å bruke en separat mekanisme for å oppdatere tidssonen, for eksempel en global kontekst.

3. Valutaformatering

Når du formaterer valutaer, bruk riktig valutakode og språk/sted. Inkluder begge i avhengighets-arrayen for å sikre at valutaen formateres riktig for brukerens region.

            
import React, { useState, useEffect } from 'react';

function LocalizedCurrency({ amount, currency, locale }) {
  const [formattedCurrency, setFormattedCurrency] = useState('');

  useEffect(() => {
    setFormattedCurrency(new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount));
  }, [amount, currency, locale]); // Kjører på nytt når `amount`, `currency` eller `locale` endres

  return {formattedCurrency};
}

export default LocalizedCurrency;

Lærdom: Når du utvikler for et globalt publikum, bør du alltid vurdere hvordan avhengigheter kan påvirke lokalisering og internasjonalisering. Inkluder språk/sted, tidssone og valutakode i avhengighets-arrayen når det er nødvendig for å sikre at komponentene dine viser data riktig for brukere i forskjellige regioner.

Konklusjon

Å mestre `useEffect`-avhengigheter er avgjørende for å skrive effektive, feilfrie og ytelsessterke React custom hooks. Ved å forstå de vanlige fallgruvene og anvende optimaliseringsteknikkene som er diskutert i denne guiden, kan du lage custom hooks som er både gjenbrukbare og vedlikeholdbare. Husk å nøye vurdere hvilke avhengigheter som er virkelig nødvendige, bruk memoizering og stabile referanser når det er hensiktsmessig, og vær oppmerksom på globale hensyn som lokalisering og internasjonalisering. Ved å følge disse beste praksisene kan du frigjøre det fulle potensialet til React custom hooks og bygge applikasjoner av høy kvalitet for et globalt publikum.

Denne omfattende guiden har dekket mye. For å oppsummere, her er de viktigste punktene:

Forstå formålet med avhengigheter: De kontrollerer når effekten din kjører.
Unngå manglende avhengigheter: Sørg for at alle variabler som brukes inne i effekten er inkludert.
Eliminer unødvendige avhengigheter: Bruk memoizering, destrukturering eller dyp sammenligning.
Forhindre uendelige løkker: Vær forsiktig når du oppdaterer tilstandsvariabler som også er avhengigheter.
Behandle tilstand som uforanderlig: Opprett nye objekter eller arrays ved oppdatering.
Memoizere funksjoner med `useCallback`: Forhindre unødvendige re-renders.
Bruk `useRef` for stabile referanser: Få tilgang til den nyeste verdien uten å utløse re-renders.
Vurder globale implikasjoner: Ta hensyn til endringer i språk/sted, tidssone og valuta.

Ved å anvende disse prinsippene kan du skrive mer robuste og effektive React custom hooks som vil forbedre ytelsen og vedlikeholdbarheten til applikasjonene dine.