title: React Fetch API Being Called 2 Times on page load
body: <p>React Fetch API Being Called 2 Times on page load, I don't know what is missing in this code or what I am doing wrong. I have faced this problem from the morning,
  I really appreciate any help you can provide.
  React Fetch API Being Called 2 Times on page load, I don't know what is missing in this code or what I am doing wrong. I face this problem from the morning,
  I really appreciate any help you can provide.</p>
  <pre><code>import React, { useState, useEffect } from 'react'
      import axios from 'axios';
      import {  Grid, Paper, TextField } from '@mui/material'
      import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
      
      function FormApi() {
      
        //Mui fileds and paper style
        const paperStyle = { padding: '50px ', width: 550, margin: '50px auto' }
      
        //Fetch data from api
        const [userx, setUserx] = useState([{data:null,support:null}]);
        const url = 'https://reqres.in/api/users/2';
      
          useEffect(()=&gt;{
      
            //debugger
      
            const fetchData = async () =&gt;{
      
              await axios.get(`${url}`)
              .then((response) =&gt;{
                setUserx(response.data)
      
              }).catch((error)=&gt;{
                  console.log(error)
              })
            }
      
            fetchData();
            }
      
          ,[]);
      
        return (
      
          &lt;Grid container spacing={2} style={paperStyle}&gt;
      
            &lt;Grid align='center' &gt;
              &lt;Paper elevation={20} &gt;
      
                &lt;Grid align='center'&gt;
      
                  &lt;h2 style={{padding:'10px' ,background: &quot;#000080&quot;, color: 'white' }}&gt; 
         &lt;PersonOutlineIcon large style={{fontSize:'80%'}} /&gt;User Details&lt;/h2&gt;
      
                &lt;/Grid&gt;
                
                &lt;form&gt;
               
                &lt;img style={{width:&quot;20%&quot;}} src={userx.data  ? userx.data.avatar : ''}/&gt;
                  &lt;h1 style={{color:'#000080'}}&gt;{userx.data  ? userx.data.first_name : ''} 
         {userx.data  ? userx.data.last_name : ''}&lt;/h1&gt;
      
                &lt;Grid container &gt;
                  &lt;Grid item xs={6} &gt;
                    &lt;h2 style={{color:'white', background: &quot;purple&quot;}}&gt;Contact Info&lt;/h2&gt;
                    &lt;TextField   value={userx.data  ? userx.data.id : ''}   variant=&quot;standard&quot; 
           /&gt;
                    &lt;TextField  value={userx.data  ? userx.data.email  : ''}   
         variant=&quot;standard&quot; /&gt;
                  &lt;/Grid&gt;
      
                  &lt;Grid item align='left' xs={6} style={{marginBottom:'40px'}}&gt;
                    &lt;h2 style={{color:'white', background: &quot;purple&quot;}}&gt;Social Link&lt;/h2&gt;
                    &lt;TextField  value={userx.support ? userx.support.url : ''}   
         variant=&quot;standard&quot; /&gt;
                    &lt;TextField  value={userx.support ? userx.support.text : ''}     
        variant=&quot;standard&quot; /&gt;
                  &lt;/Grid&gt;
                  
                &lt;/Grid&gt;
                &lt;/form&gt;
              &lt;/Paper&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;       
        )
      }enter code here
      
      export default FormApi
  </code></pre>