How to wrap React component with little performance penalty?

wrapping a React component adds one extra level of full React lifecycle (i.e. the wrapper needs to be mounted). Is it possible to avoid this?

You can avoid the lifecycles by avoiding JSX and calling the functions directly instead.
Eg.

{Component({ data: 1, children: 'Hello' })}

instead of

<Component data={1}>Hello</Component>

This blog post claimed to achieve 45% speed improvement with their test case.

This syntax might not be as readable/understandable though.

Some quote from Dan Abramov regarding this issue:

We're looking at optimizations like this in the context of Prepack but there's nothing that's going to be immediately useable in the next couple of months. Within a year or two we might have something.

Note that unless you're creating thousands of elements, the performance difference won't be noticeable. Also unless your components are very flat and simple, the "pure win" from this optimization will likely be much less relevant in practice.

I wouldn't wait for Prepack to do the optimisation though since the timeline is uncertain and the resulting optimisation might not be identical to this.

As for the significance of the performance improvement, it'd depend on your project and the only way to be certain is to try out and see the improvement for yourself.

If you want raw performance - do not wrap ListItem, but write your replacement instead

List item source doesn't have any extra dependencies, so Ctrl-C, Ctrl-V will work

Then adjust for your needs, remove code you don't need, etc...

That will guarantee max possible performance

The negative side - support cost will grow.