فرض کنید یک کامپوننت react ساختید و می خواهید داده هایی که از database گرفتید را نمایش دهید. برای اینکار باید از هوک useEffect استفاده کنیم و کد مربوط به fetch کردن داده ها را داخل آن قرار دهیم:

function App() {

  const user = {};
  
  const config = { headers: { "Content-Type": "application/json" } };

  useEffect(() => {
    async function fetchUser() {
 
    const result = await axios.get("http://localhost:4000/users/" + username, config);
    user = result.data;

    }
    fetchUser();
  },[]); 


  return (
    <p>this is {user}</p>

}
export default App;

نکته: هوک useEffect دو آرگمان می گیرد:

• آرگمان اول تابعی است که باید برای fetch کردن داده فراخوانی شود
• آرگمان دوم مشخص می کند که چه هنگام باید خوانده شود ( ما اینجا یک آرایه خالی دادیم ([]). این بدین معنی است که useEffect فقط یکبار فراخوانی شود و با تغییر props و state مجدد useEffect فراخوانی نشود و در نتیجه دوباره داده ها fetch نشوند. اگر آرمان دوم را اصلا ندهید ، هنگام تغییر props و state  ، دوباره useEffect فراخوانی می شود. می توانید پارامترهای دیگری هم بدهید: این لینک را ببینید )

نکته: برای ارسال درخواست به سرور از axios استفاده می کنیم. ( این لینک را ببینید )

نکته: اگر آرگمان دوم را آرایه خالی دادید اما با هر با رندر کامپوننت ، useEffect دوبار فراخوانی شد، باید React.StrictMode را غیر فعال کنید (این لینک را ببینید)