React Hooks
Frontend dev @ best it
Gerald Urschitz
Components
Components
Components
Components
Components in React
Components in React
Render-Ergebnis
Zustand
Zustand
Zustand in React
count: 0
Zustand
User Interface
Zustand in React
count: 0
Zustand
User Interface
render
Zustand in React
count: 0
Zustand
User Interface
render
Zustand in React
count: 0
count: 1
Zustand
User Interface
render
Zustand in React
count: 0
count: 1
Zustand
User Interface
render
render
Was sind Hooks?
Was sind Hooks?
Vorgestellt im Oktober 2018
Was sind Hooks?
Vorgestellt im Oktober 2018
Stabil seit React 16.8 (Februar 2019)
Was sind Hooks?
Vorgestellt im Oktober 2018
Stabil seit React 16.8 (Februar 2019)
Keine Breaking Changes
"[Hooks] let you use state and other React features without writing a class"
Was sind Hooks?
Function Components
Function Components
normale JavaScript-Funktion
Function Components
props als Argument
normale JavaScript-Funktion
Function Components
props als Argument
normale JavaScript-Funktion
gibt React Element zurück (z.B. via JSX)
Function Components
props als Argument
normale JavaScript-Funktion
gibt React Element zurück (z.B. via JSX)
wie render() in Class Component
Function Components
Function Components
Hooks von React
useState
Zustand in FC (Function Components)
useEffect
Code mit Side Effects in FC ausführen
8 weitere nützliche Hooks von React:
https://reactjs.org/docs/hooks-reference.html#additional-hooks
Beispiel
Update alle 5 Sekunden
Beispiel
Update alle 5 Sekunden
Component Lifecycle
(vereinfacht)
Component Lifecycle
(vereinfacht)
Mount
Component wurde in den DOM gerendert
Component Lifecycle
(vereinfacht)
Mount
Update
Component wurde in den DOM gerendert
Props wurden verändert
Component Lifecycle
(vereinfacht)
Mount
Update
Unmount
Component wurde in den DOM gerendert
Props wurden verändert
Component wird aus dem DOM genommen
Beispiel
Beispiel
Wechselkurs laden
Intervall definieren (setInterval)
Beispiel
Wechselkurs laden
Intervall definieren (setInterval)
aktuellen Wechselkurs-Request abbrechen
aktuelles Intervall löschen (clearInterval)
Wechselkurs laden
Intervall definieren (setInterval)
Beispiel
Wechselkurs laden
Intervall definieren (setInterval)
aktuellen Wechselkurs-Request abbrechen
aktuelles Intervall löschen (clearInterval)
Wechselkurs laden
Intervall definieren (setInterval)
aktuellen Wechselkurs-Request abbrechen
aktuelles Intervall löschen (clearInterval)
Als Function Component?
Als Function Component?
State mit useState
Als Function Component?
Keine Lifecycle-Methoden in FCs
State mit useState
Als Function Component?
Keine Lifecycle-Methoden in FCs
State mit useState
keine "Side Effects" während der Render Phase
Als Function Component?
Keine Lifecycle-Methoden in FCs
keine "Side Effects" während der Render Phase
State mit useState
z.B. Data Fetching, DOM Manipulation, etc...
useEffect Hook
useEffect Hook
useEffect Hook
Side Effekt wird nach dem Rendern ausgeführt
z.B. Daten laden, Intervall setzen
useEffect Hook
useEffect Hook
Side Effekt wird nur nach Änderung der
Abhängigkeiten ausgeführt
Side Effects
posts: []
Zustand
User Interface
Side Effects
posts: []
Zustand
User Interface
render
Side Effects
posts: []
Zustand
User Interface
render
loadPosts()
Side Effects
posts: []
posts: [{…}, {…}]
Zustand
User Interface
render
loadPosts()
Side Effects
posts: []
posts: [{…}, {…}]
Zustand
User Interface
render
render
loadPosts()
Side Effects
posts: []
posts: [{…}, {…}]
Zustand
User Interface
render
render
loadPosts()
loadPosts()
Wird bei jedem render ausgeführt.
Wird bei jedem render ausgeführt.
d.h. in diesem Fall 2x
useEffect Hook
"Cleanup"-Funktion als Rückgabewert
z.B. Intervall löschen
useEffect Hook
Beispiel
Wechselkurs laden
Intervall definieren (setInterval)
aktuellen Wechselkurs-Request abbrechen
aktuelles Intervall löschen (clearInterval)
Wechselkurs laden
Intervall definieren (setInterval)
aktuellen Wechselkurs-Request abbrechen
aktuelles Intervall löschen (clearInterval)
"EUR"
"EUR"
"USD"
"USD"
1
"EUR"
"USD"
"USD"
"EUR"
1
"EUR"
"USD"
"EUR"
"USD"
1
"EUR"
"USD"
"EUR"
"USD"
1
RENDER
rate:
lastUpdated:
"EUR"
"USD"
"EUR"
"USD"
1
"USD"
"EUR"
"EUR"
"USD"
"EUR"
"USD"
1
"USD"
"EUR"
z.B: setRate(1.10) setLastUpdated(new Date())
"EUR"
"USD"
"EUR"
"USD"
1
"USD"
"EUR"
"EUR"
"USD"
"EUR"
"USD"
1
"USD"
"EUR"
"USD"
"EUR"
"EUR"
"USD"
"EUR"
"USD"
2
"USD"
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"USD"
"EUR"
"USD"
2
"USD"
"EUR"
"USD"
"EUR"
1.10
19:30
RENDER
rate:
lastUpdated:
1.10
19:30
"EUR"
"GBP"
3
"USD"
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"GBP"
"EUR"
"GBP"
3
"USD"
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"GBP"
RENDER
rate:
lastUpdated:
1.10
19:30
"EUR"
"GBP"
3
"USD"
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"GBP"
1
"EUR"
"GBP"
3
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"GBP"
"GBP"
"EUR"
"GBP"
3
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"GBP"
"GBP"
z.B: setRate(0.87) setLastUpdated(new Date())
"EUR"
"GBP"
3
"EUR"
"USD"
"EUR"
1.10
19:30
"EUR"
"GBP"
"GBP"
"EUR"
"GBP"
3
"EUR"
"EUR"
1.10
19:30
"EUR"
"GBP"
"GBP"
"GBP"
"EUR"
"GBP"
4
"EUR"
"EUR"
0.87
19:35
"EUR"
"GBP"
"GBP"
"GBP"
"EUR"
"GBP"
4
"EUR"
"EUR"
0.87
19:35
"EUR"
"GBP"
"GBP"
"GBP"
RENDER
rate:
lastUpdated:
0.87
19:35
Custom Hooks
Wiederverwendbarkeit
in React
Mixins
Higher-Order Components
Render Props
Render Props
Render Props
Custom Hooks
JavaScript Funktion
Custom Hooks
JavaScript Funktion
kann andere Hooks beinhalten
Custom Hooks
JavaScript Funktion
kann andere Hooks beinhalten
Name fängt mit "use" an
Custom Hooks
z.B. useRate
JavaScript Funktion
kann andere Hooks beinhalten
Name fängt mit "use" an
Regeln von Hooks
Verwende Hooks nur auf dem Top-Level
Verwende Hooks nur auf dem Top-Level
Nicht in Loops, Conditions oder verschachtelten Funktionen!
Verwende Hooks nur innerhalb von React-Funktionen
Verwende Hooks nur innerhalb von React-Funktionen
Nicht in normalen JavaScript-Funktionen aufrufen!
ESLint Plugin
ESLint Plugin
Warum Hooks?
Warum Hooks?
State / Side Effects in Function Components
Warum Hooks?
State / Side Effects in Function Components
Zusammenfassen von verteilter Lifecycle-Logik
Warum Hooks?
State / Side Effects in Function Components
Zusammenfassen von verteilter Lifecycle-Logik
Simplerer und lesbarerer Code
Warum Hooks?
State / Side Effects in Function Components
Zusammenfassen von verteilter Lifecycle-Logik
Simplerer und lesbarerer Code
...ohne Anpassung der Component-Hierarchie!
Dan Abramov, React Maintainer
Experimente außerhalb von React
Fragen?
Danke für die Aufmerksamkeit!
React Hooks
By Gerald Urschitz
React Hooks
- 439