React Context vs Zustand: quando usare l'uno o l'altro
Gli sviluppatori spesso commettono un errore con lo stato di React. Usano Context in modo errato e poi incolpano Context per i problemi di performance.
Il problema è solitamente un unico grande oggetto context. Quando un valore in quell'oggetto cambia, ogni componente che utilizza quel context viene renderizzato nuovamente. Anche se un componente ha bisogno solo di una piccola parte di dati, reagisce comunque a ogni modifica dell'oggetto.
Se le tue notifiche si aggiornano ogni 30 secondi, la tua Navbar viene renderizzata nuovamente anche se alla Navbar interessa solo il nome dell'utente. Questo compromette le performance.
Puoi risolvere il problema senza una libreria. Dividi i tuoi context in base alla frequenza con cui cambiano.
Invece di un unico grande context, usane diversi: • UserContext per i dati dell'utente • UIContext per lo stato della sidebar • NotificationContext per gli avvisi
Ora, la tua Navbar viene renderizzata nuovamente solo quando cambiano i dati dell'utente. Questa semplice suddivisione risolve la maggior parte dei problemi di performance.
Usa React Context per valori stabili: • Temi • Stato di autenticazione • Impostazioni della lingua
Context funziona bene anche con i Server Components. Zustand funziona solo sul lato client.
Usa Zustand quando hai bisogno di sottoscrizioni selettive. Zustand consente ai componenti di iscriversi a specifiche slice dello stato. Se una parte del tuo store cambia, vengono renderizzati nuovamente solo i componenti che monitorano quella parte specifica.
Segui questa logica per il nuovo stato:
Usa React Context se: • I dati sono stabili (tema, autenticazione, lingua). • Hai bisogno che funzioni con SSR o Server Components. • Vuoi evitare il prop drilling dividendo i context.
Usa Zustand se: • I dati cambiano frequentemente. • I componenti devono monitorare specifiche slice dello stato. • La tua logica è complessa.
Aspetta. Non usare nessuno dei due per i dati delle API. Se stai recuperando dati da un server, usa TanStack Query. Context e Zustand non gestiscono il caching o il refetching in background.
Riassunto: • Un unico grande oggetto context causa re-render. Dividilo. • Usare Zustand per valori stabili è eccessivo. • Usare Context per cambiamenti frequenti causa rallentamenti. • Usare Zustand per lo stato del server è lo strumento sbagliato.