firebase realtime database is not getting fetched with onPress in react native, have to refresh the ref().on function everytime

Question

I have a realtime database with main node 'user' and then inside it i have 3 child nodes and those 3 child nodes have 4 more child nodes, each of them. One of the 4 nodes is a recording, one is image and 2 of them are strings. I am trying to fetch them dynamically with Next and Back button where on pressing next, next node's data is displayed on screen.

I am using a useState for dynamically changing the path of database (ref), but on pressing the next/back button, my data on screen does not get updated. Also later I found out that after pressing next/back button when I refresh/rewrite the ref().on function, my data gets updated, but I have to do this for every press.

Here's my App.js code:

import Sound from 'react-native-sound';
import database from '@react-native-firebase/database';
import storage from '@react-native-firebase/storage';
import React , {useEffect, useState} from 'react';
import {
  ScrollView,
  StyleSheet,
  Alert,
  Text,
  View,
  Image,
  Button
} from 'react-native';

const App = () => {
 
  const [myData,setData] = useState({
    letter:'',
    pronun:'',
    word:'',
    image:''
  });
  const [img,setimg] = useState(null);
  const [pronunn,setpronun] = useState(null);
  const [hey,sethey] = useState(1);


  useEffect(() => {
    getDatabase();   
}, []);
  
  function getDatabase() {
    
database().ref('users/'+hey+'/').on('value' , (snapshot) => {
  Sound.setCategory('Playback', true);
  var poo=new Sound(snapshot.val().pronun);
  setData({
    letter: snapshot.val().letter,
    word: snapshot.val().word,
    image: setimg(snapshot.val().image),
    pronun: setpronun(poo)
  });
  console.log(snapshot.val());
});
 }

  return (

<View style={{flex:1, backgroundColor:'#000000', alignContent:'center', alignItems:'center', justifyContent:'center'}}>
  

      <ScrollView>
      <Text style={{color:'#ffff'}}>
    Letter: {myData ? myData.letter : 'loading...' }
  </Text>

  <Text style={{color:'#ffff'}}>
    Word: {myData ? myData.word : 'loading...' }
  </Text>
  <Image style={{width:200, height:200}} 
  source={{uri: img}} 
    />

   <View>
     <Button
     title='Pronunciation'
     onPress={() => {
       return pronunn.play();
     }}
     >

     </Button>

     <Button title='Next' onPress={
       
       () => {
         if (hey>2) {
          Alert.alert('no more records');
         }
         else {

       return sethey(hey+1);
  
         }
       }
      }
       >

       </Button>

       <Button title='back' onPress={
       
       () => {
         if (hey<2) {
          Alert.alert('no more records to go back');
         }
         else {
       return sethey(hey-1);
         }
       }
      }
       >

       </Button>
       </View>
      </ScrollView>

    </View>
);
};

export default App;

Answer 1

Since your setData hook/effect depends on the hey state, you need to specify the latter as a dependency in useEffect for the data loading.

useEffect(() => {
  getDatabase();   
}, [hey]);

Also see:

• The documentation on useEffect, specifically the section on dependencies.
• setState in React's useEffect dependency array