How do I render a react component only after a state is set?

user_16819736 0
Viewed 34

My app fetches some data from a server using useEffect and passes it as a prop to a child component. I would like to pause the rendering of the child component until the data is completely fetched and loaded into a state. How can I achieve this?

My code(simplified):

const App = () => {
  const [data, setData] = useState(undefined)
  
  useEffect(async () => {
    const fetchedData = await getDataFromServer()
    setData(fetchedData)
  }, [])

  return (
    <div>
      <ChildComponent data={data} /> // How to pause rendering until data != undefined?
    </div>
  )
}
reactjs javascript
1 Answers

You can achieve this by using a ternary operator, since undefined is a falsy value the condition will return false and it will show Loading... until the data is fetched and after it is done fetching the condition will become true since data is no longer undefined i.e. falsy that's how the data will be passed to the child component only after it is fetched.

const App = () => {
  const [data, setData] = useState(undefined)
  
  useEffect(async () => {
    const fetchedData = await getDataFromServer()
    setData(fetchedData)
  }, [])

  return (
    <div>
      {data ? <ChildComponent data={data} /> : <p>Loading...</p>}
    </div>
  )
}

More on falsy values here

More on ternary operator in Javascript here

user_130626320
Related