Concurrent mode Prabashwara Seneviratne (bash) Before we start - PowerPoint PPT Presentation

Building responsive web apps with Concurrent mode Prabashwara Seneviratne (bash)

Before we start Disclaimers

In a nutshell What is it? For react, this the ability to work on multiple state updates at the same time

Incremental Adoption Legacy Mode Concurrent Mode ReactDOM.render(<App />, rootNode) ReactDOM.createRoot(rootNode).render(<App />) Blocking Mode ReactDOM.createRoot(rootNode).render(<App />)

Introducing PackagePile A JS framework aggregator to keep track of all the JS frameworks created everyday

Problem #1 The waterfall

Problem #1 In code Then the cards will render and start fetching their data Detail page fetches its data first

Problem #1 In action

Previously on React 16.6 Lazy & Suspense Split javascript code into multiple files so that only what is required by the client would be downloaded

Coming up: the all new, fully extended Suspense Components can use special loaders which will start running straightaway, regardless of the structure

The new suspense In action

The Ideal solution

Problem #2 The jump The app changes state instantly - which leads to an ugly loading spinner while next data loads

The new solution useTransition useTransition lets you show the current state while react works on the next one in the background

withTransition In action

Time for Bad news The “unsafe” lifecycle methods are really unsafe now ReactDOM.findDOMNode(component) Old context API, string refs and findDOMNode are dead

That’s it bash2/package-pile @MewsDevs https://developers.mews.com me@bash.lk