We're switching Atom to React, but we want to support backward-compatible shims to our previous view framework.

In the old framework, views were represented as jQuery-wrapped DOM elements. Ideally, we'd like to provide backward-compatible shims by simply rendering the React component and wrapping its root element in a jQuery wrapper with an API that's compatible to our old editor views. That would essentially look like this:

``` javascript
var editorRoot = document.createElement('div')
React.renderComponentWithRootElement(Editor(props), editorRoot)

// the element would actually be wrapped in a custom subclass of jQuery,
// but this is clearer for this example
var editorShim = $(editorRoot) 
```

Currently, this isn't possible because React components need to be rendered into a container. So instead we need to create a wrapper element and render the component inside it. This is sad because it adds an extra layer of markup which confuses styling, and also means that the editor has a wrapper when used via the shim layer but no wrapper when embedded as a child via React itself.

Is there something fundamental preventing React from adopting DOM nodes directly without the parent? Is this something we could even hack in in a way that would be somewhat maintainable?

:heart:

_didScheduleRenderPhaseUpdate: boolean;
  _numberOfReRenders: number;
  _validateCurrentlyRenderingComponent() {
    invariant(
      this._currentlyRenderingComponent !== null,
      'Hooks can only be called inside the body of a function component.',
    );
  }
  _createDispatcher(): DispatcherType {
    const useReducer = <S, A>(
      reducer: (S, A) => S,
      initialState: S,
      initialAction: A | void | null,
    ): [S, Dispatch<A>] => {
      this._validateCurrentlyRenderingComponent();
      this._createWorkInProgressHook();
      const workInProgressHook: Hook = (this._workInProgressHook: any);
      if (this._isReRender) {
        
        
        const queue: UpdateQueue<A> = (workInProgressHook.queue: any);
        const dispatch: Dispatch<A> = (queue.dispatch: any);
        if (this._renderPhaseUpdates !== null) {
          
          const firstRenderPhaseUpdate = this._renderPhaseUpdates.get(queue);
          if (firstRenderPhaseUpdate !== undefined) {
            (this._renderPhaseUpdates: any).delete(queue);
            let newState = workInProgressHook.memoizedState;
            let update = firstRenderPhaseUpdate;
            do {