TechTalk - 2o22 - It’s time for React 18 upgrade

React has been around for quite some time. Each major release has introduced us to new techniques, tools, and ways of handling UI problems.
React released v18 in March 2022 and included a couple of architectural changes. This release mostly focused on shipping Concurrent Mode, new React hooks, and behavioral changes to React’s Strict Mode API. While strict mode has been a React feature for quite some time, v18 makes it more efficient in catching early bugs, thereby making the codebase more predictable.

In this talk, you’ll look at its various features, as well as how the v18 release has improved its API and provides even better compatibility with hooks.

Transcript

1. It’s time for React 18 upgrade
2. HypeTech Tech education and shaping ideas into hype products hypetech.io | reactweek.dev Marko Arsić Founder and CEO @ HypeTech Founder of HypeTech Education Senior Software Engineer @ adidas Lecturer @ ReactWeek.dev Independent Tech Consultant Helping companies set up teams and standardize the development process github.com/marsicdev
3. React v16.x Long time ago
4. A lot of new things • JSX • Context • Hooks • Suspense • Code splitting • …
5. React v17.x Oct 2020
6. No New Features Primarily focused on making it easier to upgrade React itself Easier to embed React into apps built with other technologies
7. Gradual Upgrades When React 18 and the next future versions come out • upgrade your whole app at once • upgrade your app piece by piece
8. For most apps, upgrading all at once is still the best solution
9. Changes to Event Delegation Changes that are potentially breaking React will no longer attach event handlers at the document level under the hood
11. New JSX Transform Completely opt-in, and you don’t have to use it The classic JSX transform will keep working, and there are no plans to stop supporting it
12. With the new transform, you can use JSX without importing React Depending on your setup, its compiled output may slightly improve the bundle size Upgrade will not change the JSX syntax and is not required
13. React v18.x March 2022
14. Updates to Client Rendering APIs
15. ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17.
17. Callback is removed from render, since it usually does not have the expected result when using Suspense
19. Updates to TypeScript definitions The most notable change is that the children prop now needs to be listed explicitly when defining props, for example
21. Automatic Batching Starting with performance, we’ve got huge improvements to automatic batching.
22. Before React 18, React already batched (aka grouped) multiple state updates into one to reduce unnecessary re-renders.
23. Automatic Batching it happened only in DOM event handlers, so Promises, timeouts, or other handlers didn’t take advantage of that.
24. With v18, React will batch state updates no matter where they happen
25. This means that updates inside of timeouts, promises, native event handlers or any other event will batch the same way as updates inside of React events
27. To opt-out of automatic batching, you can use flushSync
29. Strict Mode Changes Some additions to the Strict Mode including new behavior called “strict effects”. This double-invokes effects — specifically mount and unmount ones.
30. React v18 introduced new strict mode behavior regarding unmounting and remounting. Now, each element will be unmounted and remounted with the same state and effects as when the element was mounted for the first time.
31. • The element gets mounted for the first time • Side effects are created • Strict mode now mimics the destruction of effects • Side effects will be applied to the mounted components Starting with v18, strict mode has this additional development-only behavior.
32. The additional checks are here to test against multiple mount/unmount cycles.
33. Concurrent Rendering Without a doubt, the biggest update for React 18 comes with the “concurrent mode”, or as it’s now called — “concurrent rendering”.
34. Offscreen API Enable better performance by hiding components instead of unmounting them, keeping the state, and still calling the mount/unmount effects. That’ll play a crucial role in optimizing components like tabs, virtualized lists, etc.
35. New APIs • startTransition • SuspenseList • Suspense Improvements
36. Q & A As everything good in life, knowledge is great only when shared https://discord.gg/94uhCAkFKf
37. As everything good in life, knowledge is great only when shared hypetech.io/education
38. contact@reactweek.dev