[Copilot]

Preview called evalModule(code, availableImports) directly in the render body. evalModule runs Babel transform + new Function(...) on every call, so DefaultExport was a fresh function reference on every render. React keys component instances by type identity, causing an unmount/remount — and full state reset — on any re-render that didn't originate from a code edit (e.g. args/controls change, globals update via a decorator).

Changes

• src/Preview.tsx — wrap evalModule in React.useMemo([code]). availableImports is intentionally excluded from deps: callers spread a fresh object on every render ({ react: React, ...state.availableImports }), so including it would bust the memo every render. Error handling is moved inside the memo, returning an error-rendering component function so it's compatible with the memoization path.

// Before: new function type every render → remount → state reset
DefaultExport = code ? evalModule(code, availableImports).default : undefined;

// After: stable reference, only recompiles when code changes
const DefaultExport = React.useMemo<React.ComponentType<any>>(() => {
  try {
    const exp = code ? evalModule(code, availableImports).default : undefined;
    // ...validate...
    return exp;
  } catch (error) {
    return () => <pre style={errorStyle}>{String(error)}</pre>;
  }
}, [code]); // intentionally omits availableImports — see block comment

Side effect: Babel transform no longer runs on every render, only on actual code changes.

• src/index.test.tsx — two new tests:
  • state is preserved when componentProps change but code is unchanged
  • state is reset when code changes (correct remount behavior validated)