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

Concurrent mode

Building responsive web apps with Prabashwara Seneviratne (bash)

Disclaimers

Before we start

For react, this the ability to work on multiple state updates at the same time

What is it?

In a nutshell

Adoption

Incremental

Legacy Mode Concurrent Mode

ReactDOM.render(<App />, rootNode) ReactDOM.createRoot(rootNode).render(<App />) Blocking Mode

ReactDOM.createRoot(rootNode).render(<App />)

PackagePile

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

The waterfall

Problem #1

In code

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

In action

Problem #1

Lazy & Suspense

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

Suspense

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

In action

The new suspense

Ideal solution

The

The jump

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

useTransition

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

In action

withTransition

Bad news

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

That’s it

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