React, fetch data from database before rendering component

user_13006773 0
Viewed 752

I have problems with useState and useEffect. Here is the code:

const [words, setWords] = useState()

useEffect(() => {
    getAllData()
  }, [])

async function getAllData(category){

    let url = `http://127.0.0.1:3000/api/improve-language`

    let response = await fetch(url)
    let data = await response.json()
    let result = await data

    await setWords(result)
  }

I expect from useEffect to get data from api and set to useState variable. And then I'm going to use that useState variable anyway. But, when the website load, I see that useState variable is null, after when I writing a new code line and saving the file, then I see that useState variable has the data finally.

I need to get the data before the website rendering procces. I need to have the data when the page loads. Otherwise, I'm getting errors.

Update: Thanks to everyone who answered to question. Everyone says "use a loader" but I'm already using it. But the main problem is not this.

There are lots of functions and useState variables. And I need the data immediately to make other functions and useState variables to useable.

I'm aldreay using loading effect, but the main problem is functions needs words variable which works for make datas to useable and to present to user.

I need that data after using the setWords(data) function which is in getAllData() function.

I need datas before everything.

use-state use-effect reactjs javascript
4 Answers

First, you are using more await than it is needed. That has been said, you can use some loading component while you are fetching the data (it is the recommended way), like so :

const [words, setWords] = useState()

useEffect(() => {
    getAllData()
  }, [])

async function getAllData(category){

    let url = `http://127.0.0.1:3000/api/improve-language`

    let response = await fetch(url)
    let data = await response.json()
    setWords(data)
  }
  
  if(!words){
    return <p>Loadin ...</p>
  }
user_152886410

Rather then creating a async function inside the functional hook, you can create a function inside useEffect which gets called on component mount and display a loading spinner when data is being fetched. This is my approach for the above problem statement

const LoadingDiv = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`

const [words, setWords] = useState()

useEffect(() => {
  const getAllData = async() => {
    let url = `http://127.0.0.1:3000/api/improve-language`;
    let response = await fetch(url)
    let data = await response.json()
    setWords(data)
  };
  getAllData();
}, [])

return (
  words ?
  <YourComponents.../> : <LoadingDiv > Loading... < /LoadingDiv>
);
user_66461290

I think the easiest way is that you would display a loading spinner until you have data in words. That way, the page will load, your spinner will show until theres data, then when data is in you can remove the spinner and actually display your content

user_38511020

The component is going to render right away, and the process of fetching data is asynchronous. Instead of trying to make the browser wait to render the component, just handle the null case for the data. For example, in your rendering:

return (
  words ?
    <YourComponents ... /> :
    null
);

This would render nothing (because it returns null) if words is falsy, and will render the JSX markup after the state has been updated to include the data you need.

You can likely improve this by adding some kind of "loading" indicator instead of just returning null. But if, as specified in the question, you want to simply not render anything then null would accomplish that.

user_3281930
Related