Page renders faster than fetching the data and displaying it - reactjs

Question

How do i display data that i am grabbing using a fetch call and then setting it into an array and displaying in the Dom if it meets the conditions. Currently i am rendering the page faster than i am fetching the data and doing stuff with it.
thanks in advance
function Profile() {
let myReceipe = [];
const [isPopUp, setPopUp] = useState(false);
ReceipeService.getReceipes().then(data => {
myReceipe = data;
})
const popUpHandler = () => {
setPopUp(!isPopUp);
}
return (
<>
<div className='profile'>
<ProfileHeader/>
<div className='createdposts'>
{myReceipe.length !== 0 ?
<Post popUpHandler={popUpHandler} myReceipe={myReceipe}/>
:
null
}
</div>
</div>
{isPopUp === true ?
<Magnify popUpHandler={popUpHandler}/>
:
null
}
</>
)
}

Answer 1

Couple of problems in your code:
You are not using the useEffect hook to make the HTTP request
myReceipe should be in the state of your component
Data will always be loaded after your component has rendered.
The way you are fetching the data is not the correct way to do it. React has useEffect hook that is built exactly for this purpose.
Fetching data from the server is a side-effect and all the side effects belong inside the useEffect hook. So, move the code that makes the HTTP request inside the useEffect hook.
Also make sure that myReceipe is the local state of your component
const [myReceipe, setMyReceipe] = useState([]);
and when the data from the server is available, update the state to trigger a re-render so that you can show the data to the user.
useEffect(() => {
ReceipeService.getReceipes()
.then(data => {
setMyReceipe(data);
});
}, []);
While the data is not available, show some kind of loading spinner to the user to indicate to the user that data is loading.

Answer 2

just use a state variable myReceipe then when myReceipe is set the Component will re render nthen call ReceipeService.getReceipes() in useEffect :
let myReceipe = [];
const [isPopUp, setPopUp] = useState(false);
const [myReceipe , setmyReceipe ] = useState([]);
useEffect(
()=>{
let isMounted=true;
ReceipeService.getReceipes().then(data => {
// isMounted && insures the component is still mounted
// or else this might through an error if the component has unmounted but the api call responded because you cant just update staet of un unmounted Component
isMounted && setmyReceipe(data);
})
return ()=>{isMounted = false }
},[])
const popUpHandler = () => {
setPopUp(!isPopUp);
}
return (
<>
<div className='profile'>
<ProfileHeader/>
<div className='createdposts'>
{myReceipe.length !== 0 ?
<Post popUpHandler={popUpHandler} myReceipe={myReceipe}/>
:
null
}
</div>
</div>
{isPopUp === true ?
<Magnify popUpHandler={popUpHandler}/>
:
null
}
</>
)
}