Funcția React.lazy permite amânarea încărcării codului unei componente până în momentul în care aceasta este efectiv randată pe ecran pentru prima dată. Această tehnică, cunoscută sub numele de Code Splitting, reduce semnificativ dimensiunea pachetului inițial de JavaScript (initial bundle size), accelerând viteza de pornire a aplicației web.
Încărcarea leneșă a unui modul masiv de grafice statistice
import React, { lazy, Suspense, useState } from 'react';
// Modulul 'GraficAvansat' este descărcat de browser doar la nevoie:
const GraficAvansat = lazy(() => import('./componente/GraficAvansat'));
export function RaportVanzari() {
const [arataGrafic, setArataGrafic] = useState(false);
return (
<div className="panou">
<h2>Sumar Financiar Lunar</h2>
<button onClick={() => setArataGrafic(true)}>Generează Grafic Analitic</button>
{arataGrafic && (
<Suspense fallback={<div className="spinner">Se descarcă datele graficului...</div>}>
<GraficAvansat an={2026} />
</Suspense>
)}
</div>
);
}
Întrebări & Exemple de Cod:
Funcția React.lazy: Divizarea Codului și Încărcarea Dinamică a ComponentelorAi o nelămurire despre utilizarea comenzii
Funcția React.lazy: Divizarea Codului și Încărcarea Dinamică a Componentelorsau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.