1

I am using react-grid-layout for my learning and implemented a simple example. Based on the documentation, we'll get the updated layout values on onLayoutChange function and getting the below error

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I have written my code like this.

import "./styles.css";
import React, { useCallback, useState } from "react";
import { Responsive, WidthProvider } from "react-grid-layout";

const ResponsiveGridLayout = WidthProvider(Responsive);

export default function App() {
  const [generatedLayouts, setGeneratedLayouts] = useState({
    lg: [
      { h: 2.9, i: "Testing", w: 8, x: 0, y: 0 },
      { h: 2.9, i: "Testing 1", w: 8, x: 4, y: 0 },
      { h: 2.9, i: "Testing 2", w: 8, x: 8, y: 0 },
      { h: 2.9, i: "Testing 3", w: 8, x: 0, y: 4 }
    ],
    md: [
      { h: 2.9, i: "Testing", w: 8, x: 0, y: 0 },
      { h: 2.9, i: "Testing 1", w: 8, x: 4, y: 0 },
      { h: 2.9, i: "Testing 2", w: 8, x: 8, y: 0 },
      { h: 2.9, i: "Testing 3", w: 8, x: 0, y: 4 }
    ],
    sm: [
      { h: 2.9, i: "Testing", w: 8, x: 0, y: 0 },
      { h: 2.9, i: "Testing 1", w: 8, x: 4, y: 0 },
      { h: 2.9, i: "Testing 2", w: 8, x: 8, y: 0 },
      { h: 2.9, i: "Testing 3", w: 8, x: 0, y: 4 }
    ],
    xs: [
      { h: 2.9, i: "Testing", w: 8, x: 0, y: 0 },
      { h: 2.9, i: "Testing 1", w: 8, x: 4, y: 0 },
      { h: 2.9, i: "Testing 2", w: 8, x: 8, y: 0 },
      { h: 2.9, i: "Testing 3", w: 8, x: 0, y: 4 }
    ]
  });
  const handleLayoutChange = useCallback((layout, allLayouts) => {
    setGeneratedLayouts(allLayouts);
    // return JSON.parse(JSON.stringify(layout));
  }, []);

  /* const generateDOM = () => {
    return 
  }; */

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <ResponsiveGridLayout
        className="layout"
        layouts={[]}
        breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
        cols={{ lg: 16, md: 16, sm: 6, xs: 4, xxs: 2 }}
        margin={[16, 16]}
        containerPadding={[0, 0]}
        rowHeight={100}
        onLayoutChange={handleLayoutChange}
        isResizable={false}
        isDraggable
        useCSSTransforms
        onBreakpointChange={(breakpoint) => {
          console.log("breakpoint", breakpoint);
        }}
      >
        {generatedLayouts?.lg?.map((a, i) => {
          console.log("asdsad", `${a.i} ${i}`, i);
          return (
            <div key={`${a.i} ${i}`} style={{ border: "1px green solid" }}>
              Some element {i}
            </div>
          );
        })}
      </ResponsiveGridLayout>
    </div>
  );
}

If I comment onLayoutChange, it's rendering only one time.

Attaching the Sandbox here. I'm guessing the sandbox is taking xs as the breakpoints and not throwing errors but that's not showing anything on UI also. If you try to open the preview in a new tab, the breakpoints are lg and the state is updating infinite times. I would be grateful if someone helps where am I missing.

mc-user
  • 1,769
  • 4
  • 14
  • 25
  • What is the issue? Nothing is rendered? – Drew Reese Apr 23 '22 at 06:22
  • Not sure. The component is loading infinite times and throwing ```Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.``` – mc-user Apr 23 '22 at 06:24
  • I don't see that error logged at all. – Drew Reese Apr 23 '22 at 06:24
  • Try to open the preview in a new tab from the sandbox. – mc-user Apr 23 '22 at 06:25
  • I'm guessing the sandbox is taking `xs` as the breakpoints and not throwing errors but that's not showing anything on UI also. If you try to open the UI in a new tab, the breakpoints are `lg` and the state is updating infinite times. – mc-user Apr 23 '22 at 06:29
  • Yeah, I see the render looping error now. Investigating. – Drew Reese Apr 23 '22 at 06:30
  • Is there a need/use case for using the `onLayoutChange` prop? It seems you've defined the layouts and just need to grab the current `breakpoint` from `onBreakpointChange`. – Drew Reese Apr 23 '22 at 07:10
  • Yeah. I can change the position of the widget to another place and save the state. [Here](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html) is the example from `react-grid-layout` examples – mc-user Apr 23 '22 at 07:13
  • The only difference I can see between your sandbox code and the demo you linked is that the demo doesn't actually do anything with the `onLayoutChange` handler *other than* proxy the arguments through to another callback that was passed in props, and for the demo this prop is simply an [empty function body](https://github.com/react-grid-layout/react-grid-layout/blob/master/test/examples/0-showcase.jsx#L27). I think the issue with your sandbox is due to using an `onLayoutChange` handler that updates some local state. – Drew Reese Apr 23 '22 at 17:27

0 Answers0