How can I solve the delay from firebase database? - reactjs

Question

So here is my function code:
function Detail() {
const { id } = useParams();
const [movie, setMovie] = useState();
useEffect(() => {
// Grab the movie info from db
db.collection("movies")
.doc(id)
.get()
.then((doc) => {
if (doc.exists) {
// save the movie to the state
setMovie(doc.data());
} else {
// redirect to home page
console.log("no such document in firebase 🔥");
}
});
}, [id]);
return (
<Container>
<Background>
<img alt=" background" src={movie.backgroundImg} />
</Background>
<ImageTitle>
<img alt="title" src={movie.titleImg} />
</ImageTitle>
<SubTitle>{movie.subtitle}</SubTitle>
<Description>{movie.description}</Description>
</Container>
);
}
Everything should be good here, but when I run the app, I get TypeError: cannot read property 'backgroundImg' of undefined
After spending a good few hours debugging and researching, I found out that the issue is, the function looking for the data before it had time to get it from the database.
What is the solution here? I know about the async function but never used it before.

Answer 1

UseEffect is executed after render and when value id value changes
Note=> you need to render only if movie exists
function Detail() {
const { id } = useParams();
const [movie, setMovie] = useState();
useEffect(() => {
// Grab the movie info from db
const unsubscribe=db.collection("movies")
.doc(id)
.get()
.then((doc) => {
if (doc.exists) {
// save the movie to the state
setMovie(doc.data());
} else {
// redirect to home page
console.log("no such document in firebase 🔥");
}
});
return ()=>{
//clean up function to unsubscribe to firestore changes
unsubscribe();
}
}, [id]);
return (
<Container>
//render only if movie exists
{
movie ? <div>
<Background>
<img alt=" background" src={movie.backgroundImg} />
</Background>
<ImageTitle>
<img alt="title" src={movie.titleImg} />
</ImageTitle>
<SubTitle>{movie.subtitle}</SubTitle>
<Description>{movie.description}</Description>
</div>
: <p>...loading</p>
}
</Container>
);
}

Answer 2

you can use conditional rendering in react and render different component based on movie
return (
<Container>
{movie?
<React.Fragment>
<Background>
<img alt=" background" src={movie.backgroundImg} />
</Background>
<ImageTitle>
<img alt="title" src={movie.titleImg} />
</ImageTitle>
<SubTitle>{movie.subtitle}</SubTitle>
<Description>{movie.description}</Description>
</React.Fragment>
: <p>loading from firebase</p>}
</Container>
);

Answer 3

You might want some loading state that controls wether the content is available or not, this is the refactored code:
ps: If it doesn't work, check your logs so we can see the error
function Detail() {
const { id } = useParams();
const [loading, setLoading] = useState(false)
const [movie, setMovie] = useState();
useEffect(() => {
setLoading(true)
async function getMovie(id) {
try {
const doc = await db.collection("movies")
.doc(id)
.get()
if (doc.exists()) {
setMovie(doc)
}
}
catch (err) {
console.log(err)
}
}
getMovie(id)
setLoading(false)
}, []);
return (
<Container>
{!loading && (
<>
<Background>
<img alt=" background" src={movie.backgroundImg} />
</Background>
<ImageTitle>
<img alt="title" src={movie.titleImg} />
</ImageTitle>
<SubTitle>{movie.subtitle}</SubTitle>
<Description>{movie.description}</Description>
</>
)}
</Container>
);
}

Answer 4

In React never assume that a request will be processed and the information will exist or React would render before the request is finished being processed. So you always want to use a && operator
function Detail() {
const { id } = useParams();
const [movie, setMovie] = useState();
useEffect(() => {
// Grab the movie info from db
db.collection("movies")
.doc(id)
.get()
.then((doc) => {
if (doc.exists) {
// save the movie to the state
setMovie(doc.data());
} else {
// redirect to home page
console.log("no such document in firebase 🔥");
}
});
}, [id]);
return (
{movie &&
<Container>
<Background>
<img alt=" background" src={movie.backgroundImg} />
</Background>
<ImageTitle>
<img alt="title" src={movie.titleImg} />
</ImageTitle>
<SubTitle>{movie.subtitle}</SubTitle>
<Description>{movie.description}</Description>
</Container>}
);
}