Preact

Preact was investigated for its usefulness in helping Fluent UI React MS products improve performance and potentially increase interop with Web Component standards.

TL;DR

Fluent UI React MS products cannot efficiently use Preact without a complete and concerted replatforming.

Why?
Preact and React both define components using JSX which return objects called elements which make up their respective virtual DOMs. These virutal DOMs and their renderers are incompatible.

Preact Compat
This solution was precluded from this investigation due to runtime performance cost.

Preact in React

Preact and React both use JSX. JSX is converted to function calls at build time using the pragma of choice. React uses React.createElement where Preact uses h.

Here is how a build step would transpile a JSX call for both React and Preact pragmas, respectively.

<Button id={1}>Click</Button>

//=> React
React.createElement(Button, { id: 1 }, 'Click')

//=> Preact
h(Button, { id: 1 }, 'Click')

Because of this, when authoring a JSX application, the transpiler doesn't know which components should be transpiled to which pragma.

Further, the resulting element tree (result of executing the pragma calls) is different between Preact and React. React's render understands React's elements (objects) but not Preact's elements (objects), and vice versa.

Preact Web Components in React

Preact has a first class Web Component wrapper called preact-custom-element for authoring Web Components using Preact. This allows you to use Preact and JSX as your Web Component templating engine:

import register from 'preact-custom-element';

const Greeting = ({ name = 'World' }) => <p>Hello, {name}!</p>;

register(Greeting, 'x-greeting', ['name']);

<x-greeting />
//=> <p>Hello, World!</p>

<x-greeting name="Joe" />
//=> <p>Hello, Joe!</p>

Rendering this x-greeting Web Component in a React app does not work but throws errors. This is because internally preact-custom-element is creating a Preact Component, which returns a Preact element object for the Preact virtual DOM. Since Preact and React have incompatible element types and virtual DOM implementations, ReactDOM's render fails to parse the element returned by Preact's Web Component wrapper.

See Preact's Web Component implementation here.

React in Preact

As with the two previous examples, React's element type and virtual DOM type is not compatible with Preact's renderer. This test was not performed since it is known that the types are incompatible.