title: React Hooks: useEffect() is called twice even if an empty array is used as an argument
body: <br>
  I am new to reactJS and am writing code so that before the data is loaded from DB, it will show loading message, and then after it is loaded, render components with the loaded data. To do this, I am using both useState hook and useEffect hook. Here is the code:
  <p>The problem is, useEffect is triggered twice when I check with console.log. The code is thus querying the same data twice, which should be avoided.</p>
  <p>Below is the code that I wrote:</p>
  <pre><code>import React from 'react';
  import './App.css';
  import {useState,useEffect} from 'react';
  import Postspreview from '../components/Postspreview'
  
  const indexarray=[]; //The array to which the fetched data will be pushed
  
  function Home() {
     const [isLoading,setLoad]=useState(true);
     useEffect(()=&gt;{
        /*
        Query logic to query from DB and push to indexarray
        */
            setLoad(false);  // To indicate that the loading is complete
      })
     },[]);
     if (isLoading===true){
         console.log(&quot;Loading&quot;);
         return &lt;div&gt;This is loading...&lt;/div&gt;
     }
     else {
         console.log(&quot;Loaded!&quot;); //This is actually logged twice.
         return (
            &lt;div&gt;
               &lt;div className=&quot;posts_preview_columns&quot;&gt;
               {indexarray.map(indexarray=&gt;
               &lt;Postspreview
                  username={indexarray.username}
                  idThumbnail={indexarray.profile_thumbnail}
                  nickname={indexarray.nickname}
                  postThumbnail={indexarray.photolink}
               /&gt;
               )}
              &lt;/div&gt;
           &lt;/div&gt;  
           );
      }
  }
  
  export default Home;
  </code></pre>
  <p>Can someone help me out in understanding why it is called twice, and how to fix the code properly?
  Thank you very much!</p>