title: ReactJS useEffect() is running every time on page load
body: <p>My useEffect() is running every time at page load. I want it to run after I click a button. My code is as follows :</p>
  <pre><code>import React, { useState , useEffect } from 'react';
  
  
  const HooksDemo = () =&gt; {
  
      const [myArray, setMyArray] = useState([]);
  
      useEffect(() =&gt; {
          if(myArray) {
              console.log(&quot;My Array    : &quot;,myArray)
          }
      } , [myArray])
  
  
         const populateArray = () =&gt; {
             var sampleData = [
                 { id: 1, name: &quot;Carl&quot; },
                 { id: 2, name: &quot;Negan&quot; },
                 { id: 3, name: &quot;Daryl&quot; }
             ];
  
             setMyArray(sampleData);
         }
  
  
      return (
          &lt;div&gt;
         
              &lt;button onClick={populateArray}&gt; Populate Array &lt;/button&gt;
          
          &lt;/div&gt;
      );
  };
  
  export default HooksDemo;
  </code></pre>
  <p>I want to print myArray in console after I populate it using the populateArray() function but the useEffect() function is running at page load as well as after the execution of populateArray() function.</p>