ReactJS: il componente StrictMode

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.

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:

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