Componenti controllati e non controllati in React

Abbiamo appena parlato di componenti controller e componenti view. In React, i componenti controller vengono anche chiamati uncontrolled (non controllati) e i componenti view vengono anche chiamati controlled (controllati). Il collegamento potrebbe confondere un pochino all’inizio, ma dovrebbe aiutare pensare che, se un componente non viene controllato, allora sta controllando un altro componente.
Di conseguenza, un componente non controllato è un componente controller. Allo stesso modo, se un componente non sta controllando allora è controllato, per cui chiamiamo controllati i componenti view.

I componenti controller (non controllati) gestiscono gli stati, di cui inviano il valore ai componenti view (controllati). I componenti view (controllati) notificano i componenti controller (non controllati) dei cambiamenti dello stato.

Potrebbe capitarti di ricevere un avvertimento da React che dice:

Un componente sta cambiando un input non controllato per trasformarlo in un input controllato

In inglese:

A component is changing an uncontrolled input to be controlled

Prima di tutto, è importante citare che tutti gli input in React lavorano con le stringhe. Non importa se type è “number” o qualcos’altro che non c’entra niente con le stringhe. Perfino le checkbox usano stringhe, infatti leggiamo il loro attributo checked e non value.

Quando passiamo a input un attributo value che è null o undefined, React pensa che stiamo usando quell’elemento in modo non controllato (cioè come un componente controller). Potrebbe succedere perché ci dimentichiamo di inizializzare uno stato, oppure perché prendiamo un dato dall’esterno, per esempio dalla rete o da LocalStorage o SessionStorage, e ci dimentichiamo di inizializzarlo a stringa vuota. Se il valore che passiamo all’attributo value cambia e diventa una stringa, React si ritrova improvvisamente tra le mani un componente controllato, e lancia l’errore.

Possiamo portare questa regola nei nostri componenti, per essere sempre sicuri che i componenti controller e i componenti view siano sempre correttamente impostati:

• Se un componente si aspetta una prop di un certo tipo, diamole un valore iniziale dello stesso tipo.
• Quando passiamo una prop che deriva da uno stato a un componente figlio, passiamo sempre anche un event listener collegato alla funzione setter dello stesso stato.