Previewed components get re-rendered/replaced when parent is re-rendered

[nayaabkhan]

Problem

The previewed components get replaced entirely when a parent component is caused to re-render (e.g., by state change).

Expected

The previewed components are not entirely replaced but passed through the usual reconciliation, and only updated parts of the DOM should change.

Reproduction

Repo: https://github.com/nayaabkhan/react-live-rerender Sandbox: https://codesandbox.io/p/github/nayaabkhan/react-live-rerender/react-live-rerender

Reproduction Details

The Reproduction consists of the following:

• an input text field with a getter and setter (passed as scope).
• the setter causes the component that owns the hook to re-render.
• when you try to type in the field, the whole field is replaced by new DOM; hence it loses focus.
• a working example using a library called react-jsx-parser to preview the JSX code. It works as expected.

Why...

Why not just use hooks in the JSX code string itself

We're trying to use react-live on our design system documentation and want to keep examples relatively simple. So we have created a few state helpers like readState('xyz') and writeState('xyz', newValue) for people who don't code a lot (like designers).