I cicli di rendering in React

Dopo aver effettuato il primo rendering, alla prima visualizzazione della pagina, React si ferma. Fino a quando? Fino a quando non viene chiamata una funzione setter.

Se clicchi sul bottone che dice “+”, vedrai apparire due nuovi log in console: entrambe le funzioni-componenti, App e Counter, sono state eseguite di nuovo!

Importante: potresti leggere in articoli e documentazione, che React effettua un rendering ogni volta che uno stato cambia. Questa cosa non è sempre vera: per le strutture dati non primitive, come array e oggetti, anche se una funzione setter viene chiamata con un valore identico al precedente, il rendering viene eseguito comunque. Per esempio, se counterValue fosse { value: 5 } e chiamassimo setCounterValue({ value: 5 }), il rendering accadrebbe anche se lo stato non è tecnicamente cambiato. Per non sbagliare, ipotizza che qualsiasi chiamata a una funzione setter causi un nuovo rendering.

Quando viene chiamata la funzione setter setCounterValue, React esegue di nuovo la trasformazione da JSX a JavaScript a codice HTML. Questa volta, però, invece di eliminare l’intero contenuto di <div id=”app” /> e rifare tutto da capo, React prende nota di cosa è cambiato tra la versione di “adesso” e quella risultante dal nuovo HTML, e modifica la pagina per applicare solo i cambiamenti. In questo caso, modificherà solo il contenuto dello <span> che si trova all’interno di Counter, quello che contiene {value}.

Quando React effettua rendering

React esegue il rendering di tutti i componenti visibili alla prima visualizzazione della pagina. Una volta finito il primo ciclo di rendering, quando viene chiamata una funzione setter, React esegue il rendering dei soli componenti che:

• Hanno subito la modifica di almeno uno stato
• Sono figli di un componente che è stato chiamato al rendering

Nel nostro caso, il componente App viene chiamato al rendering perché lo stato counterValue è cambiato, il componente Counter viene chiamato al rendering perché è figlio di App.

Quando progettiamo applicazioni React, in particolare la distinzione tra componenti controller e componenti view, è utile tenere a mente queste regole. Se tutta la logica della nostra applicazione fosse concentrata nel componente radice (quello che non ha genitori e contiene tutti i figli), allora ogni cambiamento causerebbe il rendering di tutti i componenti.

Nella programmazione front-end, le operazioni più lente sono quelle che modificano la pagina, e React ci aiuta molto modificando solo le cose che effettivamente sono cambiate dopo aver trasformato JSX in JavaScript e in HTML.

Noi, invece, possiamo aiutare React creando diversi componenti controller che gestiscono diversi stati, in modo da accorciare il percorso degli eventi che notificano i cambiamenti, diminuendo di conseguenza la quantità di componenti che vengono chiamati al rendering quando gli eventi causano cambiamenti di stato.