---
# System prepended metadata

title: React Optimierung
tags: [Ausbildung, IT]

---

# React Optimierung
###### tags: `IT` `Ausbildung`


## Analyse

### React Devtools

Um die Perfomance der Anwendung zu analysieren oder generell beim Debuggen zu unterstützen kann das Browser Addon `React Devtools` verwendet werden. Es ist für [Firefox](https://addons.mozilla.org/de/firefox/addon/react-devtools/) und [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=de), somit in so gut wie allen Browsern, verfügbar.

Das Addon fügt zu den Developer Tools des Browsers zwei Tabs hinzu, den `Components` und `Profiler` Tab.

#### Components Tab

Im Components Tab kann man die aktuelle Struktur der Komponenten betrachten(vergleichbar mit den Inspektor des Browsers). Man bei jedem Komponent die `Props` und den `State` betrachten und bei einem Development Build auch teilweise bearbeiten, ohne dabei den Debugger zu bemühen oder etliche Lognachrichten in den Code hinzuzugüfen.