DB からデータがロードされる前にロード中メッセージを表示し、ロードされた後にロードされたデータでコンポーネントをレンダリングするコードを書いています。これを行うには、useState フックと useEffect フックの両方を使用します。コードは次のとおりです。

問題は、console.log で確認すると、useEffect が 2 回トリガーされることです。コードは同じデータを 2 回クエリしているため、これは避ける必要があります。

以下は私が書いたコードです:

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(()=>{
      /*
      Query logic to query from DB and push to indexarray
      */
          setLoad(false);  // To indicate that the loading is complete
    })
   },[]);
   if (isLoading===true){
       console.log("Loading");
       return <div>This is loading...</div>
   }
   else {
       console.log("Loaded!"); //This is actually logged twice.
       return (
          <div>
             <div className="posts_preview_columns">
             {indexarray.map(indexarray=>
             <Postspreview
                username={indexarray.username}
                idThumbnail={indexarray.profile_thumbnail}
                nickname={indexarray.nickname}
                postThumbnail={indexarray.photolink}
             />
             )}
            </div>
         </div>  
         );
    }
}

export default Home;