Compatibility with Preact

[connor-baer]

Suggested technology

Preact is a fast 3kB alternative to React with the same modern API.

In applications where performance is critical (e.g. the marketing website), switching from React to Preact can decrease the overall bundle size significantly.

We need to investigate whether Circuit UI is compatible with Preact and what we would need to do to support it out of the box. This could be achieved through code changes or documenting the steps that users need to take to make them work together.

Note: Emotion stopped supporting Preact officially but it might be compatible anyway (https://github.com/sumup-oss/circuit-ui/issues/658#issuecomment-739803472).

Alternatives

Preact is in itself an alternative to React, our current UI framework. I'm not aware of other React-compatible, performance-focused libraries.

Potential downsides

Officially supporting Preact might add significant amounts of work to maintain compatibility in the future.

[felixjung]

This is an important topic. Preact might be what we end up using for the Single Sign On page, eventually. I think Preact X came out after Emotion dropped support. In the upgrade docs for Preact X, they describe how Preact X is fully compatible with the latest version of styled components. Could be that the same is true for emotion, provided a matching tsc or babel config.

Maybe @ForsakenHarmony can share some insights here.

[ForsakenHarmony]

Yes, when aliasing react to preact X I don't think there are currently any known compatibility issues with emotion

Most compatibility issues are considered bugs, but some special things react does, i.e. https://github.com/preactjs/preact/issues/2852 are ruled out

There are also no plans for concurrent mode right now, but most app don't need it (and the ones that do might be better off doing the performance critical parts outside of react)

[felixjung]

When working with forms, I ran into an issue with the defaultValue prop React supports. This prop is primarily used to populate the initial value on uncontrolled inputs.

The expected behavior for the defaultValue prop is that

• the initial value of a form element should match the value of defaultValue,
• changing it won't trigger a re-render,
• it shouldn't cause the value prop to get set.

Working with preact-compat it seems that the implementation there doesn't meet the above expected behavior. preact-compat sets an elements value prop to the value of defaultValue. Changing defaultValue then also updates the component. In that sense defaultValue behaves like value.

I found an open PR dealing with some parts of the problem.

My conclusion is that, currently, you cannot create an uncrontrolled input with a defaultValue when using preact-compat. This is fine for our use case in identity, a select component, but might cause issues with inputs where you then have to start managing the state with debouncing etc.

[ForsakenHarmony]

@felixjung preact-compat or preact/compat?

preact-compat is for preact < 10

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Add a comment explaining why the issue is still relevant to prevent it from being closed.

[connor-baer]

Apart from the general compatibility issues between React and Preact that @felixjung mentioned above (which might have been fixed by now), there doesn't seem to be anything further we can do inside Circuit UI.

We have plans to replace Emotion.js with a build-time styling solution which should ensure future compatibility.