ref, DOM e stato: chi possiede cosa

Lo stato possiede ciò che disegna il render, la ref possiede ciò che serve al comportamento: un nodo del DOM, un timer, l'ultimo valore visto. Cambiare una ref non ridisegna nulla.

La regola in una riga

Se il valore compare nel markup, è stato. Se lo leggi solo dentro un effetto o un gestore di eventi, è una ref. Nel dubbio chiediti chi deve accorgersi del cambiamento: se la risposta è l'utente, serve stato.

Il caso eseguibile

import { useEffect, useRef, useState } from "react";

export function CampoRicerca() {
  const input = useRef(null);
  const tentativi = useRef(0);
  const [testo, setTesto] = useState("");

  useEffect(() => {
    input.current?.focus();
  }, []);

  function invia(e) {
    e.preventDefault();
    tentativi.current += 1;
  }

  return (
    
       setTesto(e.target.value)}
      />
      Cerca
    
  );
}

Il campo è controllato dallo stato, il nodo e il contatore vivono nelle ref. Il contatore non compare a schermo: se dovesse comparire, diventerebbe stato e il componente si ridisegnerebbe a ogni invio.

Ref e server component

Le ref richiedono un client component: puntano a un nodo del browser, che sul server non esiste. Un componente con useRef e senza direttiva di client viene rifiutato in build, non a runtime.

Misurare invece di indovinare

Per leggere larghezza o posizione usa una callback ref con ResizeObserver, non una ref letta durante il render. Il valore misurato è un dato del browser, quindi appartiene a un effetto, non al corpo del componente.

Record vivi nel catalogo

La categoria input raccoglie i campi del catalogo, con un input di chat che gestisce focus e altezza; un esempio di blocco è input-10.

La limitazione

Una ref non notifica nessuno: due componenti non possono sincronizzarsi su di essa senza uno stato che li svegli. Inoltre la mutazione durante il render è invisibile a React, che in concurrent rendering può scartare il calcolo e lasciare la scrittura al suo posto.

Dove continuare

Il confine fra client e server è in un hook importato in un server component; il doppio avvio degli effect è in useEffect due volte in sviluppo; come si legge la documentazione è in leggere la documentazione React. Il confronto con Vue è in Vue 3 vs React.