like who
like who

Reputation: 121

react firebase makes multiple requests

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 () => { }
  }, [])  

See example

Should show only one request once

        {myArray.map(() => (
          <h1 >one request</h1>
        ))}    ```

Upvotes: 0

Views: 114

Answers (1)

Nathan
Nathan

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

Related Questions