1. Why I am hooked on the
future of React
Maurice de Beijer
@mauricedb

2. Maurice de Beijer
• The Problem Solver
• Microsoft MVP
• Freelance developer/instructor
• @mauricedb
• http://www.TheProblemSolver.nl
• maurice.de.beijer@gmail.com
2© ABL - The Problem Solver

3. The React Newsletter
© ABL - The Problem Solver 3

4. Agenda
Today
• Working with async data:
• Class based components
• Functional components
• Resources
• <Suspense />
Future
• Concurrent rendering
• useTransition()
• <SuspenseList />
© ABL - The Problem Solver 4

5. Class Components
• Used to be the most common way to
write React components
© ABL - The Problem Solver 6

6. © ABL - The Problem Solver 7

7. The problem with classes
© ABL - The Problem Solver 8

8. Fat arrow for some functions
© ABL - The Problem Solver 9

9. Functional Components
 Are the best ways to write most
components these days
© ABL - The Problem Solver 10

10. © ABL - The Problem Solver 11

11. Deeply Nested Components
© ABL - The Problem Solver 12

12. © ABL - The Problem Solver 13

13. Hooks
© ABL - The Problem Solver 14

14. The useState() hook
• Manage state in a functional component
• Returns a stateful value, and a function
to update it
© ABL - The Problem Solver 15

15. The useEffect() hook
• Manage side effects in a functional
component
• Accepts a function that contains
imperative, possibly effectful code
© ABL - The Problem Solver 16

16. React Context
© ABL - The Problem Solver 17

17. Render Props
© ABL - The Problem Solver 18

18. The useContext() hook
• Returns the current context value for a
given context
© ABL - The Problem Solver 19

19. All hooks
• Basic hooks
• useState()
• useEffect()
• useContext()
• Additional Hooks
• useReducer()
• useLayoutEffect()
• useRef()
• useCallback()
• useMemo()
• useImperativeHandle()
© ABL - The Problem Solver 20

20. Custom hooks
• Reuse shared logic between components
© ABL - The Problem Solver 21

21. Using the custom hook
• Simplify the functional component even
more
© ABL - The Problem Solver 22

22. © ABL - The Problem Solver 23

23. Rules of hooks
• 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
© ABL - The Problem Solver 24

24. Data Fetching using Suspense
25© ABL - The Problem Solver

25. Resource Manager
• Load asynchronous data
• Suspends rendering the closest
<Suspense> component
• Note: Throw a promise to suspend!
• See this gist from Ryan Florence
26© ABL - The Problem Solver

26. AJAX Resource
© ABL - The Problem Solver 27

27. AJAX Resource
• A resource using fetch() to load some
data
28© ABL - The Problem Solver

28. Fetching the resource
• Fetching asynchronous data
• Suspends rendering the closest
<Suspense> component if not ready
• Use an <ErrorBoundary> to handle
errors
29© ABL - The Problem Solver

29. <Suspense />
30© ABL - The Problem Solver

30. <Suspense />
• Suspend rendering when one or more of
the child components is not ready
• Display a fallback component instead
31© ABL - The Problem Solver

31. Error boundary
• Handle errors the standard React way
© ABL - The Problem Solver 32

32. 37© ABL - The Problem Solver

33. Concurrent Rendering
38© ABL - The Problem Solver

34. Concurrent Rendering
• Changes how React renders your
components
• The render phase is split into chunks and
can be interrupted/aborted and restarted
• The commit phase is still atomic
• No partial screen updates
39© ABL - The Problem Solver

35. Feature Comparison
© ABL - The Problem Solver 40

36. React.useTransition()
41© ABL - The Problem Solver

37. React.useTransition()
• Transition between application states in a
more controlled manner
42© ABL - The Problem Solver

38. <SuspenseList />
43© ABL - The Problem Solver

39. <SuspenseList />
• Control how multiple <Suspense>
boundaries are rendered
• For example:
• Prevents multiple loading indicators at the
same time
44© ABL - The Problem Solver

40. 45© ABL - The Problem Solver