Why I am hooked on the future of React
Download as PPTX, PDF0 likes186 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
The document discusses advancements and best practices in React, touching on features like concurrent rendering, hooks, and data fetching with suspense. It highlights various hooks such as useEffect, useState, and custom hooks for managing state and side effects in functional components. Additionally, it explains the concept of server components and their differences from client components, emphasizing the importance of proper error handling and rendering strategies.
Why I am hooked on the future of React
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 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
- 38. Transition between application states in a more controlled manner useTransition()
- 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?