React 20 RC — 새로운 상태 관리와 렌더링 개선

React 20 RC 핵심

• Activity API (Offscreen 후속)
• 향상된 Suspense 캐싱
• 컴파일러 최적화 2세대

Activity API

import { Activity } from "react";

function App() {
  const [tab, setTab] = useState("home");
  return (
    <>
      <TabBar active={tab} onChange={setTab} />
      <Activity mode={tab === "home" ? "visible" : "hidden"}>
        <HomePage />
      </Activity>
      <Activity mode={tab === "profile" ? "visible" : "hidden"}>
        <ProfilePage />
      </Activity>
    </>
  );
}

hidden 상태의 컴포넌트가 상태를 유지하면서 렌더링에서 제외됩니다.