Download to read offline
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1756998088)
Uploaded byMaurice De Beijer [MVP]
Why I am hooked on the future of React
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.
More Related Content
Similar to Why I am hooked on the future of React
![Full Stack React Workshop [CSSC x GDSC]](https://cdn.slidesharecdn.com/ss_thumbnails/fullstackreactworkshopcsscxgdsc-230221003415-b512c1cf-thumbnail.jpg?width=640&height=640&fit=bounds)
More from Maurice De Beijer [MVP]
Why I am hooked on the future of React
- 1. #ScottishSummit2021 M a ur 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.
- 3. T h eP 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 bethe most common way to write React components Class Components
- 6.
- 7.
- 8. Fat arrow forsome functions! But not for other functions? 🤔 Fat arrows
- 9. If all youhave is a hammer Scottish Summit Template Then every problem looks like a nail
- 10.
- 11.
- 12. • Manage statein a functional component • Returns a tuple with: • The current state • An updater function useState() hook
- 13. • Manage sideeffects 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 alla matter of perspective
- 15. A flexible buthard to use pattern 😢 Render Props
- 16. Returns the currentcontext value for a given context useContext() hook
- 17.
- 18. • useReducer isan 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 customizesthe 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.
- 21. Reuse shared logicbetween components Custom hooks
- 22. Simplify the functionalcomponent even more Hooks can’t be used in class based components 😢 Using the custom hook
- 23.
- 24.
- 25. • Load asynchronousdata • Suspends rendering the closest <Suspense> component • 💡 Throw a promise to suspend! See this gist from Ryan Florence Resource Manager
- 26. A resource usingfetch() to load some data AJAX Resource
- 27. • Fetching asynchronousdata • Suspends rendering the closest <Suspense> component if not ready 👉 Use an <ErrorBoundary> to handle errors Fetching the resource
- 28.
- 29. • Suspend renderingwhen 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 forReact? Scottish Summit Template
- 31.
- 32. • Changes howReact 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 isrendering components User clicks
- 34. When React iscompletely done rendering The event executes
- 35. React rendering ischunked into slices Concurrent mode
- 36. When a sliceis done • It can invalidate the render so far and restart it • Render functions will be called multiple times The event executes
- 37.
- 38. Transition between applicationstates in a more controlled manner useTransition()
- 39.
- 40. • Control howmultiple <Suspense> boundaries are rendered • For example: Prevents multiple loading indicators at the same time <SuspenseList />
- 41. • They onlyrun 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 onlyrun 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’tserver side rendering Server components send a special serialization format • SSR would return HTML to the client Server Side Rendering?
- 44.