Using React v16 to create self-destructing components

react-aux is one of those tiny things that make development helluva simpler

React v16 Beta 1 made it possible to return multiple elements without a wrapping element, i.e. now you can do:

const Aux = (props) => {
return props.children;
};
const Root = () => {
return <Aux>
<p>Hello, World!</p>
<p>I am a demo for react-aux.</p>
</Aux>;
};
Asking React components to self-destruct.

Before React v16, the above would have resulted in an error:

Uncaught Error: Invariant Violation: Product.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

The only workaround was to use a wrapping element, e.g.

const Aux = (props) => {
return <div>{props.children}</div>;
};
const Root = () => {
return <Aux>
<p>Hello, World!</p>
<p>I am a demo for react-aux.</p>
</Aux>;
};

The problem is that you cannot always use a wrapping element, e.g. flexible boxes, grid, head, tables, etc. In React v15, you were able to workaround the limitation using arrays with keyed items, e.g.

const Root = () => {
const moreFooElements = [
<tr key='foo-0'>
<td>foo</td>
</tr>,
<tr key='foo-1'>
<td>foo</td>
</tr>
];
return <table>
<tr>
<td>foo</td>
</tr>
{moreFooElements}
</table>;
};

That array syntax is alien to the rest of the JSX codebase and it is error prone (it is easy to accidentally construct an array with multiple items having the same key).

In React v16, you can simply wrap multiple components in a self-destructing component.

const Aux = (props) => {
return props.children;
};
const Root = () => {
const moreFooElements = <Aux>
<tr>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
</tr>
</Aux>;
return <table>
<tr>
<td>foo</td>
</tr>
{moreFooElements}
</table>;
};
Making the self-destruction process efficient.

react-aux

Aux component can be implemented in a single line of code. Therefore, one would say that creating a package for such function is redundant. However, props => props.children on its own does not explain the intent. react-aux as an abstraction serves the purpose of enabling a self-documenting code, i.e. the next time you see someone doing:

import Aux from 'react-aux';

const Root = () => {
return <Aux>
<p>Hello, World!</p>
<p>I am a demo for react-aux.</p>
</Aux>;
};

You will know exactly what is the intent of the code. Those who see the code fragment the first time will be able to refer to react-aux documentation to learn more about the intent.