Successfully reported this slideshow.

Why I am hooked on the future of React

0

Share

1 of 44
1 of 44

Why I am hooked on the future of React

0

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Why I am hooked on the future of React

  1. 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. 2. Our Sponsors
  3. 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. 4. Agenda Future • Concurrent Rendering • useTransition() • <SuspenseList /> • Server Components Today • Asynchronous Data: • Class based components • Functional components • Component hooks • Resources • <Suspense /> #ScottishSummit2021
  5. 5. Used to be the most common way to write React components Class Components
  6. 6. Houston we have a problem!
  7. 7. The problem with classes
  8. 8. Fat arrow for some functions! But not for other functions? 🤔 Fat arrows
  9. 9. If all you have is a hammer Scottish Summit Template Then every problem looks like a nail
  10. 10. Deeply Nested Components Goes Here Scottish Summit Template
  11. 11. Basic ComponentHo oks Scottish Summit Template
  12. 12. • Manage state in a functional component • Returns a tuple with: • The current state • An updater function useState() hook
  13. 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. 14. React Context Scottish Summit Template It’s all a matter of perspective
  15. 15. A flexible but hard to use pattern 😢 Render Props
  16. 16. Returns the current context value for a given context useContext() hook
  17. 17. Other hooks Scottish Summit Template
  18. 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. 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. 20. Custom hooks Scottish Summit Template
  21. 21. Reuse shared logic between components Custom hooks
  22. 22. Simplify the functional component even more Hooks can’t be used in class based components 😢 Using the custom hook
  23. 23. Rules of hooks Scottish Summit Template
  24. 24. Data Fetching using Suspense Scottish Summit Template
  25. 25. • Load asynchronous data • Suspends rendering the closest <Suspense> component • 💡 Throw a promise to suspend! See this gist from Ryan Florence Resource Manager
  26. 26. A resource using fetch() to load some data AJAX Resource
  27. 27. • Fetching asynchronous data • Suspends rendering the closest <Suspense> component if not ready 👉 Use an <ErrorBoundary> to handle errors Fetching the resource
  28. 28. <Suspense /> Goes Here Scottish Summit Template
  29. 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. 30. What is next for React? Scottish Summit Template
  31. 31. Concurrent Rendering
  32. 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. 33. While React is rendering components User clicks
  34. 34. When React is completely done rendering The event executes
  35. 35. React rendering is chunked into slices Concurrent mode
  36. 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. 37. useTransition() Scottish Summit Template
  38. 38. Transition between application states in a more controlled manner useTransition()
  39. 39. <SuspenseList /> Scottish Summit Template
  40. 40. • Control how multiple <Suspense> boundaries are rendered • For example: Prevents multiple loading indicators at the same time <SuspenseList />
  41. 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. 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. 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. 44. #ScottishSummit2021 Thank You

×