Page renders faster than fetching the data and displaying it

Admin 1
Viewed 627

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
      }
  </>
  )
}
reactjs fetch-api fetch
2 Answers

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.

user_60943480

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
      }
  </>
  )
}
user_139993860
Related