𝗪𝗶𝗲 𝗳𝗼𝗿𝘁𝗴𝗲𝘀𝗰𝗵𝗿𝗶𝘁𝘁𝗲𝗻𝗲 𝗥𝗲𝗮𝗰𝘁-𝗘𝗻𝘁𝘄𝗶𝗰𝗸𝗹𝗲𝗿 ū𝗯𝗲𝗿 𝗛𝗼𝗼𝗸𝘀 𝗱𝗲𝗻𝗸𝗲𝗻 𝘀𝗼𝗹𝗹𝘁𝗲𝗻
Die meisten Entwickler lernen Hooks, ohne zu verstehen, wie React rendert. Das führt zu Verwirrung. Um Hooks zu meistern, müssen Sie fünf Kernaufgaben verstehen:
• Daten speichern • Side Effects ausführen • Daten teilen • Rendering optimieren • Scheduling steuern
State-Änderungen lösen Re-Renders aus. Bei jedem Re-Render werden Variablen, Objekte und Funktionen neu erstellt. Diese einfache Tatsache erklärt, warum useMemo und useCallback existieren.
Die Hooks verstehen
State und Reihenfolge React speichert den State in einer Linked List, die an die Component Fiber gebunden ist. Deshalb können Hooks nicht innerhalb von Bedingungen oder Schleifen aufgerufen werden. React verlässt sich auf die Reihenfolge der Aufrufe, um den korrekten State zu finden.
Die Realität des Batchings
Wenn Sie setState aufrufen, plant React ein Update. Der Wert wird nicht sofort geändert. Deshalb zeigt das Loggen des States direkt nach der Änderung noch den alten Wert an. Verwenden Sie immer das funktionale Update-Pattern, um veraltete Daten (stale data) zu vermeiden:
- Schlecht:
setCount(count + 1) - Gut:
setCount(prev => prev + 1)
Das useEffect-Mental-Modell
Hören Sie auf, useEffect wie eine Lifecycle-Methode zu behandeln. Nutzen Sie es, um Ihre Komponente mit externen Systemen wie APIs oder WebSockets zu synchronisieren.
Wichtig: React zeichnet den Bildschirm (paints), bevor useEffect ausgeführt wird. Dies stellt sicher, dass Ihr Effect die UI nicht blockiert. Wenn Sie das DOM messen müssen, bevor der Benutzer es sieht, verwenden Sie useLayoutEffect.
Die useRef-Realität
Ein Ref ist nicht nur für DOM-Elemente gedacht. Es ist ein persistenter, veränderbarer Container. React behält zwischen den Renders dieselbe Objektreferenz bei. Das Ändern von ref.current löst keinen Re-Render aus. Nutzen Sie es für Timer, Sockets oder vorherige Werte.
Die Memoization-Falle
useMemo ist kein magischer Knopf für mehr Geschwindigkeit. Es verursacht Overhead. React muss den Cache speichern und die Abhängigkeiten vergleichen.
Verwenden Sie useMemo nur dann, wenn die Kosten der Berechnung höher sind als die Kosten der Memoization. Wenn Sie es für einfache mathematische Operationen verwenden, machen Sie Ihre App langsamer.
Context ist kein State Management Context dient der Dependency Injection. Es hilft Ihnen, Prop Drilling zu vermeiden. Wenn sich jedoch ein Context-Wert ändert, wird jeder Consumer neu gerendert. Packen Sie nicht Ihren gesamten globalen State in einen einzigen Provider. Teilen Sie Ihre Contexts nach Verwendungszweck auf.
Fortgeschrittene Patterns • useReducer: Verwenden Sie dies für komplexe State Machines anstatt vieler useState-Aufrufe. • startTransition: Verwenden Sie dies, um Ihre UI bei rechenintensiven Updates reaktionsfähig zu halten. • useDeferredValue: Verwenden Sie dies, um aufwendige UI-Updates zu verzögern, während der Benutzer tippt.
Schreiben Sie sauberen Code, indem Sie die Logik in Custom Hooks auslagern. Eine 1200 Zeilen lange Komponente ist schwer zu warten. Fünf kleine, logikzentrierte Hooks lassen sich leicht skalieren.
Quelle: https://dev.to/jagadeesh_008/how-advanced-react-developers-should-think-about-hooks-102l