More Related Content
Similar to React Query - gestione efficiente dei dati nelle app React - Updated (Eduard Capanu).pdf
Similar to React Query - gestione efficiente dei dati nelle app React - Updated (Eduard Capanu).pdf (20)
More from EduardCapanu
More from EduardCapanu (7)
Recently uploaded
Recently uploaded (8)
React Query - gestione efficiente dei dati nelle app React - Updated (Eduard Capanu).pdf
- 1. @eduardcapanu React Query: gestione efficiente dei dati nelle app React
- 2. Eduard Andrei Capanu Microsoft 365 React JavaScript Frontend Developer & Trainer — React - TypeScript - JavaScript ๏ Computer science lover & sviluppatore software full-time ๏ Ho lavorato per 5 anni con tecnologie Microsoft ๏ Appassionato di JavaScript & React ๏ Condividere e apprendere il piu’ possibile
- 3. Di cosa parleremo in questo talk? Introduzione della libreria Client VS Server State React Query Examples Features utili Introduzione del software TanStack Non si tratta solo di Data Fetching
- 4. Introduzione del software TanStack - Non è un framework o una libreria - Si tratta di un set di tecnologie in grado di offrire soluzioni e feature per lo sviluppo con React, Next.JS e TypeScript - Con il tempo si sono espansi offrendo i stessi servizi anche per altre librerie / framework come Angular, Svelte, Rue ecc.
- 5. Introduzione della libreria - Cos’è React Query? “È una libreria per la gestione asincrona dello stato applicativo” - Spesso confuso con una libreria per il fetching dei dati - Se usi un framework con delle soluzioni di fetching e mutazioni già esistenti, forse non hai bisogno anche di React Query - A primo impatto potrebbe non sembrare allettante, ma vediamo meglio i vantaggi che ci porta Perchè introdurre un’altra libreria per fare delle fetch? Posso usare benissimo fetch + useEffect!
- 7. Introduzione della libreria - Perché dovresti averne bisogno? Abbiamo quasi 5 bug qui
- 8. Introduzione della libreria - Perché dovresti averne bisogno? - Persino la documentazione ufficiale di React consiglia di usare un’altra libreria o framework per il data fetching
- 9. Il primo -> Race Condition Lo stato cambia con ID -> 2 Viene effettuata una fetch per il Todo con ID -> 1, che ci mette troppo a rispondere Il problema è che alla fine la chiamata con ID2 risponde per prima e quella con ID1 per ultima. Quindi lo stato si aggiorna con il risultato della prima chiamata e non dell’ultima. Per cui mostriamo dati sbagliati 1 Bug
- 10. Il primo -> Race Condition (Soluzione) Viene eseguita quando il ‘todoId’ cambia Se ‘todoId’ cambia, la if della fetch precedente risulterà false e non andremo a settare i dati 1 Bug
- 11. I secondo -> Il Loading 2 Bug Se vogliamo gestire il loading sulla nostra chiamata dobbiamo creare un nuovo state Implementarlo per gestire il loading ad ogni chiamata E pulirlo ogni volta che la fetch finisce
- 12. I terzo -> Lo stato vuoto 3 Bug Se vogliamo avere evidenza della differenza tra ‘non ho ancora dati’ e ‘non ho mai avuto dati’, dobbiamo andare a settare lo state di React ad undefined. Cosi, nel caso la risposta ci torni un obj / array vuoto, sapremo che è stata la risposta a non tornarci risultati e che ora lo stato è aggiornato con lo stesso valore del server. Stato undefined
- 13. I quarto -> Il reset dei Dati e degli Errori 4 Bug - Lo stato che usiamo per i nostri dati e quello che usiamo per gli errori sono separati. - Questo significa che se non facciamo manualmente dei RESET, possiamo andare nella casistica in cui i nostri dati si aggiornano ma rimaniamo con gli errori precedenti mostrati a UI. Dipende da come usiamo l’errore nel JSX, se controlliamo ‘error’ per primo avremo un problema
- 14. 4 Bug I quarto -> Il reset dei Dati e degli Errori Puliamo gli errori in fase di set dei nuovi dati Puliamo i dati in fase di set degli errori
- 15. I quinto -> Doppie chiamate in StrictMode 5 Bug - Non un bug vero è proprio ma decisamente una cosa fastidiosa - Il 90% di noi penso faccia uso di <React.StrictMode> - Quando usato, i nostri effect vengono lanciati 2 volte per ‘aiutarci’ a trovare bug come ad esempio la mancanza di funzioni di cleanup negli effect
- 16. Codice finale di una ‘semplice’ fetch Ma non doveva essere semplice?
- 17. Conclusione? Il Data Fetching è semplice La Gestione Dello Stato Asincrona non lo è
- 18. Quello che React Query gestisce per noi - Hai ragione a dire che non vuoi React Query per una cosa come fetchare i dati, perché alla fine anche con essa il codice di fetch lo devi scrivere comunque. - Ma è molto probabile che ti servirà per rendere il tuo stato prevedibile e per la gestione asincrona degli eventi che vanno ad aggiornare lo stato. Prima di vedere il codice con React Query, aggiungiamo queste 2 righe per creare il contesto in cui la libreria possa agire
- 19. Quello che React Query gestisce per noi Solamente 10 righe di codice per gestire il tutto. PS: Qui ci sta anche un BONUS -> la gestione della throw della fetch
- 20. Quello che React Query gestisce per noi - Non abbiamo più problemi di Race Condition - Abbiamo il loading, gli data e gli errori inclusi, senza gestioni multiple - Gli stati vuoti vengono gestiti automaticamente e possono essere sovrascritti con ‘placeholderData’ se serve - Non si avranno stati disallineati tra i data e gli errori, almeno che non lo vogliamo - Le fetch multiple sono deduplicate, persino quelle in StrictMode
- 21. Client VS Server state - Possiamo pensare al Client State come a tutte quelle operazioni sincrone che andiamo a gestire o manipolare - Solo noi possiamo cambiarlo - Viene distrutto quando il browser cambia - Disponibile in modo istantaneo - Sempre aggiornato - Ci riferiamo al Server State quando abbiamo a che fare con dati che non sono nostri, come ad esempio quelli ricevuti da chiamate POST - Vediamo solo una parte dei dati e non sappiamo mai se sono aggiornati al 100% - Controllati da altri servizi / utenti - Sono condivisi per più sessioni di browser - Sono asincroni, ci serve del tempo per prendere i dati dal server e riportarli sul client
- 22. The Story of React Query The Story of React Query: https:/ /www.youtube.com/watch?v=OrliU0e09io
- 23. Features utili Caching Automatic refetching Fetch retry Pagination utilities Mutations Optimistic update utilities And more
- 24. @eduardcapanu
- 26. https:/ /eduardcapanu.gumroad.com/l/reacttipsandtriks ๏ react mysteries like the double render explained ๏ features explained (like portals, lazy loading ecc.) ๏ how the life cycle works ๏ common mistakes ๏ what DevTools can do ๏ library under the hood information (prop drilling, high-order components, react canary, Virtual DOM ecc.) ๏ React insights about the version 18 & 19 ๏ some tips that can help you during the interview questions 30+ Free React Tips & Tricks
- 27. React Query: gestione efficiente dei dati nelle app React Ci vediamo al prossimo talk ☺ @capanu2 @eduardcapanu https:/ /eduardcapanu.com @eduard_capanu_dev