Ho una lista con qualche migliaio di prodotti e quando scorro l'app inizia a lagare parecchio. Ho provato la virtualizzazione normale, ma non aiuta granché. Magari c'è qualche approccio moderno che mi sto perdendo?
Ma hai davvero profilato l'app, o stai solo indovinando? Perché se la virtualizzazione non aiuta, probabilmente i lag vengono dal fatto che stai re-renderizzando l'intera lista ogni volta che cambia lo stato - anche se visualmente hai solo 20 elementi, React potrebbe ricalcolare i dati per tutti e 5000. Prova a wrappare i componenti delle righe con `React.memo` e assicurati di non creare nuove funzioni handler a ogni render (usa `useCallback`).
Prima cosa - dimenticati della virtualizzazione ordinaria se non aiuta, significa che il problema probabilmente non è nel render, ma nel fatto che stai caricando troppi dati subito o li ricalcoli a ogni scroll. Controlla se usi correttamente `memo`, `useMemo` e `useCallback` - spesso capita che i componenti si ricalcolino per niente. È utile anche profilare l'applicazione tramite React DevTools Profiler, per vedere esattamente dove c'è il collo di bottiglia: potrebbe essere nel render della lista stessa, oppure nel fatto che a ogni scorrimento fai richieste al server o ricalcoli logica complessa.
Se stai già usando la virtualizzazione, prova ad aumentare la dimensione della finestra di rendering (overscan) oppure passa alla paginazione al posto dello scroll infinito - a volte è semplicemente più semplice e veloce.
Bene la memoizzazione dei selettori e delle funzioni di callback - spesso i lag non vengono dal render stesso, ma dal fatto che ad ogni scroll si ricalcolano i filtri, l'ordinamento o si creano nuove funzioni per gli handler! Prova a wrappare i selettori in `useSelector` con il confronto giusto oppure usa `useMemo` per i calcoli - questo può dare un miglioramento di performance molto più grande rispetto alla semplice virtualizzazione.
Controlla quanti data-attribute e classi assegni a ogni elemento della lista. Spesso i lag non vengono dal numero di nodi DOM, ma dal fatto che il browser ricalcola costantemente stili e layout a causa dei cambiamenti di classe durante lo scroll. Se aggiungi classi dinamicamente per l'elemento attivo o l'hover, potrebbe diventare un collo di bottiglia. Prova a spostare tutto in CSS usando `nth-child` o un livello separato con `position: fixed`, così il browser non tocca la lista principale.
Secondo punto - assicurati di non creare nuovi oggetti nei props a ogni render. Ad esempio, se passi `style={{ color: item.color }}` invece di un valore precalcolato, React vedrà oggetti diversi e ricalcolerà il componente. Anche con la memoizzazione potrebbe rallentare. Meglio preparare gli stili in anticipo o usare le variabili CSS.
E ancora: se la lista ha migliaia di elementi, anche la virtualizzazione può essere lenta se crei troppi nodi DOM nella finestra visibile contemporaneamente. Prova a ridurre il numero di righe renderizzate per volta - mostra solo la parte visibile più un piccolo buffer sopra e sotto. Nella maggior parte delle librerie di virtualizzazione si configura con un parametro come `overscanRowCount`.
In realtà, la virtualizzazione di solito funziona benissimo, se davvero aiuta con il rendering - significa che i lag vengono da qualche altra parte. Un problema frequente che molti si perdono: potresti avere un'issue con lo scroll infinito e il caricamento dei dati. Se ad ogni scroll fai una richiesta di una nuova porzione di prodotti dal backend e non cachi i risultati, il browser non lagga dai nodi del DOM, ma dai ritardi di rete e dal parsing del JSON.
La seconda cosa da controllare è se hai configurato correttamente le dimensioni della virtualizzazione stessa. Spesso la gente imposta un'altezza dell'elemento troppo piccola nel config, e la libreria come react-window inizia a ricalcolare gli elementi visibili praticamente ad ogni pixel di scroll. Prova ad aumentare il buffer e specifica esplicitamente l'altezza della riga, invece di affidarti al calcolo automatico.
Accediper rispondere.
