Hvordan JSX Renderer Samlinger i React

JSX er et kraftfuldt værktøj i React, der gør det muligt at skrive HTML-lignende syntaks direkte i JavaScript. Men for at få det meste ud af JSX, er det vigtigt at forstå, hvordan man håndterer og renderer samlinger som arrays og objekter. Dette er en grundlæggende færdighed for enhver React-udvikler, da samlinger ofte er den primære kilde til dynamisk indhold på en webside. I dette kapitel vil vi undersøge, hvordan du bruger samlinger effektivt i JSX, og hvordan React håndterer disse samlinger under rendering.

Et typisk eksempel på en samling i JavaScript er et array. Lad os overveje et array som dette:

javascript
Copy code
const array = ["First", "Second", "Third"];

For at vise disse værdier i React, bruger vi metoden .map(), som returnerer et nyt array. Denne metode er særlig nyttig, når vi ønsker at generere en liste af JSX-elementer, da den kan anvende en funktion på hvert element i arrayet og returnere et JSX-element for hvert element:

javascript
Copy code
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <div>
    {array.map((i) => (
      <p>{i}</p>
    ))}
  </div>
);

I ovenstående eksempel renderes hvert element i array som et <p>-tag. JSX håndterer dette problem effektivt, da det kender til, hvordan man render arrays af elementer. En vigtig detalje her er brugen af key-prop’en, som er afgørende for optimering af ydeevnen. React kræver, at hver komponent i en liste får en unik key-prop for at kunne håndtere opdateringer hurtigt og korrekt under efterfølgende rendering.

En anden type samling er et objekt, og i stedet for at bruge .map() på et objekt, benytter vi Object.keys() for at få en liste af objektets nøgler og derefter mappe disse nøgler til JSX-elementer:

javascript
Copy code
const object = {
  first: 1,
  second: 2,
  third: 3,
};

root.render(
  <div>
    {Object.keys(object).map((key) => (
      <p>{key}: {object[key]}</p>
    ))}
  </div>
);

Her får vi et objekt med nøglerne first, second, og third, og vi renderer både nøglerne og deres tilhørende værdier som paragraf-tags. Denne tilgang gør det muligt at gruppere data på en struktureret måde uden at skulle skrive kompleks imperativ kode.

En af de mest kraftfulde aspekter ved React og JSX er muligheden for at gruppere disse dynamisk renderede elementer uden at tilføje unødvendig struktur til DOM’en. Dette kan opnås ved hjælp af fragments i JSX. Traditionelt, hvis vi ønskede at gruppere flere elementer sammen, ville vi bruge en wrapper som <div>. Men dette førte til unødvendige HTML-tags, som kunne skabe en unødvendig kompleks DOM-struktur. Med JSX-fragments kan vi undgå dette.

Her er et eksempel, hvor vi bruger en wrapper:

javascript
Copy code
export default function WithoutFragments() {
  return (
    <div>
      <p>Without Fragments</p>
      <p>Adds an extra div element.</p>
    </div>
  );
}

Som du kan se, bliver to <p>-tags indkapslet i en ekstra <div>. Denne tilføjelse gør ikke noget for UI’et, men den skaber unødvendig struktur i DOM’en, som kan føre til dårligere performance, især hvis denne komponent bruges mange gange.

I stedet kan vi bruge JSX-fragments til at undgå denne ekstra wrapper:

javascript
Copy code
export default function WithFragments() {
  return (
    <>
      <p>With Fragments</p>
      <p>Doesn't have any unused DOM elements.</p>
    </>
  );
}

Her bruger vi <> og </> som et shorthand for React.Fragment. Fragments i React tillader os at gruppere flere elementer uden at tilføje nogen ekstra HTML-tags til DOM’en. Dette er ikke kun en måde at holde din DOM ren, men det kan også hjælpe med at forbedre ydeevnen ved at reducere antallet af unødvendige renderede elementer.

Når du arbejder med React, er det vigtigt at forstå, hvordan samlinger og fragments fungerer, da de spiller en central rolle i, hvordan React optimerer rendering. Ved at bruge metoder som .map() og Object.keys(), samt ved at benytte fragments, kan du skrive renere, mere effektiv kode, der giver en bedre brugeroplevelse og lettere vedligeholdelse af applikationen.

Endvidere er det vigtigt at være opmærksom på, at selvom JSX gør det lettere at arbejde med dynamiske samlinger, er det ikke nok at blot generere HTML-elementer. Du skal altid sikre dig, at dit komponent er optimalt struktureret, og at du ikke skaber unødvendige DOM-elementer. Dette kan gøres ved at bruge fragments i stedet for wrapper tags, samt ved at optimere dine key-props for at hjælpe React med at holde styr på renderingen.

Hvordan håndtere navigation med ruter i React-applikationer

I en React-applikation er håndtering af navigation og ruter fundamentalt for at skabe en dynamisk og interaktiv brugeroplevelse. React-router er det primære værktøj, der bruges til at opbygge og administrere ruter i en React-applikation. Det gør det muligt for udviklere at definere forskellige ruter i applikationen, som repræsenterer forskellige sider eller komponenter, og forbinde dem med de relevante URL-stier. Denne kapitel dykker ned i, hvordan man opretter og håndterer ruter med React-router, hvordan man arbejder med dynamiske parametre, samt hvordan man bruger URL- og søgeparametre til at bygge interaktive links.

Når du bygger en applikation, er det første skridt at forstå, hvordan ruter fungerer i React. En simpel rute kan defineres som et JSX-element, der viser en bestemt komponent, når en specifik sti er aktiveret. I det grundlæggende eksempel bruger vi <Link>-komponenten til at oprette navigationslinks, der fører til de forskellige ruter i applikationen. For eksempel kan du definere to ruter, en til /first og en til /second. Når brugeren klikker på et link, aktiveres den tilsvarende rute, og indholdet på siden ændres i overensstemmelse hermed.

I React-router kan vi bruge en dynamisk konstruktion af stier ved hjælp af URL-parametre. Dette giver applikationen mulighed for at reagere på brugerinput og ændre visningen afhængigt af de parametre, der er inkluderet i URL'en. For eksempel, i en rute som /echo/:msg, kan vi bygge en komponent, der reagerer på den dynamiske parameter msg og returnerer en værdi baseret på den.

For at hente og bruge URL-parametre, kan vi benytte hooks som useParams og useSearchParams. useParams giver os mulighed for at få adgang til de dynamiske parametre i stien, mens useSearchParams giver adgang til de søgeparametre, der er angivet i URL'en. Dette gør det muligt at skabe meget fleksible og interaktive links, som ændrer applikationens tilstand baseret på brugernes navigation.

I det følgende eksempel er der to links: det ene bygger en sti med en dynamisk værdi som URL-parameter, og det andet bruger URLSearchParams til at bygge en forespørgselsstreng. Den første link fører til en URL som /echo/From%20Param, og den anden fører til /echo?msg=From+Query. Begge links navigerer til en komponent, der viser de værdier, der er blevet sendt med som URL-parametre.

Når du lærer at bruge Link-komponenten og konstruere dynamiske links, åbner du op for en mere interaktiv og navigerbar weboplevelse. URL- og forespørgselsparametre giver brugerne mulighed for at navigere gennem applikationen på en mere fleksibel måde og beriger deres rejse gennem applikationen med information, der kan ændre sig baseret på deres interaktioner.

Det er også vigtigt at forstå, hvordan routing kan hjælpe med at strukturere applikationen. Ofte vil du opdage, at det er nødvendigt at opdele din applikation i modulære enheder, hvor hver enhed kan håndtere et specifikt aspekt af applikationens funktionalitet. Dette gør det lettere at vedligeholde koden, især når applikationen vokser i størrelse.

En vigtig pointe at forstå er, at routing ikke kun handler om at vise komponenter baseret på stier. Det handler også om at administrere appens tilstand og sikre, at den reagerer korrekt på ændringer i URL'en. Det kan for eksempel være nødvendigt at håndtere tilstande, der afhænger af, hvilken rute brugeren navigerer til, eller at bruge data fra URL-parametre til at tilpasse visningen af komponenter.

Når du arbejder med dynamiske stier og parametre, bør du også overveje at implementere funktionalitet, der håndterer ugyldige eller manglende parametre. Dette kan være nyttigt for at sikre, at applikationen ikke bryder sammen, hvis en bruger forsøger at navigere til en ikke-eksisterende rute eller en rute med manglende nødvendige parametre.

Når du har opnået en grundlæggende forståelse af hvordan routing fungerer i React, er du godt rustet til at bygge mere komplekse applikationer, hvor navigation og tilstandshåndtering spiller en central rolle. Dette giver dig mulighed for at skabe en applikation, der er både effektiv og brugervenlig, samtidig med at du bevarer fleksibilitet i din kodebase.

Endtext

Hvordan Håndteres Asynkrone State Opdateringer i React?

Når vi arbejder med React, er det vigtigt at forstå, hvordan tilstande (states) opdateres, især når vi arbejder med asynkrone data. Selvom det kan virke enkelt at opdatere state baseret på en brugerinteraktion, bliver det hurtigt komplekst, når vi skal tage højde for, hvordan disse opdateringer prioriteres og håndteres samtidigt med asynkrone operationer som datahentning fra servere.

I React er opdatering af tilstander og prioritering af disse opdateringer et grundlæggende aspekt af at skabe responsive og interaktive applikationer. For eksempel er der situationer, hvor vi skal sikre, at brugeren ikke bliver afbrudt, mens de skriver eller interagerer med en komponent, som kræver øjeblikkelig feedback. Dette kan kun opnås ved korrekt prioritering af tilstandsopdateringer og samtidig håndtering af asynkrone svar fra servere.

I React 18 er der introduceret nye funktioner som startTransition(), som hjælper med at håndtere disse scenarier. Denne API giver udvikleren mulighed for at markere visse state opdateringer som lav-prioritet, hvilket betyder, at de kan blive udsat, indtil højere-prioriterede opdateringer (som brugerinteraktioner) er afsluttet. Dette er essentielt for at sikre, at brugeren får den nødvendige feedback hurtigt, selv om der kører baggrundsoperationer.

En typisk situation er, når vi henter data asynkront, som f.eks. ved at filtrere en liste af elementer, og vi skal vise disse elementer uden at blokere brugerens interaktioner. Her kan vi anvende startTransition() til at sørge for, at state opdateringer, der ikke kræver øjeblikkelig visning, bliver forsinket til efter de højere-prioriterede opdateringer. I praksis betyder dette, at brugerens input — som at skrive i en tekstboks — behandles straks, mens datahentningen kan vente, indtil interaktionen er afsluttet.

En problemstilling, der opstår i dette scenario, er håndteringen af visningen af en "loading" indikator. Når vi anvender startTransition(), vil indikatoren ofte forsvinde kort tid efter at være vist, da React kun markerer den som "pending", mens opdateringen er i gang. Dette kan skabe en mærkelig visuel oplevelse, da brugeren måske ser en kort loading-indikator, men derefter står overfor en forsinkelse, før de faktiske data vises.

Løsningen på dette problem er at bruge en separat state, der holder styr på, om dataene er i gang med at blive hentet, og vise loading-indikatoren baseret på denne state, snarere end at stole på isPending værdien. Når først dataene er hentet og rendere, skjules loading-indikatoren, og brugeren får den ønskede feedback. Ved at introducere en isLoading state, der styrer visningen af denne indikator, kan vi præcist styre, hvornår data er færdige med at blive behandlet.

Et vigtigt element i denne proces er forståelsen af, at React intern arbejder med batch-behandling af state opdateringer. Når vi bruger startTransition(), markerer vi, at den pågældende opdatering er lavere i prioritet, og det betyder, at disse opdateringer først behandles, efter høj-prioriterede opdateringer som brugerinput er fuldført. Dette giver os mulighed for at prioritere brugerens oplevelse over tekniske processer som baggrundshentning af data.

For at få en præcis forståelse af dette, kan vi se på et eksempel, hvor vi filtrerer en stor liste med 25.000 elementer. Når brugeren begynder at skrive i et filterfelt, starter vi en asynkron funktion, som henter de relevante data og opdaterer UI’en. Under denne proces holder vi styr på om dataene bliver hentet, og viser en "loading" indikator indtil processen er afsluttet.

En af de væsentlige pointer i denne proces er, at den korrekt håndterede asynkrone datahentning ikke bør forstyrre brugerens interaktioner. Det betyder, at tilstandsopdateringer, der kræver øjeblikkelig visning, skal håndteres før andre opdateringer, og at dette skal gøres på en måde, der ikke skaber unødvendige forsinkelser eller visuelle forstyrrelser for brugeren.

Det er også vigtigt at forstå, at selvom vi arbejder med asynkrone funktioner som filterItems(), er det kun muligt at håndtere disse i kombination med React’s indbyggede funktioner som useTransition() og startTransition(), som kan hjælpe os med at styre rækkefølgen af tilstandsopdateringer og sikre, at de rigtige opdateringer sker på det rigtige tidspunkt. Dette kan hjælpe med at opnå høj ydeevne i applikationen, selv når vi arbejder med store mængder data.

Sådan kan vi konkludere, at React’s nye værktøjer til at håndtere prioriteter og asynkrone opdateringer giver os et stærkt sæt af funktioner til at bygge applikationer, der både er hurtigt reagerende og samtidig har en god brugeroplevelse. Det er ikke nok at bare sikre, at data hentes korrekt — vi skal også sikre, at interaktionen med brugeren forbliver uafbrudt og effektiv.

Hvordan man implementerer navigation i React Native med React Navigation

I denne artikel vil vi udforske, hvordan man implementerer navigation i en React Native-applikation ved hjælp af React Navigation, et populært bibliotek, der giver os mulighed for at opbygge en robust navigation mellem forskellige skærme. Dette vil være et grundlæggende eksempel på at opsætte en stack-navigator, navigere mellem skærme og håndtere parametre, som kan blive sendt mellem skærme.

Når vi starter, er det nødvendigt at installere nogle afhængigheder. Først installerer vi de nødvendige pakker via Expo:

bash
Copy code
npx expo install react-native-screens react-native-safe-area-context

Disse pakker er grundlæggende for at kunne oprette navigation i React Native. Derudover skal vi installere et specifikt bibliotek til stack-navigatoren:

bash
Copy code
npm install @react-navigation/native-stack

Med disse pakker installeret, er vi klar til at begynde at udvikle navigationen i applikationen. Lad os tage et kig på, hvordan App-komponenten ser ud, når vi har opsat en stack-navigator.

javascript
Copy code
import Home from "./Home";
import Settings from "./Settings";
const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

Her bruger vi createNativeStackNavigator(), som er en funktion, der opsætter navigationen og returnerer et objekt med to hovedkomponenter: Screen og Navigator. Screen definerer de skærme, der kan navigeres til, og Navigator styrer selve navigationen og transitions mellem skærmene.

I ovenstående eksempel definerer vi to skærme: Home og Settings. Home bliver den første skærm, der vises, fordi vi har angivet den som standard.

Skærme i React Navigation er blot almindelige React Native-komponenter, og navigatoren håndterer rutning og overgange mellem disse skærme for os. For at navigere mellem skærmene kan vi bruge navigation.navigate() metoden. Her er, hvordan Home-komponenten kan se ud:

javascript
Copy code
type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;

export default function Home({ navigation }: Props) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button title="Go to Settings" onPress={() => navigation.navigate("Settings")} />
    </View>
  );
}

I denne komponent er der en Button, som ved tryk navigerer til Settings skærmen. navigation-objektet bliver automatisk sendt til vores komponent som en prop af React Navigation, og vi kan bruge det til at navigere mellem skærme.

For at få en type-sikker navigation, især i TypeScript, kan vi definere en type, der beskriver alle ruter i applikationen. Denne type kaldes RootStackParamList og ser sådan ud:

typescript
Copy code
export type RootStackParamList = {
  Home: undefined;
  Settings: undefined;
};

Her definerer vi, at hver skærm ikke kræver nogen parametre (dvs. undefined). Dette gør det muligt at bruge navigation.navigate() med navnet på ruten og navigere sikkert mellem skærme uden at bekymre sig om typografi.

Nu ser vi på, hvordan Settings-komponenten ser ud:

javascript
Copy code
type Props = NativeStackScreenProps<RootStackParamList, 'Settings'>;

export default function Settings({ navigation }: Props) {
  return (
    <View style={styles.container}>
      <Text>Settings Screen</Text>
      <Button title="Go to Home" onPress={() => navigation.navigate("Home")} />
    </View>
  );
}

Denne komponent er næsten identisk med Home-komponenten, men knappen navigerer tilbage til Home-skærmen, når den trykkes.

En ekstra funktion, som React Navigation automatisk håndterer, er navigationsbaren. Denne vises øverst på skærmen og giver brugeren mulighed for at navigere tilbage til den forrige skærm. Hvis du kører applikationen på en Android-enhed, vil du også se en standard tilbage-knap uden for appen, som fungerer på samme måde som tilbage-knappen i en webbrowser.

Et andet aspekt af navigation er at sende parametre mellem skærme. I webapplikationer har vi ofte ruter med dynamiske data i URL'en, f.eks. et ID for at hente specifikke data. Det samme koncept gælder i React Navigation. Du kan sende ekstra data sammen med navigationskaldet.

Her er et eksempel på, hvordan man kan sende data via ruter:

javascript
Copy code
const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Details" component={Details} />
    </Stack.Navigator>
  );
}

I Home-komponenten kan vi sende et parameter (f.eks. en titel) til Details-skærmen:

javascript
Copy code
type Props = NativeStackScreenProps<RootStackParamList, 'Home'>;

export default function Home({ navigation }: Props) {
  return (
    <View style={styles.container}>
      <Text>Home Screen</Text>
      <Button title="Go to Details: First Item" onPress={() => navigation.navigate("Details", { title: "First Item" })} />
      <Button title="Go to Details: Second Item" onPress={() => navigation.navigate("Details", { title: "Second Item" })} />
      <Button title="Go to Details: Third Item" onPress={() => navigation.navigate("Details", { title: "Third Item" })} />
    </View>
  );
}

På Details-skærmen kan vi få adgang til disse data via route.params:

javascript
Copy code
type Props = NativeStackScreenProps<RootStackParamList, 'Details'>;

export default function Details({ route }: Props) {
  const { title } = route.params;
  return (
    <View style={styles.container}>
      <Text>{title}</Text>
    </View>
  );
}

I dette eksempel sender vi en titel med som parameter, og Details-skærmen bruger denne titel til at vise den relevante information. Du kan sende så mange parametre, som du behøver, og tilgå dem på den relevante skærm via route.params.

Med disse grundlæggende teknikker er du godt rustet til at bygge navigationssystemer i React Native ved hjælp af React Navigation. Det er dog også vigtigt at overveje, hvordan navigationen påvirker brugeroplevelsen og hvilke designmønstre, der er bedst for din app.

Hvordan håndterer vi fejlmeddelelser og passive notifikationer i mobilapps?

Når du udvikler mobilapplikationer, er det essentielt at forstå, hvordan man kommunikerer med brugerne om fejl og situationer, der kræver opmærksomhed. I denne sammenhæng er modalvinduer og notifikationer grundlæggende værktøjer, der spiller en stor rolle i brugeroplevelsen. Afhængig af situationen kan du vælge at vise brugeren en fejlmeddelelse, som kræver deres handling, eller en mere passiv notifikation, der blot informerer uden at afbryde deres aktivitet.

Fejlmeddelelser kan præsenteres på flere måder, men en af de mest almindelige er ved hjælp af modalvinduer, der tvinger brugeren til at interagere. Når noget går galt i applikationen, og der ikke er nogen umiddelbar løsning for brugeren, kan du vælge at vise en simpel besked, der kræver deres bekræftelse. Et eksempel på en sådan fejlmeddelelse kunne være en knap med teksten "Fix it" eller "Ignore it", som brugeren skal vælge for at fortsætte. Dette sikrer, at de er opmærksomme på fejlsituationen.

Når du arbejder med modalvinduer i React Native, er der en vigtig detalje at huske på. Stilarter til modalvinduer bliver ofte behandlet som arrays og kombineret i den rækkefølge, de skal vises. Fejlens stil vil typisk være sidst i rækken, så hvis der er stilkonflikter, som for eksempel baggrundsfarver, vil den sidste stil overskrive de tidligere. Dette kræver en grundig planlægning af, hvordan stilarterne håndteres for at undgå utilsigtede visuelle effekter.

En vigtig del af at designe fejlmeddelelser er at vælge den rette interaktionsmodel. Ikke alle fejl kræver aktiv handling fra brugeren. I mange tilfælde kan du vælge en passiv notifikation, som informerer brugeren uden at forstyrre deres nuværende aktivitet. For eksempel kan en "Toast"-meddelelse vises i en kort periode på skærmen, der informerer brugeren om en hændelse, uden at de behøver at reagere. Denne tilgang er især populær i Android-applikationer, hvor "Toast"-meddelelser vises i bunden af skærmen og automatisk fjernes efter et kort interval.

Der findes en god løsning for at implementere Toast-notifikationer på både iOS og Android ved hjælp af biblioteker som react-native-root-toast. For at bruge denne metode skal applikationen først indlæse biblioteket og derefter bruge Toast.show() metoden til at vise beskeden. En simpel implementering kan se sådan ud:

javascript
Copy code
export default function PassiveNotifications() {
  return (
    <TouchableOpacity
      onPress={() => {
        Toast.show("Noget skete!", { duration: Toast.durations.LONG });
      }}
    >
      <Text>Vis notifikation</Text>
    </TouchableOpacity>
  );
}

Denne tilgang er ideel til situationer, hvor brugeren skal informeres om noget, men hvor det ikke nødvendigvis er kritisk, og hvor meddelelsen ikke kræver deres aktive respons.

En anden vigtig type modal er aktivitetmodalen, som anvendes til at vise, at noget er i gang i applikationen, f.eks. når der hentes data fra en server. Aktivitetmodalen viser en indikator for, at applikationen er travlt optaget, og det er derfor vigtigt at sikre, at brugeren ikke bliver forvirret over, om applikationen er låst eller ikke fungerer. I denne kontekst vil du ofte bruge en ActivityIndicator for at vise, at noget sker i baggrunden. Et eksempel på en sådan modal kunne se ud som følger:

javascript
Copy code
export default function Activity({ visible, size = "large" }: ActivityProps) {
  return (
    <Modal visible={visible} transparent>
      <View style={styles.modalContainer}>
        <ActivityIndicator size={size} />
      </View>
    </Modal>
  );
}

Når du arbejder med aktivitetmodaler, er det vigtigt at sikre, at de kun vises, når de er nødvendige, og at de ikke forstyrrer brugerens oplevelse. Aktivitetmodaler skal kunne skjules automatisk, når en bestemt opgave er fuldført, som f.eks. når et API-kald har afsluttet sin opgave. Dette kan gøres ved hjælp af en simpel Promise, som opdaterer den synlige tilstand i appen, når operationen er afsluttet.

Her er et eksempel på en sådan implementering:

javascript
Copy code
export default function App() {
  const [fetching, setFetching] = useState(false);
  const [promise, setPromise] = useState(Promise.resolve());

  function onPress() {
    setPromise(
      new Promise((resolve) => setTimeout(resolve, 3000)).then(() => {
        setFetching(false);
      })
    );
    setFetching(true);
  }

  return (
    <View>
      <Button title="Fetch Stuff..." onPress={onPress} />
      <Activity visible={fetching} />
    </View>
  );
}

I denne situation viser appen en aktivitetmodal, mens dataene bliver hentet, og skjuler den, når opgaven er afsluttet.

Notifikationer og modaler er essentielle for at kommunikere med brugerne på en effektiv måde, men de skal bruges med omtanke. For hyppige eller forstyrrende modaler kan hurtigt føre til, at brugeren mister fokus og får en negativ oplevelse af applikationen. Det er derfor vigtigt at balancere, hvornår og hvordan du viser sådanne meddelelser.

For udviklere er det også vigtigt at forstå de platform-specifikke forskelle i notifikationer. Mens Android understøtter Toast-notifikationer direkte, kræver iOS et ekstra bibliotek for at implementere en tilsvarende funktionalitet. Dette betyder, at du skal sikre dig, at applikationen fungerer konsekvent på tværs af platforme og giver en ensartet brugeroplevelse.

Endelig bør du som udvikler overveje at implementere både aktive og passive notifikationer strategisk i applikationen for at sikre, at brugeren får de nødvendige oplysninger, samtidig med at deres oplevelse forbliver så problemfri som muligt.