React: resizestop event does not work with setState as expected #2974

Activity

1. adumesny commented on Mar 2, 2025

   

   adumesny

   on Mar 2, 2025

   Member

   More actions

   @Aysnine ^^^
2. adumesny

   added

   React

   on Mar 2, 2025
3. Aysnine commented on Mar 3, 2025

   

   Aysnine

   on Mar 3, 2025

   Contributor

   More actions

   @mirinnes Thanks for the issue. there is a lot of misunderstanding about the use of gridstack in your code. This is a simplified demo showing how react + gridstack works.

   import { GridStack, GridStackWidget } from "gridstack";
   import { useEffect, useRef, useState } from "react";
   import { createPortal } from "react-dom";
   import "gridstack/dist/gridstack.min.css";
   
   // Global variable to store the gridstack containers
   const globalGridstackRenderedContainers: {
     el: HTMLElement;
     initWidgetInfo: GridStackWidget;
   }[] = [];
   GridStack.renderCB = (el: HTMLElement, initWidgetInfo: GridStackWidget) => {
     globalGridstackRenderedContainers.push({ el, initWidgetInfo });
   };
   
   export function Demo() {
     const gridContainerRef = useRef<HTMLDivElement>(null);
     const [dynamicHeight, setDynamicHeight] = useState<string>("some height");
   
     const [, setTrigger] = useState(0);
     const [items] = useState([
       { id: "item-1-1", x: 0, y: 0, w: 2, h: 2 },
       { id: "item-1-2", x: 2, y: 0, w: 2, h: 2 },
     ]);
   
     useEffect(() => {
       if (gridContainerRef.current) {
         const grid = GridStack.init(
           {
             float: false,
             acceptWidgets: true,
             column: 12,
             minRow: 1,
             // items here. gridstack will render these 'wrappers'
             children: items,
           },
           gridContainerRef.current
         );
   
         // This is a hack to force the react to re-render
         // because the gridstack library does not trigger a re-render
         // when the items change
         setTrigger((prev) => prev + 1);
   
         // Here it is the thing that does not work as expected:
         grid.on("resizestop", function () {
           setDynamicHeight("some new height");
         });
       }
     }, [items]);
   
     useEffect(() => {
       console.log("dynamicHeight changed:>>", dynamicHeight);
       // This console log actually gets triggered after resizing
       // and shows the correct updated value "some new height"
       // but the components in the DOM don't update with it :(
     }, [dynamicHeight]);
   
     return (
       <div ref={gridContainerRef}>
         {/* Mount react components in the DOM elements rendered by gridstack */}
         {items.map((item) => {
           // find the container that has the same id as the item
           const target = globalGridstackRenderedContainers.find(
             (container) => container.initWidgetInfo.id === item.id
           );
   
           if (!target) {
             return null;
           }
   
           // Only render content. no .grid-stack-item-content
           return createPortal(
             <>
               {item.id}
               <div className="dynamicHeight">
                 Some element with a dynamicHeight
               </div>
             </>,
             target.el
           );
         })}
       </div>
     );
   }

   Sorry, react wrapper is still under development, also based on the principle of this simplified demo, will have better development experience later.
4. adumesny

   added a commit that references this issue on Sep 21, 2026

   (react): re-render item after resize

   ...

   This issue will close once commit b1e590c is merged into the 'master' branch.

   b1e590c
5. adumesny

   closed this as completedin #3412on Sep 21, 2026