How does library technically work with React?

[HamedFathi]

My question is just about the technical part of your great work. I know @preact/signals-react
uses React internal APIs to handle reactivity but has a lot of challenges.

Please explain the approach you are using for React integration. Are you using internal APIs too?

[jmeistrich]

We're not using internal APIs. React usage is through either the useSelector hook or the observer HOC (docs). All of the other React features like reactive props and fine-grained reactivity components all boil down to useSelector at their base.

There's an optional feature to render observables directly which makes observables return the right properties to appear to React as renderable elements, which is not officially supported but should be far less fragile than mucking about in internals. But it's optional so you can just not enable that.

[HamedFathi]

This render-an-observable-directly has a special performance impact? I mean the optimized benchmark was about this feature or the more safe approach (useSelector or observer)?

When should I use render-an-observable-directly? use cases?

[jmeistrich]

The only difference in the optimized benchmark is that it uses the optimized prop on the For component. We have it as a separate benchmark because the benchmark considers it "non-keyed" behavior.

Rendering observables directly can improve performance because when the value changes it doesn't need to re-render the full component. But in most real-world usage it may not be significantly different for you. And many users are finding it confusing so we're thinking about changing it.