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.
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
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
25. • Load asynchronous data
• Suspends rendering the closest <Suspense> component
• 💡 Throw a promise to suspend!
See this gist from Ryan Florence
Resource
Manager
27. • Fetching asynchronous data
• Suspends rendering the closest <Suspense> component if
not ready
👉 Use an <ErrorBoundary> to handle errors
Fetching the
resource
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 />
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
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?