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 27
il componente StrictMode

ReactJS: il componente StrictMode

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

In questo articolo vediamo cos’è il componente StrictMode di ReactJS che è stato introdotto dalla versione 16.3. Molto utile per capire se ci sono problemi nel codice e molto utile per capire dove e quando si stanno usando metodi del lifecycle non sicuri o altre worst practice.

Se vuoi imparare ReactJS o fare un ripasso ti consiglio questa guida in italiano.

Il componente StrictMode

Dalla versione 16.3 di ReactJS è possibile utilizzare il componente StrictMode. Nasce con lo scopo di evidenziare potenziali errori nella web application e non renderizza niente di visibile. Questo componente, che implementa dei controlli importanti, funziona solo in modalità di sviluppo (dev) e non impatta minimamente l’ambiente di produzione.

A cosa serve?

Il componente StrictMode nasce con l’obiettivo di segnalarti:

  • L’utilizzo di metodi del lifecycle non sicuri, o unsafe, come descritto in questo articolo
  • L’utilizzo delle vecchie ref
  • La possibilità di aver introdotto dei problemi nell’utilizzo dei metodi del lifecycle che possono avere effetti controproducenti
  • L’utilizzo della vecchia context API (leggi quì per scoprire le context API ufficiali)

Nota: per controllare costruttori e metodi del lifecycle questi vengono invocati due volte, ma ricorda che ciò avviene solo nell’ambiente di sviluppo e non in quello di produzione.

Per maggiori informazioni guarda la guida ufficiale a questo indirizzo.

Development Category (English)728x90

Come si utilizza?

Il componente StrictMode può essere utilizzato su tutta la web app oppure su alcuni dei componenti della web application.

Prendendo un esempio dalla guida ufficiale, il componente StrictMode può essere utilizzato in questo modo:

import React from 'react';

function ExampleApplication() {
    return ( 
      <div >
        <Header / >
        <React.StrictMode >
        	<div>
        		<ComponentOne / >
        		<ComponentTwo / >
        	</div>
        </React.StrictMode> 
      	<Footer / >
      </div>

    );
}

Quello che sta accadendo è che solo ComponentOne e ComponentTwo si trovano all’interno di React.StrictMode e di conseguenza solo loro subiranno i vari controlli per assicurarti di avere un buon codice. Header e Footer invece non subiscono alcun tipo di controllo.

Deep Learning Specialization on Coursera

Perché utilizzare il componente React.StrictMode?

E’ utile utilizzare il componente React.StrictMode quando:

  • Vuoi aggiornare la tua web app per farle utilizzare le nuove context API
  • La tua web app sta subendo un refactoring per l’utilizzo dei nuovi metodi del lifecycle e togliere quelli dichiarati “non sicuri”
  • Stai aggiornando la tua web app per utilizzare la nuova ref API
  • Vuoi verificare di aver scritto codice correttamente specialmente in vista delle nuove funzionalità di ReactJS che lo renderanno asincrono (puoi quindi evitare problemi che possono essere determinati da un’invocazione errata di setState, codice scritto in metodi quali getDerivedStateFromProps o componentWillReceiveProps che esegue operazioni non consone al metodo, problemi nel costruttore come creare un listener quando dovrebbe essere creato in componentDidMount ed infine problemi nel metodo render)
  • Devi evitare possibili memory leaks dovuti al fatto che i metodi del lifecycle possono essere chiamati più volte (specialmente in vista della nuova async mode, la quale può permettere a React di chiamare più volte i metodi del lifecycle prima di eseguire un commit del DOM o anche quando non c’è nessun commit in seguito ad un errore)

Conclusioni

Il componente StrictMode è davvero utile per avere codice più pulito e più sicuro. In più è un ottimo modo per aggiornarsi specialmente in vista dei cambiamenti che verranno apportati con ReactJS 17 (tra i più importanti c’è senza dubbio il fatto che alcuni metodi del lifecycle esisteranno solo con prefisso UNSAFE_, leggi quì).

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

  • React, TypeScript e Redux: creazione delle prime pagine04/07/2018
  • ReactJS: le context API ufficiali, come usarle e cosa sono28/06/2018
  • ReactJS: i nuovi metodi del lifecycle getDerivedStateFromProps e getSnapshotBeforeUpdate26/06/2018
  • ReactJS: cos’è componentDidCatch26/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