In questo articolo ti voglio raccontare cos’è componentDidCatch, quando è utile utilizzarlo e come utilizzarlo. Se ancora non conosci ReactJS ti consiglio questa guida che al momento è la miglior guida per imparare ReactJS disponibile in italiano.
ReactJS: cos’è componentDidCatch
ComponentDidCatch è un nuovo lifecycle method introdotto con ReactJS 16 che ti permette di eseguire il catch degli errori che vengono lanciati da React. Questo nuovo lifecycle method ti permette quindi di mostrare all’utente, evitando tutti i vecchi check, blocchi condizionali e try/catch, un messaggio di errore appropriato.
La firma di componentDidCatch è la seguente:
componentDidCatch(error, info)
Il primo parametro, error, contiene l’errore che è stato lanciato. Il secondo parametro, info, è un oggetto che contiene la proprietà componentStack la quale ti permette di conoscere lo stack dell’errore.
Il team di ReactJS spiega come funziona componentDidCatch a questo indirizzo.
Cosa sono gli ErrorBoundaries?
Per capire ancora meglio cos’è componentDidCatch e come usarlo è utile anche capire cosa siano gli ErrorBoundaries.
Gli ErrorBoundaries sono componenti React che eseguono il catch degli errori lanciati dai componenti che si trovano sotto “nell’albero” (le loro foglie, i child components). Questi componenti creano log di errore appropriati e mostrano all’utente un messaggio opportuno invece di quello di default che mostra il component tree con l’errore.
Questi componenti catturano gli errori che vengono lanciati durante il rendering, nel costruttore e nei vari metodi del lifecycle dei componenti figli (maggiori informazioni quì).
Gli ErrorBoundaries catturano quindi gli errori dei componenti figli e non catturano i seguenti errori:
- Errori negli event handlers, ovvero funzioni che gestiscono eventi come onClick su un pulsante
- Gli errori lanciati all’interno di codice asincrono (vedi setTimeout)
- Durante l’utilizzo di server-side rendering
- Errori che vengono lanciati dal componente che implementa componentDidCatch
Un qualsiasi componente che implementa componentDidCatch diventa un ErrorBoundaries component (questo componente deve essere una classe!).
Come utilizzarlo?
Ora hai capito cos’è componentDidCatch. Creiamo quindi un componente ErrorBoundary che implementa componentDidCatch ed un componente, BuggyButton, che al click sul pulsante imposta nello state releaseBugs a true così da lanciare un’eccezione al render successivo.
Vediamolo su CodePen:
See the Pen Intro to React 16 componentDidCatch by Sean (@sgroff04) on CodePen.
Hai visto? Ovviamente non possiamo tirare errore direttamente nella funzione handleClick poiché essendo un event handler il suo errore non potrà essere catturato da componentDidCatch (in questo caso userai try/catch).
La nostra App renderizza quindi il componente ErrorBoundary che al suo interno riceve tra i children il componente BuggyButton.
Conclusioni
Bene, hai capito cos’è componentDidCatch. E’ stato semplice no? Sono più che convinto che oltre a quanto descritto nell’articolo ti è sufficiente osservare il codice su CodePen per capire ancora meglio cos’è componentDidCatch.
Non scordarti che se hai bisogno di un ripasso su ReactJS c’è la guida per imparare ReactJS. Inoltre ho scritto anche una guida che ti insegna a creare la tua prima app per Android e iOS con React Native, la trovi quì.
Per approfondire React potrebbero esserti utili alcuni libri quali:
Ed alcuni corsi Udemy quali:
- Introduction to TypeScript DevelopmentCorso JavaScript – ES6, NodeJS, ReactJS in italiano (Lite)
- Modern React with Redux
- React 16 – The Complete Guide (incl. React Router 4 & Redux)
Se vuoi rimanere aggiornato sugli articoli del blog ti consiglio di iscriverti alla newsletter. Mando da 1 a 4 mail al mese e normalmente invio risorse gratuite e riservate solo agli iscritti. Invio anche la lista degli articoli di maggiore impatto, come questo. Se non troverai gli articoli potrai recuperarli dalla mail in questo modo ?
Per dubbi o domande non esitare a scrivermi nei commenti ?
Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).
