Tweet
Tweet

Slide 1

Slide 1 text

It’s time for React 18 upgrade

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

React v16.x Long time ago

Slide 4

Slide 4 text

A lot of new things ● JSX ● Context ● Hooks ● Suspense ● Code splitting ● …

Slide 5

Slide 5 text

React v17.x Oct 2020

Slide 6

Slide 6 text

No New Features Primarily focused on making it easier to upgrade React itself Easier to embed React into apps built with other technologies

Slide 7

Slide 7 text

Gradual Upgrades When React 18 and the next future versions come out ● upgrade your whole app at once ● upgrade your app piece by piece

Slide 8

Slide 8 text

For most apps, upgrading all at once is still the best solution

Slide 9

Slide 9 text

Changes to Event Delegation Changes that are potentially breaking React will no longer attach event handlers at the document level under the hood

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

React v18.x March 2022

Slide 14

Slide 14 text

Updates to Client Rendering APIs

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Callback is removed from render, since it usually does not have the expected result when using Suspense

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Updates to TypeScript definitions The most notable change is that the children prop now needs to be listed explicitly when defining props, for example

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Automatic Batching Starting with performance, we’ve got huge improvements to automatic batching.

Slide 22

Slide 22 text

Before React 18, React already batched (aka grouped) multiple state updates into one to reduce unnecessary re-renders.

Slide 23

Slide 23 text

Automatic Batching it happened only in DOM event handlers, so Promises, timeouts, or other handlers didn’t take advantage of that.

Slide 24

Slide 24 text

With v18, React will batch state updates no matter where they happen

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

To opt-out of automatic batching, you can use flushSync

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Strict Mode Changes Some additions to the Strict Mode including new behavior called “strict effects”. This double-invokes effects — specifically mount and unmount ones.

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

● 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.

Slide 32

Slide 32 text

The additional checks are here to test against multiple mount/unmount cycles.

Slide 33

Slide 33 text

Concurrent Rendering Without a doubt, the biggest update for React 18 comes with the “concurrent mode”, or as it’s now called — “concurrent rendering”.

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

New APIs ● startTransition ● SuspenseList ● Suspense Improvements

Slide 36

Slide 36 text

Q & A As everything good in life, knowledge is great only when shared https://discord.gg/94uhCAkFKf

Slide 37

Slide 37 text

As everything good in life, knowledge is great only when shared hypetech.io/education

Slide 38

Slide 38 text

[email protected]