[FIXED] How can I call the function once?

Issue

I have a project in react native and I need to read data from a firebase db in realtime. I try to:

const [numberTrains, setNumberTrains] = useState(0)
 function Read(){
    const starCountRef = ref(db, 'users/' + user.localId);
    onValue(starCountRef, (snapshot) => {
      const data = snapshot.val();
      setNumberTrains(data.countTrains);   
    });
  }
  Read()
    console.log(numberTrains)

But it throws the exception: Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. And the output looks like:

 LOG  0
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1
 LOG  1

How can I read data in numberTrain only once?

Solution

Use useEffect

const [numberTrains, setNumberTrains] = useState(0)

function Read(){
  const starCountRef = ref(db, 'users/' + user.localId);
  onValue(starCountRef, (snapshot) => {
    const data = snapshot.val();
    setNumberTrains(data.countTrains);   
  });
}

React.useEffect(()=>{
  Read();
  console.log(numberTrains)
},[]);

Answered By - Naveed Khan
Answer Checked By - - Marie Seifert (ReactFix Admin)