Hold back react native UI with async until data from Firebase is fully loaded-CodePudding

My db is loading fine from Firebase. How do I write async function correctly to make sure nothing renders until setDATA is set with the data from the db

useEffect(() => {
const db = getDatabase();
return onValue(ref(db, "/beaches"), (querySnapShot) => {
  setDATA(querySnapShot.val() || {});
});}, []);

CodePudding user response：

The simplest way is going to be to wrap a conditional around the JSX that you don't want to render, and check whether the data exists.

If we say that your data is getting assigned to a variabl called data, this would look like

return (
    <>
        {!!data && (
            <your jsx here>
        )}
    </>
)