Permalink
Switch branches/tags
Nothing to show
Find file Copy path
2675ed0 Oct 26, 2018
1 contributor

Users who have contributed to this file

69 lines (46 sloc) 1.73 KB
name menu
Roots
APIs

Roots

These are concurrent-ready attachment points for React onto the DOM.

ReactDOM.createRoot and Root.render

@canary API: ReactDOM.unstable_createRoot @next API: ReactDOM.createRoot

Instead of ReactDOM.render, ReactDOM.createRoot automatically opts into <ConcurrentMode>. It also doesn't assume the first render is synchronous (aka you can suspend even on the first render, which useful for prerendering via root.createBatch()).

Roots expose a number of methods, the main of which is Root.render:

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);

⚠️ Everything below here is EVEN MORE UNSTABLE/UNTESTED THAN IN THE REST OF THIS PAGE SO IT IS PRETTY DAMN UNRELIABLE YOU HAVE BEEN WARNED ⚠️

Root.prerender

Current API: Root.prerender()

Does render phase work but does not commit yet.

const root = ReactDOM.createRoot(containerEl);
const work = root.prerender(<App />);
// ... other async work ...
work.commit();

ReactDOM.createLazyRoot

@canary API: ReactDOM.unstable_createLazyRoot @next API: ReactDOM.createLazyRoot

Start rendering even without a container:

let containerEl;
const root = ReactDOM.unstable_createLazyRoot(function getContainer() {
  return containerEl;
});
const work = root.prerender(<App />);

// no container until now!
containerEl = await promiseForContainer;
work.commit();

Next: Misc APIs


Recommended Sources for further info: