reactjs - Maximum update Depth exceeded

Asked

Viewed 860 times

1

I am creating a dynamic table, in which I save the row information in the localStorage. To render the table, I give a getItem in localStorage, a setRows on a map in the variable rows.

const [rows, setRows] = useState([]);

const rowsLS = JSON.parse(localStorage.getItem('rows')) || [];

useEffect(() => {
    setRows(rowsLS);
}, [rowsLS]);

I wish that when the user adds a new Row, the Component will redecorate it too, and this is working, but the console is returning the following error:

Maximum update Depth exceeded. This can happen when a Component calls setState Inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on Every render.

I would like to know what is causing this error and how to avoid it without changing the operation

javascript react localstorage react-hooks

  • it is difficult to know only by this stretch, but, there is already redundancy in your code, because you could pass the value localStorage.getItem('rows') directly const [rows, setRows] = useState(localStorage.getItem('rows') || []); without the need to create a constant in his code and I think (there’s no way to know exactly) that he complains about the useEffect, being called several times, in case you can take it away from there for now with the change above

  • By doing this way, if the Storage location changes the variable will also change and thus render the new column?

  • Come on: so the way I told you he takes the last update that’s on localStorage and plays in the component status variable. That is, all updates in rows you need to pass to the localStorage also so that when entering this component also always have the last update. So then you can use the useEffect(() => { localStorage.setItem('rows', JSON.stringify(rows)) }, [rows]); where when changing Rows it goes there and adds the last update in localStorage? get this

1 answer

0


Good through your comments, you are recording data on localStorage and wanting at the same time that it is loaded in the state variable of the component and when that variable is updated also the localStorage be updated, with a minimal example you get this result:

function Todo () {
    // item 1
    const [rows, setRows] = 
    React.useState(
        JSON.parse(window.localStorage.getItem('rows'))
      || 
      []
    );

    // item 2
    React.useEffect(() => {
        window
            .localStorage
            .setItem('rows', JSON.stringify(rows));
    }, [rows]);

    // botão de ação
    const handleClick = (e) => {
        setRows([...rows, Math.random()]);
    }

    return (
        <div>
          {
            rows.map((r,i) => (
                <div key={i}>{r}</div>
            ))
          }
          <button onClick={handleClick}>
            Press
          </button>
        </div>
    )
}

ReactDOM.render(<Todo />, document.querySelector("#app"))

Function

  1. Local status variable, rows needs to receive the data contained in localStorage or if not a array without data, this being the initial execution of its component.
  2. Need every time we update rows(with his method setRows) that in the localStorage also be updated with the new position or up to any kind of update, in this case the focus was inserting an item in the array, use the useEffect with the setting for when rows for updated also already update localStorage.

The problem is you’re calling the useEffect several times for not configuring which variable should be observed and thereby exceeding the number of updates of the state of your component and above has been fixed such problem.

Browser other questions tagged javascript react localstorage react-hooks

You are not signed in. Login or sign up in order to post.