De acuerdo con los documentos de React , las referencias de devolución de llamada se llaman cuando un componente se monta (con el valor del elemento DOM) y se desmonta (con nulo):
React llamará a la devolución de llamada ref con el elemento DOM cuando el componente se monte, y lo llamará con nulo cuando se desmonte.
De acuerdo con los documentos sobre la reconciliación de React , los elementos DOM del mismo tipo se actualizarán en lugar de reemplazarse cuando se encuentren:
Al comparar dos elementos DOM de React del mismo tipo, React observa los atributos de ambos, mantiene el mismo nodo DOM subyacente y solo actualiza los atributos modificados.
En el siguiente fragmento simple, registramos cada vez que se llama a la referencia de devolución de llamada:
import { useState } from "react"; export default function App() { const [num, setNum] = useState(0); return ( <div> <table ref={(ref) => console.log(ref)}> <tbody> <tr> <td>{num}</td> </tr> </tbody> </table> <button onClick={() => setNum((prev) => prev + 1)}>Click</button> </div> ); }... y, sorprendentemente, se llama cada vez que se procesa el componente, lo que indica que el nodo DOM conectado también se desmonta y se monta cada vez que se vuelve a procesar el componente.
¿Por qué es esto? Parece que no entiendo los documentos o hay algún otro mecanismo en juego aquí que me gustaría entender.
Zona de pruebas de código: https://codesandbox.io/s/table-mount-unmount-lr10wv
Se llama porque pasó la devolución de llamada como función anónima, que se recreará cada vez que actualice el estado (forzando así la repetición), y cuando ref obtenga el nuevo valor (función recalculada con nueva referencia) activará la ejecución de devolución de llamada. Puede evitar esto estabilizando la referencia de devolución de llamada ref, así:
import { useCallback, useState } from "react"; export default function App() { const [num, setNum] = useState(0); const refCallback = useCallback((ref) => console.log(ref), []); return ( <div> <table ref={refCallback}> <tbody> <tr> <td>{num}</td> </tr> </tbody> </table> <button onClick={() => setNum((prev) => prev + 1)}>Click</button> </div> ); }