Why my Firebase get() function fires twice inside React component?

Question

In the initialize file, I code like this.

import { initializeApp } from 'firebase/app'; import { getDatabase, ref, child, get } from "firebase/database"; const config = { }; const app = initializeApp(config); const db = getDatabase(app); const dbRef = (ref(db)); get(child(dbRef, "shop_data")).then((snap) => { console.log(snap.val()) }) export {dbRef};

From here, I receive one result from console.log

Now, in my Store component, I only put the get() function in

import '../css/StoreSelectable.css'; import { dbRef } from '../js/firebase_init'; import { getDatabase, ref, child, get } from "firebase/database"; function StoreSelectable(){ const getStore = () => { get(child(dbRef, "shop_data")).then((snap) => { console.log(snap.val()) }) return; } return( <div className="Store-Selectable"> <table id="place_option" align="center" style={{tableLayout: 'fixed'}} className="radioButtons collapseBorder"> <tbody> {getStore()} </tbody> </table> </div> ); } export default StoreSelectable;

Now, firebase function fires twice.

Edit 10/6/2022 I tried useEffect, but it still gets the data twice. I really do not want to use Firestore since I have to rewrite a lot of codes. What should I do in this situation?

import "../css/StoreSelectable.css"; import { dbRef } from "../js/firebase_init"; import { getDatabase, ref, child, get } from "firebase/database"; import { useEffect, useState } from "react"; function StoreSelectable() { const pin = { TestiKirppis: ["Jarii1", "spr1234", "6899bc73da4ace09"], Vaasa: ["D0ED5D57F47580F2", "spr9876", "Vas183"], Seinäjoki: ["a1a1a1a1a1a1a1a1", "spr9999", "Seina19"], Kokkola: ["regT863", "spr0000", "b4b8bb4ceeaa2aee"], }; const [count, setCount] = useState([]); useEffect(() => { const getStore = () => { get(child(dbRef, "shop_data")).then((snap) => { let val = snap.val(); Object.keys(val).forEach((key) => { setCount((count) => [...count, val[key].name]); }) }); } getStore(); }, []); return ( <div className="Store-Selectable"> <table id="place_option" align="center" style={{ tableLayout: "fixed" }} className="radioButtons collapseBorder" > <tbody>{count.map((data) => {return (<p>{data}</p>)})}</tbody> </table> </div> ); } export default StoreSelectable;

Strict twice renders a component, please check inside your index.js file if you are using <React.StrictMode> . — Gulshan Aggarwal
– Gulshan Aggarwal, Commented Jun 9, 2022 at 16:09
You're doing your fetching in the body of your component, so it's going to happen every time this component renders. You're lucky that it's only happening twice. You need to do this fetching either in a use effect, or something like an onClick, not in the body. — Nicholas Tower
– Nicholas Tower, Commented Jun 9, 2022 at 16:20
I need to fetch it when the page is loaded, but when I try it with useState and useEffect, it triggers 4 times instead of 2, with 2 additional times when the variable is created. imgur.com/a/MODRfS9 — Winston Lycan
– Winston Lycan, Commented Jun 10, 2022 at 10:20

Gourab Paul · Accepted Answer · 2022-06-09 16:30:44Z

2

I think it is because of strict mode in react 18. If you remove it, the issue will be resolved.

Please check : multiple execution of files leading to multiple server calls in react js

answered Jun 9, 2022 at 16:30

Gourab Paul

464 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gourab Paul Over a year ago

A mode detailed explanation of strict mode is provided in stackoverflow.com/questions/72112028/…

Winston Lycan Over a year ago

I really want to keep it on to track bugs, but even useEffect triggers twice so for the moment, I am turning it off.

BANADDA MUBARAKA · Accepted Answer · 2024-04-11 07:21:49Z

0

Indeed the issue is with Strict model in react 18, I had same bug, where my react js app was making two submission, but after disabling the strict mode, the issue was resolved

answered Apr 11, 2024 at 7:21

BANADDA MUBARAKA

553 silver badges12 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Why my Firebase get() function fires twice inside React component?

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related