Function useGridLayout

src/react/hooks/useGridLayout.ts:153–471

(
  options: UseGridLayoutOptions
)

 * ```
 */
export function useGridLayout(
  options: UseGridLayoutOptions
): UseGridLayoutResult {
  const {
    layout: propsLayout,
    cols,
    preventCollision = false,
    onLayoutChange,
    compactor = verticalCompactor
  } = options;

  // Track if we're currently dragging to block prop updates
  const isDraggingRef = useRef(false);

  // Initialize layout with compaction using the compactor
  const [layout, setLayoutState] = useState<Layout>(() => {
    const corrected = correctBounds(cloneLayout(propsLayout), { cols });
    return compactor.compact(corrected, cols);
  });

  // Drag state
  const [dragState, setDragState] = useState<DragState>({
    activeDrag: null,
    oldDragItem: null,
    oldLayout: null
  });

  // Resize state
  const [resizeState, setResizeState] = useState<ResizeState>({
    resizing: false,
    oldResizeItem: null,
    oldLayout: null
  });

  // Drop state
  const [dropState, setDropState] = useState<DropState>({
    droppingDOMNode: null,
    droppingPosition: null
  });

  // Track previous layout for change detection
  const prevLayoutRef = useRef<Layout>(layout);

  // Set layout with optional compaction - use compactor.compact() (#2213)
  const setLayout = useCallback(
    (newLayout: Layout) => {
      const corrected = correctBounds(cloneLayout(newLayout), { cols });
      const compacted = compactor.compact(corrected, cols);
      setLayoutState(compacted);
    },
    [cols, compactor]
  );

  // Sync layout from props when not dragging
  useEffect(() => {
    if (isDraggingRef.current) return;

    if (!deepEqual(propsLayout, prevLayoutRef.current)) {