Ah, reagiere! Unsere beliebte Bibliothek zum Erstellen von Benutzeroberflächen. Es ist der Zaubertrank, der dafür sorgt, dass sich unsere Web-Apps interaktiv und schnell anfühlen – bis das eines Tages nicht mehr der Fall ist. Plötzlich bemerken Sie, dass die Dinge langsamer werden. Das Klicken auf eine Schaltfläche fühlt sich an, als würde man einen Brief per Brieftaube verschicken. Ihre App geht von blitzschnell zu kaffeepausenlangsam über und die Benutzer beginnen, Ihnen „das Aussehen“ zu verleihen.

Aber keine Sorge! So wie Kaffee die meisten Probleme im Leben lösen kann (so würden wir zumindest glauben), können ein paar Schlüsseltechniken Ihre React-App aufladen und wieder auf Höchstgeschwindigkeit bringen. Sehen wir uns 6 einfache Möglichkeiten an, Ihre React-App so zu optimieren, dass sie schneller ist als Ihr täglicher Koffeinschub.

1. Code-Splitting: Nur das laden, was Sie brauchen

Haben Sie schon einmal einen Raum betreten, alle Lichter angeschaltet und dann gemerkt, dass Sie nur eines brauchten? Das macht Ihre React-App, wenn Sie alles in einem großen Block bündeln. Stattdessen laden Sie beim Code-Splitting nur die Teile Ihrer App, die gerade benötigt werden. Es ist, als würde man Zimmer für Zimmer das Licht einschalten!

Die Verwendung von React.lazy() und Suspenseis ist eine perfekte Möglichkeit, dies zu implementieren:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    Loading...}>
      
  );
}

Warum es hilft: Die Codeaufteilung verkürzt die anfängliche Ladezeit Ihrer App, indem das Laden von ungenutztem Code verschoben wird, bis es nötig ist. Benutzer müssen nicht warten, bis die gesamte App geladen ist, bevor sie etwas auf dem Bildschirm sehen.

2. Lazy Loading Bilder: Laden Sie nicht alle Snacks auf einmal

Stellen Sie sich vor, Sie bestellen eine Pizza und erhalten stattdessen Lebensmittel für ein ganzes Jahr. Klingt lächerlich, oder? Nun, das passiert, wenn Sie alle Ihre Bilder im Voraus laden. Laden Sie die Bilder stattdessen verzögert, sodass Sie nur das Notwendige abrufen, genau wie beim Bestellen einer Pizza nach der anderen.

Die Verwendung einer Bibliothek wie „react-lazyload“ ist eine schnelle Lösung:

import LazyLoad from 'react-lazyload';

Warum es hilft: Durch das verzögerte Laden von Bildern verkürzen Sie die anfängliche Ladezeit der Seite und laden Bilder nur dann herunter, wenn sie benötigt werden – was sowohl die Leistung als auch die Benutzererfahrung verbessert.

3. useCallback und useMemo: Speicherschub für React

So wie Sie dieselbe Kaffeetasse immer wieder verwenden, um Zeit beim Waschen zu sparen, kann React Werte und Funktionen wiederverwenden, wenn Sie es zulassen! useCallback und useMemo sind Hooks, die Ihnen helfen, teure Berechnungen oder Funktionen zu speichern, damit sie nicht bei jedem Rendern neu berechnet werden.

useMemo-Beispiel:

const expensiveCalculation = (num) => {
  return num ** 2;
};

const MyComponent = ({ num }) => {
  const squaredNumber = React.useMemo(() => expensiveCalculation(num), [num]);

  return 
{squaredNumber}
;
}

useCallback-Beispiel:

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

Warum es hilft: Mit useMemo muss React teure Berechnungen nicht unnötig wiederholen. Und useCallback verhindert, dass Sie bei jedem Rendern eine neue Funktion erstellen. Dadurch läuft React reibungslos – als würde man seinen RAM aufrüsten!

4. Auswendiglernen mit React.memo: Stoppen Sie unnötige erneute Renderings

Haben Sie diesen einen Freund, der immer wieder die gleiche Geschichte wiederholt? React kann auch so sein – Komponenten neu rendern, auch wenn es nicht nötig ist! Hier kommt React.memo ins Spiel und verhindert, dass React Komponenten erneut rendert, es sei denn, ihre Requisiten ändern sich.

const MyComponent = React.memo(({ value }) => {
  return 
{value}
;
});

Warum es hilft: React.memo ist, als würde man React sagen: „Hey, das hast du schon einmal gehört!“ Wiederholen Sie sich nicht, es sei denn, es gibt etwas Neues.“ Es vermeidet unnötiges erneutes Rendern und spart Zeit und Ressourcen.

5. Effizientes Zustandsmanagement: Heben Sie ihn nur bei Bedarf an

Das Anheben des Status nach oben ist ein häufiges Muster in React, aber manchmal machen wir uns schuldig, ihn zu hoch anzuheben oder zu viel Status an den falschen Stellen zu verwalten. Dies kann zu übermäßigem Neu-Rendering führen. Behalten Sie den Status nach Möglichkeit lokal bei den Komponenten bei und vermeiden Sie unnötige erneute Renderings, indem Sie den Status nur dann anheben, wenn es wirklich notwendig ist.

const ParentComponent = () => {
  const [sharedState, setSharedState] = useState(false);

  return (
    
      >
  );
}

const ChildComponent = ({ sharedState }) => {
  return 
{sharedState ? 'Active' : 'Inactive'}
;
}

const AnotherChild = ({ setSharedState }) => {
  return  setSharedState(true)}>Activate;
}

Warum es hilft: Indem Sie den Status sorgfältiger verwalten und ihn nur bei Bedarf anheben, können Sie unnötige Neu-Renderings von Geschwisterkomponenten vermeiden. Dadurch bleibt Ihre App fokussiert und effizient.

6. Entprellen von Benutzereingaben: Beruhigen Sie sich, reagieren Sie!

Stellen Sie sich vor, jemand tippt hektisch in eine Suchleiste und Ihre App versucht, jeden einzelnen Tastendruck zu verarbeiten. Schlechte Reaktion schwitzt wahrscheinlich Kugeln! Geben Sie die Entprellung ein – der Vorgang, bei dem Eingaben erst verarbeitet werden, nachdem ein Benutzer eine Pause eingelegt hat, und nicht bei jedem einzelnen Tastendruck.

Die Verwendung von lodash.debounce kann dieses Problem lösen:

import _ from 'lodash';

const Search = () => {
  const [query, setQuery] = useState('');

  const debouncedSearch = _.debounce((input) => {
    // Do your search logic
    console.log(input);
  }, 500);

  const handleChange = (e) => {
    setQuery(e?.target?.value);
    debouncedSearch(e?.target?.value);
  };

  return ;
}

Warum es hilft: Anstatt dass React bei jedem Tastendruck eine Panikattacke bekommt, gibt das Entprellen eine Verschnaufpause. Dies gewährleistet eine bessere Leistung bei der Verarbeitung von Benutzereingaben in Echtzeit, z. B. Such- oder Formularfeldern.

Fazit: Die Optimierung von React-Anwendungen ist kein Hexenwerk – es geht eher darum, sicherzustellen, dass man nicht sechs Kaffees auf einmal trinkt! Von der Codeaufteilung bis zum Lazy-Loading von Bildern helfen Ihnen diese Techniken dabei, Ihre React-App schnell und reaktionsfähig zu halten. Wenn sich Ihre App also das nächste Mal langsam anfühlt, denken Sie daran: Es ist nicht die Schuld von React – es braucht nur ein wenig Liebe zur Optimierung!

Denken Sie daran, dass die Optimierung einer React-App ein Balanceakt ist. Sie müssen nicht alle diese Techniken sofort anwenden. Identifizieren Sie stattdessen die Engpässe Ihrer App, wenden Sie die entsprechenden Optimierungen an und beobachten Sie, wie Ihre App schneller wird, als Sie Ihren Kaffee austrinken können!

Vielen Dank fürs Lesen. Wenn Ihnen der Beitrag gefallen hat, teilen Sie ihn bitte und hinterlassen Sie Vorschläge.

Verbinde dich mit mir

Website: Hardik Gohil

Github: https://github.com/HardikGohilHLR

Linkedin: https://www.linkedin.com/in/hardikgohilhlr

Danke ❤️