React Js – Sfruttare l'URL al posto dello useState

In principio i siti web utilizzavano gli URL principalmente per navigare tra pagine statiche ed indicare la posizione di una pagina all'interno del sito. Tuttavia con l’aumentare della complessità delle applicazioni web, è diventato sempre più comune incorporare lo stato nell'URL. 

Questo approccio porta con sé i suoi vantaggi, specialmente per quanto riguarda la UX, tra cui:

• possibilità di condividere il link con qualcuno e ottenere la stessa UI
• per lo stesso motivo, si può salvare il link tra i preferiti e riottenere la stessa UI
• utilizzare i bottoni per navigare alla precedente/successiva UI
• manipolare manualmente l'URL (maggiore UX)
• URL con state data ben strutturati possono migliorare molto il search engine ranking
• (più tecnico) il componente può rimanere un server-side component

D'altra parte, però, può comportare anche diverse complicazioni:

• Aggiungere troppe informazioni all'interno dell'URL può renderlo lungo, complicato e meno user-friendly
• Gestione dello storico inaspettata quando l'URL cambia frequentemente
• Problemi di compatibilità dei browser, con limitazioni di lunghezze etc
• Allo stesso tempo, una scorretta gestione dell'URL può portare a problemi di duplicate content che hanno impatto negativo in termini di SEO
• Manutenzione: coerenza tra stato dell'applicazione e URL più difficile da sviluppare e mantenere

Real use example e-commerce:

Prendiamo come esempio una semplice pagina online per la vendita di t-shirt che hanno colore e taglia:

Beginner – History API & useState()

Sfruttiamo la History API del browser → nello useEffect con i valori come dipendenze e il metodo pushState. Conseguentemente sull'onClick dei bottoni utilizziamo la funzione di setState per aggiornare i valori.

In questo modo, però, stiamo solo pushando la query string nell'URL. Non è possibile navigare avanti e indietro nella history e per farlo dobbiamo leggere l'URL attraverso il metodo window.location.search. Inoltre, il problema di questa soluzione è che ci stiamo basando su due sorgenti da sincronizzare.

Intermediate - useSearchParams()

Un metodo migliore è quello di utilizzare l'hook useSearchParams che ci dispone dei metodi get e set per leggere e modificare l'URL.

sull'onClick prendiamo il valore come parametro e lo settiamo alla query da modificare.

Advanced – state persist & validation

Se però l'utente volesse navigare all'interno del sito per poi tornare su questa pagina, si aspetterebbe le ultime modifiche fatte. Per fare questo, sfruttiamo il localStorage come state persist.

Scarichiamo la libreria zod (N.B: npm install zod), e creiamo un file schema.ts per stabilire le regole e il tipo degli input.

Inizializziamo i valori prendendoli dal localStorage del browser, o in alternativa settiamo dei valori default.

Successivamente, controlliamo se sono presenti nell'URL (sono opzionali), allora tramite lo schema definito precedentemente controlliamo la loro validità in un blocco try – catch, e se non sono validi inseriamo un errore in console (è possibile personalizzare l'errore mostrandolo all'utente, ma in questo caso lasciamo le cose più semplici), e settiamo un valore di fallback.

Infine, usiamo due useEffect che settano nel localStorage i nuovi valori di colore e taglia ogni volta che vengono modificati (lo stesso facciamo ogni qualvolta i valori cambiano attraverso il click del bottone).

In generale, la scelta del metodo di gestione dello stato da utilizzare dipende dalle esigenze specifiche del progetto, dalla sua complessità o dalle preferenze del team di sviluppo.

L'esempio completo