# Virtual DOM and React

JupyterLab is based on [PhosphorJS](http://phosphorjs.github.io/), which
provides a flexible `Widget` class that handles the following:

* Resize events that propagate down the Widget heirarchy.
* Lifecycle events (`onBeforeDetach`, `onAfterAttach`, etc.).
* Both CSS-based and absolutely postioned layouts.

In situations where these feature are needed, we recommend using Phosphor's
`Widget` class directly.

The idea of virtual DOM rendering, which became popular in the
[React](https://facebook.github.io/react/) community, is a very elegant and
efficient way of rendering and updating DOM content in response to model/state
changes.

Phosphor's `Widget` class integrates well with ReactJS and we are now using
React in JupyterLab to render leaf content when the above capabilities are not
needed.

An example of using React with Phosphor can be found in the
[launcher](https://github.com/jupyterlab/jupyterlab/blob/master/packages/launcher/src/index.tsx)
of JupyterLab.