# 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](https://github.com/preactjs/preact-custom-element/blob/master/src/index.js#L1).

## 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.