title: Firebase - Firestore data query callled twice two times In web version
body: <p>I am trying to do a query in which I get all of the documents from orders collection in firestore database. But there is a problem that all of the data is duplicated instead of getting one row for each document is duplicated. Is there any solution to that problem? I have attached the code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import * as React from "react";
  import { styled } from "@mui/material/styles";
  import Table from "@mui/material/Table";
  import TableBody from "@mui/material/TableBody";
  import TableCell, { tableCellClasses } from "@mui/material/TableCell";
  import TableContainer from "@mui/material/TableContainer";
  import TableHead from "@mui/material/TableHead";
  import TableRow from "@mui/material/TableRow";
  import Paper from "@mui/material/Paper";
  import { db } from "../../config/Config";
  import { useEffect, useState } from "react";
  import Checkbox from "@mui/material/Checkbox";
  import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
  
  const StyledTableCell = styled(TableCell)(({ theme }) =&gt; ({
    [`&amp;.${tableCellClasses.head}`]: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white,
    },
    [`&amp;.${tableCellClasses.body}`]: {
      fontSize: 14,
    },
  }));
  
  const StyledTableRow = styled(TableRow)(({ theme }) =&gt; ({
    "&amp;:nth-of-type(odd)": {
      backgroundColor: theme.palette.action.hover,
    },
    // hide last border
    "&amp;:last-child td, &amp;:last-child th": {
      border: 0,
    },
  }));
  
  function createData(
    id,
    DateOfInquiry,
    CompanyName,
    ContactPerson,
    ContactNo,
    ContactEmail,
    Model,
    Type,
    Capacity,
    Quantity,
    DeliveryLocation,
    WorkStartDate,
    LoadingLocation,
    UnloadingLocation,
    Comments
  ) {
    return {
      id,
      DateOfInquiry,
      CompanyName,
      ContactPerson,
      ContactNo,
      ContactEmail,
      Model,
      Type,
      Capacity,
      Quantity,
      DeliveryLocation,
      WorkStartDate,
      LoadingLocation,
      UnloadingLocation,
      Comments,
    };
  }
  
  const rows = [];
  
  export default function CustomizedTables() {
    const [newProduct, setNewProduct] = useState([]);
    useEffect(() =&gt; {
      return db
        .collection("Orders")
        .get()
        .then((snapshot) =&gt; {
          const ProductData = snapshot.docs.map((doc) =&gt; ({
            id: doc.id,
            ...doc.data(),
          }));
          setNewProduct(ProductData);
        });
    }, []);
    newProduct.forEach((doc) =&gt; {
      rows.push(
        createData(
          doc.id,
          doc.DateOfInquiry,
          doc.CompanyName,
          doc.ContactPerson,
          doc.ContactNo,
          doc.ContactEmail,
          doc.Model,
          doc.Type,
          doc.Capacity,
          doc.Quantity,
          doc.DeliveryLocation,
          doc.WorkStartDate,
          doc.LoadingLocation,
          doc.UnloadingLocation,
          doc.Comments
        )
      );
    });
    const history = useHistory();
    const [ButtonClicked, setButtonClicked] = useState(false);
    const handelClick = (e) =&gt; {
      db.collection("Orders").doc(e.target.value).delete();
      setNewProduct([]);
      setButtonClicked(!ButtonClicked);
      history.push("/table");
    };
    /* useEffect(() =&gt; {
      return db
        .collection("Orders")
        .get()
        .then((snapshot) =&gt; {
          const ProductData = snapshot.docs.map((doc) =&gt; ({
            id: doc.id,
            ...doc.data(),
          }));
          setNewProduct(ProductData);
        });
    }, [ButtonClicked]); */
  
    return (
      &lt;TableContainer component={Paper}&gt;
        &lt;Table sx={{ minWidth: 700 }} aria-label="customized table"&gt;
          &lt;TableHead&gt;
            &lt;TableRow&gt;
              &lt;StyledTableCell align="right"&gt;Checkbox&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;S.no&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Date of Inquiry&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Company Name&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Contact Person&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Contact No&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Contact Email&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Model&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Type&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Capacity&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Quantity&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Delivery Location&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Work Start Date&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Loading Location&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Unloadig Location&lt;/StyledTableCell&gt;
              &lt;StyledTableCell align="right"&gt;Comments&lt;/StyledTableCell&gt;
            &lt;/TableRow&gt;
          &lt;/TableHead&gt;
          &lt;TableBody&gt;
            {rows.map((row) =&gt; (
              &lt;StyledTableRow key={row.id} onClick={handelClick}&gt;
                &lt;TableCell padding="checkbox"&gt;
                  &lt;Checkbox
                    color="primary"
                    value={row.id}
                    onChange={handelClick}
                  /&gt;
                &lt;/TableCell&gt;
                &lt;StyledTableCell component="th" scope="row"&gt;
                  {row.id}
                &lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;
                  {row.DateOfInquiry}
                &lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;{row.CompanyName}&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;
                  {row.ContactPerson}
                &lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;{row.ContactNo}&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;
                  {row.ContactEmail}
                &lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;{row.Model}&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;{row.Type}&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;{row.Capacity}&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;{row.Quantity}&lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;
                  {row.DeliveryLocation}
                &lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;
                  {row.WorkStartDate}
                &lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;
                  {row.LoadingLocation}
                &lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;
                  {row.UnloadingLocation}
                &lt;/StyledTableCell&gt;
                &lt;StyledTableCell align="right"&gt;{row.Comments}&lt;/StyledTableCell&gt;
              &lt;/StyledTableRow&gt;
            ))}
          &lt;/TableBody&gt;
        &lt;/Table&gt;
      &lt;/TableContainer&gt;
    );
  }</code></pre>
  </div>
  </div>
  
  This is the image of the table.</p>
  <p><a href="https://i.stack.imgur.com/e7Fp3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e7Fp3.png" alt="Table Image" /></a></p>