Changes to the dndRootElement prop do not update the Tree

[goliney]

If you mount <Tree dndRootElement={dndRootElement.current} /> when dndRootElement.current is null, changes will not be picked up when dndRootElement.current start to refer to a real element.

[ru13r]

Maybe someone finds this useful. I don't know whether I did it optimally, but I wrote a custom hook to timeout rendering of children before the container is mounted.

import { useEffect, useState } from 'react';

const useIsParentMounted = (): boolean => {
  const [isParentMounted, setIsParentMounted] = useState(false);

  useEffect(() => {
    // Delay rendering of the child
    const timeout = setTimeout(() => {
      setIsParentMounted(true);
    }, 0); // Ensures the parent is mounted first
    return () => clearTimeout(timeout);
  }, []);

  return isParentMounted;
};

export default useIsParentMounted;

Now the <Tree /> can be rendered only after the parent container is mounted and has a non-null reference:

const containerRef = useRef<any>(null);
const isParentMounted = useIsParentMounted();
return (
  <div ref={containerRef}>
    {isParentMounted && <Tree 
      dndRootElement={containerRef.current} 
      // ... 
      />}
  </div>
  );