Componenta Activity (Offscreen) în React 19: menținerea stării în fundal în React & Next.js

Componenta experimentală `` (denumită anterior Offscreen API) permite randarea și menținerea în memorie a componentelor inactive fără a le afișa pe ecran. Când o filă sau un panou devine ascuns (`mode=’hidden’`), React conservă starea internă, poziția de derulare și conexiunile deschise, reducând consumul de CPU.

Randare Ascunsă cu Conservare de Stare

Oferă o experiență instantanee la revenirea pe ecrane vizitate anterior, eliminând timpul de re-randare și re-inițializare a componentelor.

// Utilizare <Activity> în React 19:
import { Activity } from 'react';

function TabContainer({ activeTab, children }) {
  return (
    <div className="tabs-content">
      <Activity mode={activeTab === 'profil' ? 'visible' : 'hidden'}>
        <ProfileEditor />
      </Activity>
      <Activity mode={activeTab === 'setari' ? 'visible' : 'hidden'}>
        <SecuritySettings />
      </Activity>
    </div>
  );
}

Utilizarea acestei funcționalități în aplicațiile React și Next.js sporește performanța de randare și optimizează experiența utilizatorului final conform celor mai recente bune practici din 2026.