Programemos Cosas

  Necesito detectar si en un render hubo un nodo que no cambió respecto al render anterior y por lo tanto el ref callback nunca será llamado. En React, el callback de un ref solo se dispara cuando el nodo cambia (se monta, se desmonta o se reemplaza). Si entre un render y el siguiente el mismo nodo se mantiene sin cambios, el callback no se vuelve a invocar . Por eso, si querés detectar que un nodo no cambió respecto al render anterior, no podés confiar únicamente en el callback del ref . Tenés algunas estrategias: 📌 Estrategias posibles Comparar referencias en un useEffect Guardás el nodo en un useRef y luego verificás si cambió entre renders: tsx function MiComponente() { const divRef = React.useRef<HTMLDivElement | null>(null); const prevNode = React.useRef<HTMLDivElement | null>(null); React.useEffect(() => { if (prevNode.current === divRef.current) { console.log("El nodo no cambió"); } else { console.log("El nodo cam...

 Las librerías que manipulan el DOM (como D3.js) ¿No contradicen la filosofía de React de no manipular el DOM directamente sino a través de React? ¡Esta es la pregunta crucial para cualquier desarrollador que mezcla React con librerías de visualización! Tienes toda la razón en plantear esa preocupación. Respuesta directa: Sí, las librerías como D3.js manipulan el DOM directamente , y esto contradice la filosofía central de React . Sin embargo, existe una técnica estándar para usarlas juntas de forma segura y controlada. El truco no es evitar D3, sino aislar y encapsular su manipulación del DOM dentro de un componente de React. El Problema de la Doble Autoridad React tiene un modelo de interfaz de usuario donde el estado es la única fuente de verdad, y React es el único responsable de cómo ese estado se traduce en el DOM. React Asume el Control: Cuando React renderiza un componente, él es quien crea los nodos del DOM. D3 Interfiere: Si usas D3 para, por ejemplo, cambiar el at...