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

81 views

Published on

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 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.

https://www.meetup.com/tilburg-tech-tuesdays/events/265871896/

Published in: Technology
  • Be the first to comment

  • 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 Maurice de Beijer @mauricedb
  2. 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. 3. The React Newsletter © ABL - The Problem Solver 3
  4. 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. 5. Class Components • Used to be the most common way to write React components © ABL - The Problem Solver 6
  6. 6. © ABL - The Problem Solver 7
  7. 7. The problem with classes © ABL - The Problem Solver 8
  8. 8. Fat arrow for some functions © ABL - The Problem Solver 9
  9. 9. Functional Components  Are the best ways to write most components these days © ABL - The Problem Solver 10
  10. 10. © ABL - The Problem Solver 11
  11. 11. Deeply Nested Components © ABL - The Problem Solver 12
  12. 12. © ABL - The Problem Solver 13
  13. 13. Hooks © ABL - The Problem Solver 14
  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. 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. 16. React Context © ABL - The Problem Solver 17
  17. 17. Render Props © ABL - The Problem Solver 18
  18. 18. The useContext() hook • Returns the current context value for a given context © ABL - The Problem Solver 19
  19. 19. All hooks • Basic hooks • useState() • useEffect() • useContext() • Additional Hooks • useReducer() • useLayoutEffect() • useRef() • useCallback() • useMemo() • useImperativeHandle() © ABL - The Problem Solver 20
  20. 20. Custom hooks • Reuse shared logic between components © ABL - The Problem Solver 21
  21. 21. Using the custom hook • Simplify the functional component even more © ABL - The Problem Solver 22
  22. 22. © ABL - The Problem Solver 23
  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. 24. Data Fetching using Suspense 25© ABL - The Problem Solver
  25. 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. 26. AJAX Resource © ABL - The Problem Solver 27
  27. 27. AJAX Resource • A resource using fetch() to load some data 28© ABL - The Problem Solver
  28. 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. 29. <Suspense /> 30© ABL - The Problem Solver
  30. 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. 31. Error boundary • Handle errors the standard React way © ABL - The Problem Solver 32
  32. 32. 37© ABL - The Problem Solver
  33. 33. Concurrent Rendering 38© ABL - The Problem Solver
  34. 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. 35. Feature Comparison © ABL - The Problem Solver 40
  36. 36. React.useTransition() 41© ABL - The Problem Solver
  37. 37. React.useTransition() • Transition between application states in a more controlled manner 42© ABL - The Problem Solver
  38. 38. <SuspenseList /> 43© ABL - The Problem Solver
  39. 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. 40. 45© ABL - The Problem Solver

×