In genere, il flusso di rendering di un component in React prevede che al cambio di un valore tra le props o lo state il component venga renderizzato da zero. Nella maggioranza dei casi questo flusso è più che sufficiente, ma esistono casi in cui non è così. Pensiamo ad esempio quando dobbiamo impostare il focus su un campo. In questi renderizzare nuovamente il component non è ammissibile, quindi dobbiamo ricorrere all'utilizzo del DOM.

Per ottenere un riferimento agli oggetti del DOM dobbiamo prima creare un oggetto ref e memorizzarlo in una variabile, e poi in fase di rendering assegnare l'oggetto del DOM alla variabile.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef} />;
  }
}

Per accedere all'oggetto del DOM, dobbiamo sfruttare la proprietà current di myRef.