Recientemente descubrí la siguiente sorpresa de este artículo .

 import { useState } from "react"; export default function App() { const rerender = useState()[1]; return ( <div ref={(e) => console.log("ref", e)} onClick={() => rerender({})}> click to remount </div> ); }

En el ejemplo de código anterior, en cada ciclo de procesamiento, la referencia primero será null y luego la referencia se establecerá en el elemento HTML real.

Por lo tanto, los registros de la consola se ven así:

 ref <div>click to remount</div> ----- ref null ----- ref <div>click to remount</div>

No espero que la referencia sea null durante el primer paso de cada ciclo de procesamiento, ya que el nodo DOM subyacente no cambia. ¿Por qué la referencia se establece en null durante cada ciclo de renderizado?

Código Sandbox del artículo