How to fix infinite re-render?

Question

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.

Found the answers to my question, but, nevertheless, I can't understand how to fix this?

 const { useState } = React, { render } = ReactDOM function App() { const [visible, setVisible] = useState(false); const [visible2, setVisible2] = useState(false); const arr1 = { company: [ { id: "random1", companyName: "Apple" }, { id: "random2", companyName: "Samsung" } ] }; const onDataHandle = () => { return arr1.company.map(items => { return ( <div> <span key={items.id}> {items.companyName} <span onClick={onHandleVisible}>Details</span> </span> <br /> </div> ); }); }; const onHandleVisible = () => { setVisible(!visible); }; const onHandleVisible2 = () => { setVisible2(!visible2); }; return ( <div className="App"> <button onClick={onHandleVisible2}>Show</button> {visible && onDataHandle()} </div> ); } render ( <App />, document.getElementById('root') )

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

I understand that this is due to the endless re-rendering, but what are the solutions?

Answer 1

You have multiple problems in your code logic (that is not entirely clear, I must say):

• Show button onClick triggeres onHandleVisible2 callback which sets visible2 state variable to true , but there's nothing in your code depending on that state variable, so nothing happens
• The block {visible && onDataHandle()} is supposed to trigger onDataHandle() (which never happens for above reason - visible stays equal to false ), but onDataHandle() (even though attempts to return some JSX) will not add anything to render within <App /> as it is not a ReactJS component
• (the minor one) if your intention with onDatahandle() was to return some component, wrapping up your span with extra <div> doesn't make much sense.

With all the above issues fixed, you would get something, like:

 const { useState } = React, { render } = ReactDOM function App() { const [visible, setVisible] = useState(false); const [visible2, setVisible2] = useState(false); const arr1 = { company: [ { id: "random1", companyName: "Apple" }, { id: "random2", companyName: "Samsung" } ] }; const Data = () => ( <div> { arr1.company.map(items => ( <span key={items.id}> {items.companyName} <span onClick={onHandleVisible}>Details</span> {visible && <span>There go {items.companyName} details</span>} <br /> </span>)) } </div> ) const onHandleVisible = () => { setVisible(!visible); }; const onHandleVisible2 = () => { setVisible2(!visible2); }; return ( <div className="App"> <button onClick={onHandleVisible2}>Show</button> {visible2 && <Data />} </div> ); } render ( <App />, document.getElementById('root') )

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

Note one important issue stays unsolved in above code block: you used single variable ( visible ) for your entire app, so if you decide to control visibility of details for each item independently, you won't be able to do that with your current approach. But that's a totally different issue which you may post as a separate question.