Code change:
}); <ins> var ShallowMixin = assign({}, ReactCompositeComponentMixin, { /** * Initializes the component, renders markup, and registers event listeners. * * @param {string} rootID DOM ID of the root node. * @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction * @param {number} mountDepth number of components in the owner hierarchy * @return {ReactElement} Shallow rendering of the component. * @final * @internal */ mountComponent: function(rootID, transaction, mountDepth) { ReactComponent.Mixin.mountComponent.call( this, rootID, transaction, mountDepth ); var inst = this._instance; // Store a reference from the instance back to the internal representation ReactInstanceMap.set(inst, this); this._compositeLifeCycleState = CompositeLifeCycle.MOUNTING; // No context for shallow-mounted components. inst.props = this._processProps(this._currentElement.props); var initialState = inst.getInitialState ? inst.getInitialState() : null; if (__DEV__) { // We allow auto-mocks to proceed as if they're returning null. if (typeof initialState === 'undefined' && inst.getInitialState._isMockFunction) { // This is probably bad practice. Consider warning here and // deprecating this convenience. initialState = null; } } invariant( typeof initialState === 'object' && !Array.isArray(initialState), '%s.getInitialState(): must return an object or null', inst.constructor.displayName || 'ReactCompositeComponent' ); inst.state = initialState; this._pendingState = null; this._pendingForceUpdate = false; if (inst.componentWillMount) { inst.componentWillMount(); // When mounting, calls to `setState` by `componentWillMount` will set // `this._pendingState` without triggering a re-render. if (this._pendingState) { inst.state = this._pendingState; this._pendingState = null; } } // No recursive call to instantiateReactComponent for shallow rendering. this._renderedComponent = this._renderValidatedComponentWithoutOwnerOrContext(); // Done with mounting, `setState` will now trigger UI changes. this._compositeLifeCycleState = null; // No call to this._renderedComponent.mountComponent for shallow // rendering. if (inst.componentDidMount) { transaction.getReactMountReady().enqueue(inst.componentDidMount, inst); } return this._renderedComponent; }, /** * Call the component's `render` method and update the DOM accordingly. * * @param {ReactReconcileTransaction} transaction * @internal */ _updateRenderedComponent: function(transaction) { var prevComponentInstance = this._renderedComponent; var prevRenderedElement = prevComponentInstance._currentElement; // Use the without-owner-or-context variant of _rVC below: var nextRenderedElement = this._renderValidatedComponentWithoutOwnerOrContext(); if (shouldUpdateReactComponent(prevRenderedElement, nextRenderedElement)) { prevComponentInstance.receiveComponent( nextRenderedElement, transaction ); } else { // These two IDs are actually the same! But nothing should rely on that. var thisID = this._rootNodeID; var prevComponentID = prevComponentInstance._rootNodeID; // Don't unmount previous instance since it was never mounted, due to // shallow render. //prevComponentInstance.unmountComponent(); this._renderedComponent = nextRenderedElement; // ^ no instantiateReactComponent // // no recursive mountComponent return nextRenderedElement; } } }); </ins> var ReactCompositeComponent = { LifeCycle: CompositeLifeCycle, <del> Mixin: ReactCompositeComponentMixin </del> <ins> Mixin: ReactCompositeComponentMixin, ShallowMixin: ShallowMixin </ins> };

Related discussion:
text: We need a way to test the output of a single level React component without resolving it all the way down to the bottom layer (whatever that is). I'm thinking something like this: Basically, this fix needs to go through the entire life-cycle of ReactCompositeComponent. It just needs to bail out whenever it would've continued rendering.
Reopened so that we can track the remaining features (refs etc.)
Weird, I thought GitHub only closed issues if you used language like "fixes #NNNN", not if you simply mentioned the issue at all. Sorry about that.
The PR text included "WIP to "
Is the rest (refs support) blocked by or can more work be done now?
Any reason this doesn't support other than that it's not implemented yet? I was hoping to do something like
that's supposed to work. Can you post a minimal repro?
How do you do this?  does not return an instance.
It works if I use so I think could just return that from . (I also have to shim because React expects it to be defined for some reason.)
Finding this quite useful. But it has been a bit inconvenient to have among the children when an element is conditionally rendered.
The idea was to make the helpers ignore null which could help with that. Perhaps we could have return an iterable which traverses nested arrays and ignores null.
Really? Allowing nulls was a change intentionally introduced a long time ago. In I have an implementation of toArray.
Allowing empty children (null, undefined, boolean) was a controversial topic, where we eventually landed on null/boolean/undefined being passed through. That way you could explicitly treat an empty slot as something special. This landed very early on before we really started seeing pattern developing. However, IMO, we've seen that this leads to inconsistent implementations where null slots will break and is not possible to use. It is unclear whether a set of children allows nullable slots, and if they do, it is unclear what that means. For example, in a grid layout component, does an empty slot mean that there should be an empty column in the grid, or that it should be skipped? Therefore, a lot of our components end up with explicit null checks. Meaning boilerplate, and inconsistent behavior when they're forgotten.