title: How to fix infinite re-render?
body: <p><em>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.</em></p>
  
  <p>Found the answers to my question, but, nevertheless, I can’t understand how to fix this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 = () =&gt; {
      return arr1.company.map(items =&gt; {
        return (
          &lt;div&gt;
            &lt;span key={items.id}&gt;
              {items.companyName}
              &lt;span onClick={onHandleVisible}&gt;Details&lt;/span&gt;
            &lt;/span&gt;
            &lt;br /&gt;
          &lt;/div&gt;
        );
      });
    };
  
    const onHandleVisible = () =&gt; {
      setVisible(!visible);
    };
  
    const onHandleVisible2 = () =&gt; {
      setVisible2(!visible2);
    };
  
    return (
      &lt;div className="App"&gt;
        &lt;button onClick={onHandleVisible2}&gt;Show&lt;/button&gt;
        {visible &amp;&amp; onDataHandle()}
      &lt;/div&gt;
    );
  }
  
  render (
    &lt;App /&gt;,
    document.getElementById('root')
  )</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"&gt;&lt;/script&gt;&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;&lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I understand that this is due to the endless re-rendering, but what are the solutions?</p>