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

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!

Made with Slides.com