Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Giu 26
cos'è componentDidCatch

ReactJS: cos’è componentDidCatch

  • 26/06/2018
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • lifecycle, react, reactjs

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.

Development Category (English)728x90

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:

Deep Learning Specialization on Coursera
  • 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:

  • Learning React: Functional Web Development with React and Redux

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!).

Commenti

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

  • ReactJS: i nuovi metodi del lifecycle getDerivedStateFromProps e getSnapshotBeforeUpdate26/06/2018

Fammi sapere cosa ne pensi :) Annulla risposta

Impara ReactJS imparare react
I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
Newsletter

Seguimi su Facebook :)

Facebook Pagelike Widget
Impara React Native imparare react native
10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
Impara a Creare un Tema Wordpress imparare creare tema wordpress
Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
UX: Perché la User Experience è Importante UX importante e cos'è
Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
Libri per Imparare JavaScript Imparare JavaScript libri

Articoli recenti

  • I principali engine utilizzati per lo sviluppo di videogiochi
  • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
  • 8 consigli per migliorare la tua SEO Locale

Categorie

  • CSS
  • Interviste
  • Java
  • Lavoro
  • Normative
  • Personale
  • Programmazione
  • Strategia & Marketing
  • Tech
  • Web Design
  • Wordpress
Paolo Dell'Aguzzo
Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
P. IVA: IT02758450429
Mail: info@paolodellaguzzo.com
Via Litoranea, 284/C - Marotta (PU)
Privacy Policy
Cookie Policy
In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku