Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Why I am
hooked on the
future of React
@mauricedb
© ABL - The Problem Solver 1
 Maurice de Beijer
 The Problem Solver
 Microsoft MVP
 Freelance developer/instructor
 Twitter: @mauricedb
 Web: htt...
The React
Newsletter
© ABL - The Problem Solver 4
http://bit.ly/ReactNewsletter
History
of
Components
© ABL - The Problem Solver 5
Original
Component
API
© ABL - The Problem Solver 6
Class
Components
© ABL - The Problem Solver 7
State
&
Lifecycle
© ABL - The Problem Solver 8
The problem
with classes
© ABL - The Problem Solver 9
this
© ABL - The Problem Solver 10
Fat arrow for
some functions
© ABL - The Problem Solver 11
Single
responsibility
in multiple
functions
© ABL - The Problem Solver 12
Functional
Components
© ABL - The Problem Solver 13
The
Problem
© ABL - The Problem Solver 14
And
© ABL - The Problem Solver 15
If your only
tool …
© ABL - The Problem Solver 16
Deeply
Nested
Components
© ABL - The Problem Solver 17
Many are
wrappers to
add props
© ABL - The Problem Solver 18
Render
Props
© ABL - The Problem Solver 19
But…
© ABL - The Problem Solver 20
Introducing
Hooks
© ABL - The Problem Solver 21
Open
Mind
© ABL - The Problem Solver 22
State
© ABL - The Problem Solver 23
useState()
© ABL - The Problem Solver 24
Just
State
© ABL - The Problem Solver 25
Side Effects
© ABL - The Problem Solver 26
useEffect()
© ABL - The Problem Solver 27
Context
© ABL - The Problem Solver 28
Render
Props
© ABL - The Problem Solver 29
useContext()
© ABL - The Problem Solver 30
All hooks
 Basic hooks
 useState()
 useEffect()
 useContext()
 Additional Hooks
 useReducer()
 useLayoutEffect()
 ...
Custom
Hooks
© ABL - The Problem Solver 32
Custom
Hooks
© ABL - The Problem Solver 33
Using
The
Hook
© ABL - The Problem Solver 34
Rules
of
Hooks
© ABL - The Problem Solver 35
Rules
of
Hooks
© ABL - The Problem Solver 36
 Hooks can only be used in functional components
 Or in other hooks
 Not i...
Hooks are
optional
© ABL - The Problem Solver 37
Classes will
keep on
working
© ABL - The Problem Solver 38
Maurice de Beijer
@mauricedb
© ABL - The Problem Solver 39
Why I am hooked on the future of React
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

Why I am hooked on the future of React

Download to read offline

Presentation about why I am hooked on the future of React at the Rotterdam React meetup @mendix

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Why I am hooked on the future of React

  1. 1. Why I am hooked on the future of React @mauricedb © ABL - The Problem Solver 1
  2. 2.  Maurice de Beijer  The Problem Solver  Microsoft MVP  Freelance developer/instructor  Twitter: @mauricedb  Web: http://www.TheProblemSolver.nl  E-mail: maurice.de.beijer@gmail.com 2ABL - The Problem Solver
  3. 3. The React Newsletter © ABL - The Problem Solver 4 http://bit.ly/ReactNewsletter
  4. 4. History of Components © ABL - The Problem Solver 5
  5. 5. Original Component API © ABL - The Problem Solver 6
  6. 6. Class Components © ABL - The Problem Solver 7
  7. 7. State & Lifecycle © ABL - The Problem Solver 8
  8. 8. The problem with classes © ABL - The Problem Solver 9
  9. 9. this © ABL - The Problem Solver 10
  10. 10. Fat arrow for some functions © ABL - The Problem Solver 11
  11. 11. Single responsibility in multiple functions © ABL - The Problem Solver 12
  12. 12. Functional Components © ABL - The Problem Solver 13
  13. 13. The Problem © ABL - The Problem Solver 14
  14. 14. And © ABL - The Problem Solver 15
  15. 15. If your only tool … © ABL - The Problem Solver 16
  16. 16. Deeply Nested Components © ABL - The Problem Solver 17
  17. 17. Many are wrappers to add props © ABL - The Problem Solver 18
  18. 18. Render Props © ABL - The Problem Solver 19
  19. 19. But… © ABL - The Problem Solver 20
  20. 20. Introducing Hooks © ABL - The Problem Solver 21
  21. 21. Open Mind © ABL - The Problem Solver 22
  22. 22. State © ABL - The Problem Solver 23
  23. 23. useState() © ABL - The Problem Solver 24
  24. 24. Just State © ABL - The Problem Solver 25
  25. 25. Side Effects © ABL - The Problem Solver 26
  26. 26. useEffect() © ABL - The Problem Solver 27
  27. 27. Context © ABL - The Problem Solver 28
  28. 28. Render Props © ABL - The Problem Solver 29
  29. 29. useContext() © ABL - The Problem Solver 30
  30. 30. All hooks  Basic hooks  useState()  useEffect()  useContext()  Additional Hooks  useReducer()  useLayoutEffect()  useRef()  useCallback()  useMemo()  useImperativeHandle()  Custom hooks  useDebugValue()  Your custom hooks © ABL - The Problem Solver 31
  31. 31. Custom Hooks © ABL - The Problem Solver 32
  32. 32. Custom Hooks © ABL - The Problem Solver 33
  33. 33. Using The Hook © ABL - The Problem Solver 34
  34. 34. Rules of Hooks © ABL - The Problem Solver 35
  35. 35. Rules of Hooks © ABL - The Problem Solver 36  Hooks can only be used in functional components  Or in other hooks  Not in class based components  Hooks must always be created in the same order  Must be outside loops, conditions or nested functions  Hooks names must be prefixed with `use`  There is an ESLint plugin to enforce these rules
  36. 36. Hooks are optional © ABL - The Problem Solver 37
  37. 37. Classes will keep on working © ABL - The Problem Solver 38
  38. 38. Maurice de Beijer @mauricedb © ABL - The Problem Solver 39

Presentation about why I am hooked on the future of React at the Rotterdam React meetup @mendix

Views

Total views

380

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×