Reputation: 121
I am trying to get data from firebase and pass it to a state array but firebase makes 2 requests
useEffect(() => {
const uid = '';
const dbRef = ref(getDatabase(app));
get(child(dbRef, `users/${uid}/${params.hey}`)).then((snapshot) => {
if (snapshot.exists()) {
snapshot.val()['rows'].forEach(element => {
var elemets = {
key: element['id'],
link: element['link'],
image: element['image'],
placeholder: element['placeholder'],
}
setMyArray(arr => [...arr, element]);
});
} else {
console.log("No data available");
}
}
).catch((error) => {
console.error(error);
})
return () => { }
}, [])
Should show only one request once
{myArray.map(() => (
<h1 >one request</h1>
))} ```
Upvotes: 0
Views: 114
Reputation: 78409
You are most likely wrapping your app in <React.StrictMode>
, which only during development causes useEffect
to fire twice. It's intended to hell catch bugs when useEffect has unintended side effects. You could change it to set the array from scratch instead of merging it with the prior state, remove strict mode, or add a cleanup return from useEffect
Upvotes: 1