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

Question

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>
  )
}

Answer 1

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

Answer 2

Correct Way is first you check

state is not equal to initialstate

const [data,setData] = useState('initial state')

//component code 
 <>
   {data != 'initial state' && (data.length>0 ? data.map((dat)=>{} : <>no data</> ))                         }
 </>