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

CodePudding user response：

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