React Fetch Data From Database Before Rendering Component-CodePudding

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 datas from api and set to useState variable. And then I'm going to use that useState variable anyway. But, when website loaded, then 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 these datas before the website rendering procces. I need to have these datas when page is loaded. Otherwise, I'm seeing error page when I wanted to use that useState variable.

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.

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

First, you are using more await than it is needed. Said 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>
  }