Concurrent mode

Coming soon to React

Hi 👋

I'm Mike

I'm a developer

at Thinkmill

We build things
in react

const Things = () => (
  <div>
	<Thing1 />
  	<Thing2 />
  </div>
);

and I'm a dad

Heidelberg Germany

Concurrent Mode

Some history first

October 2018

Announced at React Conf

released React.lazy, Suspense for Code Splitting

February 2019

released Hooks

about a month ago

Concurrent Mode released as "experimental"

think of it as ONE SPINNER that replaces multiple spinners everywhere

~ Jeremy

One spinner to rule them all!

Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.

~ React Docs

Blocking vs Interruptible Rendering

Interruptible Rendering

React can stop what it's doing to handle a new user interaction.

Intentional Loading Sequences

Maybe we don't need the spinner at all.

How do I get it

npm install react@experimental
            react-dom@experimental

import ReactDOM from 'react-dom';

const root = 
    document.getElementById('root');

ReactDOM.render(<App />, root);

ReactDOM
  .createRoot(root)
  .render(<App />);

demo time

See the code here

And that is it

I really hope that demo worked because I don't have any backup slides

~ Mike