Impariamo a gestire lo stato di un’applicazione in React prima di impazzire 😱
Facciamo un punto su come sia possibile gestire lo stato della propria applicazione React, quali sono le problematiche frequenti e quali possono essere gli strumenti e le soluzioni che possiamo attuare.
🤯 La parte difficile
La gestione dello stato è probabilmente la parte più difficile di qualsiasi applicazione.
È per questo che ci sono così tante librerie di gestione dello stato disponibili e altre in arrivo ogni giorno (e anche alcune costruite sopra altre… ci sono centinaia di astrazioni “Redux, ma più facile” su npm).
La gestione dello stato è un problema difficile ma, nonostante questo, credo che una delle cose che la rende così complicata è rappresentato dalla tendenza a sovradimensionare la nostra soluzione al problema.
Per poter evitare di ingegnerizzare eccessivamente la nostra applicazione basta guardare il problema alla base: cioè comprendere quali sono gli stati che gestiamo e le reali esigenze del nostro applicativo.
🔬Capiamo i vari stati applicativi
Prima di sparare affermazioni come:
“Usa [inserisci un qualsiasi state manager qui]!”
oppure
Prefersico utilizzare i context o fare un po’ di prop drilling invece che sovraccaricare la mia super app!
Ti consiglio di rallentare per due secondi e fermarti a riflettere.
La nostra applicazione React può dover gestire diversi tipi di stato, però, per generalizzare, li possiamo racchiudere in due gruppi ben definiti:
- Server Cache State
Indica tutto ciò che recuperiamo da un server e memorizziamo nel client per un accesso rapido (es. i dati dell’utente che ha effettuato l’accesso). - UI State
Questa tipologia di stato può essere accessibile a livello globale o relativo ad un singolo componente ma in generale è utile solo all'interfaccia utente per controllare le parti interattive della nostra app (es. avete mai usato lo stato isOpen per controllare l’apertura/chiusura di una modale?).
I problemi nascono quando facciamo confusione e iniziamo a mischiare questi due concetti!
il Server Cache State infatti presenta problemi intrinsecamente diversi dallo UI State e pertanto deve essere gestito in modo diverso.
Se non facciamo questa differenziazione, rischiamo di mischiare codice applicativo e di non venirne più a capo. Ogni piccola modifica ci costerà molto lavoro extra e tanto stress (bye bye sanità mentale).
Partiamo quindi dall’analizzare lo stato più infido e complesso da gestire: il Server Cache State
Server Cache State
Come affermato precedentemente, il Server Cache State indica tutto ciò che recuperiamo da un server e memorizziamo nel client per un accesso rapido.
Non deve essere gestito come un normale stato della nostra app, anzi, se accetti il fatto che ciò che hai in realtà non è affatto uno “stato” ma è invece una “cache di stato”, allora puoi iniziare a gestirlo correttamente.
Facciamo l’esempio del recupero dei dati di un utente:
- Abbiamo bisogno di recuperare dal server i dati di un utente
- Creiamo una funzione che interroghi il server e recuperi il dato
- Il dato recuperato deve essere disponibile a diversi componenti e deve essere sempre aggiornato.
Questo scenario ci mette di fronte a varie criticità:
- Come gestisco l’accesso al dato da diversi componenti?
- Come posso validare la correttezza del dato?
- Come capisco se il dato che ho in cache è obsoleto e quindi bisogna aggiornarlo richiamando il server?
Ricorda: Uno state-manager generalmente non è pensato per gestire dati asincronici, quindi sfruttarlo per gestire questa tipologia di casistiche potrebbe rivelarsi arduo e controproducente.
Strumenti utili per gestire il Server Cache State
Esistono già degli strumenti pronti ad aiutarti con il Server Cache State:
Io preferisco SWR, ma questa è una scelta personale.
UI State
L’UI State rappresenta tutti gli elementi utili all’interfaccia utente per controllare le parti interattive della nostra app.
Quando crei un’applicazione React, stai assemblando un gruppo di componenti per creare un albero che inizia con la tua <App /> e termina con i tuoi <input />, <div /> e <button />.
Ogni componente ha il proprio stato e quindi la vera sfida è gestire in maniera intelligente l’albero degli state che si va pian piano a generare.
Ecco le criticità dell’UI State:
- Come gestisco l’accesso ad uno stato condiviso in diversi componenti?
- Come posso mutare in maniera sicura il dato?
- Come gestisco le performance?
Strumenti utili per gestire l’UI State
- Qualsiasi state manager ( Redux, Recoil, mobX, etc…)
- Usa i React Context
- Usa consapevolmente la prop drills
Anche l’utilizzo delle tecnologie elencate sopra è una scelta personale.
Conclusioni
Abbiamo solo grattato la superficie, ma approcciare con le giuste conoscenze un concetto complesso come la gestione dello stato può solo giovare.
Prima di fare una scelta tecnologica dobbiamo imparare quindi a differenziare i bisogni della nostra applicazione ed agire con consapevolezza.
Sicuramente tratterò qualche argomento solo accennato in questo articolo in maniera più approfondita, quindi se ti interessa, ci “vediamo” al prossimo post.
P.S.
Se ritieni che questo articolo ti sia stato di aiuto, lascia un “clap” 👏 e condividilo con altri 🚀
