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