u/More_Application_591

Hi everyone,

As a korean junior developer, I'm sharing v0.1.0 of responsive-keepalive and would genuinely appreciate any feedback before I commit to the 1.0 API. It's still early, so honest criticism is more than welcome.

The problem I was trying to solve

Most responsive libraries just toggle CSS. But sometimes mobile and desktop layouts are structurally different — different component hierarchy, different data fetching — and the usual pattern ends up being:

{isMobile ? <MobileNav /> : <DesktopNav />}

The issue is that every breakpoint switch unmounts and remounts, which blows away local state and scroll position.

What it does

It wraps React 19.2's <Activity> to keep both trees mounted but one hidden, so state survives across switches.

const { Desktop, Mobile } = createResponsive({
  breakpoints: { mobile: 0, desktop: 768 }
});

function App() {
  return (
    <>
      <Mobile><MobileNav /></Mobile>      {/* mounted, state preserved */}
      <Desktop><DesktopSidebar /></Desktop>
    </>
  );
}

It also tries to handle: anti-thrash debounce, IME-safe switching (CJK keyboards), SSR, and falls back to a clean swap on React < 19.2 — though I'm sure there are edge cases I haven't thought of yet.

If you have a moment, I'd really appreciate thoughts on

1. Does the createResponsive API feel natural, or is there anything that seems off?
2. Are there use cases where you'd reach for something like this but it would fall short?
3. Is there anything that would make you hesitant to use it in a real project?

Any feedback at all — even "this isn't something I'd ever use, because..." — would be incredibly helpful.

Architecture Docs: responsive-keepalive · Architecture & API Pipelines
GitHub: https://github.com/vi-wolhwa/responsive-keepalive
npm: https://www.npmjs.com/package/@audemodo/responsive-keepalive

Thank you for taking the time to read this!