Why I am hooked on the future of React
•Download as PPTX, PDF•
0 likes•178 views
![Maurice De Beijer [MVP]](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1696317804)
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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Why I am hooked on the future of React
Similar to Why I am hooked on the future of React (20)
More from Maurice De Beijer [MVP]
More from Maurice De Beijer [MVP] (20)
Recently uploaded
Recently uploaded (20)
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?