The React team rewrote the book on developing components. Before we had a choice between classes and functional components. Yet many components needed to be classes. A functional component was often too limited. Now, using hooks, we can extend functional components to be as powerful as we want. Suspense and asynchronous rendering is in the future of React. It will make large applications much more responsive and easier to deal with. Getting started with suspense and asynchronous rendering isn't hard as you will discover. Come to this session to learn what React hooks are and how to get started using hooks. But be warned, once seen React hooks can’t be unseen and your React components will never be the same again.

1. #ScottishSummit2021
M a u r i c e d e B e i j e r
W h y I a m h o o k e d o n t h e f u t u r e o f R e a c t
S a t 1 5 : 0 0 — 4 5 m i n

2. Our Sponsors

3. T h e P r o b l e m S o l v e r
F o u n d e r / T r a i n e r / L e a d
@ m a u r i c e d b
Maurice
De Beijer

4. Agenda
Future
• Concurrent Rendering
• useTransition()
• <SuspenseList />
• Server Components
Today
• Asynchronous Data:
• Class based components
• Functional components
• Component hooks
• Resources
• <Suspense />
#ScottishSummit2021

5. Used to be the most common way to write React components
Class
Components

6. Houston we
have a
problem!

7. The problem
with classes

8. Fat arrow for some functions!
But not for other functions? 🤔
Fat arrows

9. If all you have is a
hammer
Scottish
Summit
Template
Then every problem looks like a nail

10. Deeply Nested
Components
Goes Here
Scottish
Summit
Template

11. Basic
ComponentHo
oks
Scottish
Summit
Template

12. • Manage state in a functional component
• Returns a tuple with:
• The current state
• An updater function
useState()
hook

13. • Manage side effects in a functional component
• Takes a function that contains the side effect
• Optional: Can return a clean-up function
👉 Always use the second argument with dependencies
useEffect()
hook

14. React Context
Scottish
Summit
Template
It’s all a matter of perspective

15. A flexible but hard to use pattern 😢
Render Props

16. Returns the current context value for a given context
useContext()
hook

17. Other hooks
Scottish
Summit
Template

18. • useReducer is an alternative to useState
and accepts a reducer function
• useCallback returns a memoized
callback
• useMemo returns a memoized value
• useRef returns a mutable ref object
whose .current property is initialized to
the passed argument
Additional
Hooks

19. • useImperativeHandle customizes the instance
value that is exposed to parent components
when using ref
• useLayoutEffect is like useEffect, but it fires
synchronously after all DOM mutations
• useDebugValue can be used to display a label
for custom hooks in React DevTools
Additional
Hooks

20. Custom hooks
Scottish
Summit
Template

21. Reuse shared logic between components
Custom hooks

22. Simplify the functional component even more
Hooks can’t be used in class based components 😢
Using the
custom hook

23. Rules of hooks
Scottish
Summit
Template

24. Data Fetching
using Suspense
Scottish
Summit
Template

25. • Load asynchronous data
• Suspends rendering the closest <Suspense> component
• 💡 Throw a promise to suspend!
See this gist from Ryan Florence
Resource
Manager

26. A resource using fetch() to load some data
AJAX
Resource

27. • Fetching asynchronous data
• Suspends rendering the closest <Suspense> component if
not ready
👉 Use an <ErrorBoundary> to handle errors
Fetching the
resource

28. <Suspense />
Goes Here
Scottish
Summit
Template

29. • Suspend rendering when one or more of the child
components is not ready
• Display a fallback component instead
👉 Handle errors the standard React way
<Suspense />

30. What is next
for React?
Scottish
Summit
Template

31. Concurrent
Rendering

32. • 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
Concurrent
Rendering

33. While React is rendering components
User clicks

34. When React is completely done rendering
The event
executes

35. React rendering is chunked into slices
Concurrent
mode

36. When a slice is done
• It can invalidate the render so far and restart it
• Render functions will be called multiple times
The event
executes

37. useTransition()
Scottish
Summit
Template

38. Transition between application states in a more controlled
manner
useTransition()

39. <SuspenseList />
Scottish
Summit
Template

40. • Control how multiple <Suspense> boundaries are rendered
• For example:
Prevents multiple loading indicators at the same time
<SuspenseList />

41. • They only run on the server, not on the client
• Can use a database, file or similar resource
• Can’t use hooks like setState or useEffect
• Can render other server or client components
• Client components can only render other client
components
Server
Components
Scottish
Summit
Template

42. Server components only run on the server
They can use a database, file or similar resource
But they can’t use hooks like useState or useEffect
They can render other server or client components
Client components only run on the client
They can only render other client components
Regular components can run on both client and server
Depending on who renders them
Server
Components

43. • This isn’t server side rendering
Server components send a special serialization format
• SSR would return HTML to the client
Server Side
Rendering?

44. #ScottishSummit2021
Thank You