Update list on page without resetting state in React Native

I have a Host.js file which has a track list which is updated as defined by the setTrackListener() function. My issue is that everytime the function is called, the trackList isn't actually updated. Here is an example print out:

Change detected in setTrackListener
LOG  Track Name: TEST
LOG  Current trackList:
LOG  NewArray: TEST
LOG  trackList after set:

Here is my code:

let authToken = "";
let roomID = "";
export default function Host({ navigation }) {
if (roomID == "") {
roomID = createRoom();
}
const [trackList, setTrackList] = useState([]);
if (authToken == "") {
getAuthAccessToken().then((t) => (authToken = t));
}
useEffect(() => {
setTrackListener(roomID, (t) => {
if (t != null) {
console.log("Track Name: " + t.name);
console.log("Current trackList: " + trackList);
const newArray = [...trackList];
newArray.push(t.name);
console.log("NewArray: " + newArray);
setTrackList(newArray);
console.log("trackList after set: " + trackList);
}
});
}, []);
return (
<View style={styles.container}>
<Text style={styles.title}>Hosting {roomID}</Text>
<FlatList
data={trackList}
renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
title: {
color: "#590",
fontSize: 32,
},
});

setTrackListener is defined in a seperate file, where I listen to changes on a specific Google Firebase Database. Here is that code:

let setTrackListener = (id, onChange) => {
let tracksRef = ref(database, `rooms/${id}/tracks`);
onChildAdded(tracksRef, (snapshot) => {
const data = snapshot.val();
console.log("Change detected in setTrackListener");
onChange(data);
});
};

If I instead update the trackList with button like the following, it does update:

<Button
title={"Test"}
onPress={() => {
const newArray = [...trackList, "TEST"];
setTrackList(newArray);
console.log(trackList);
}}
></Button>

The reason explained by Tyson-Z seems appropriate.

I would suggest the following changes.<br>

Create a state variable to keep track of initialization state.

const [initialized, setInitialized] = useState(false);

Create a separate callback function

  const onChangeCallback = useCallback((t) => {
if (t != null) {
console.log("Track Name: " + t.name);
console.log("Current trackList: " + trackList);
const newArray = [...trackList];
newArray.push(t.name);
console.log("NewArray: " + newArray);
setTrackList(newArray);
console.log("trackList after set: " + trackList);
}
},[trackList]);

Change your useEffect hook with the following

  useEffect(() => {
if (!initialized) {
setListener(roomID, onChangeCallback);
setInitialized(true);
}
}, [onChangeCallback,initialized]);

Test, if it's working

  // Only for testing
useEffect(() => {
setTimeout(() => {
console.log(trackList);
}, 1000)
})

Hope it helps.
Thanks

TLDR:
convert your setTrackList(newArray); inside the useEffect function to

setTrackList((trackList) => [...trackList, t.name]);

I think your implementation on setTrackListener is correct.

So I think the main reason is that the trackList variable in useEffect is wrapped in a stale closure, this is a trait of Javascript that,
when you define a function, and it uses a variable outside of that function,
it will cache the value of that variable at the time the function is defined, and always return the same value (i.e. empty array in this case).

To fix that, you need to either put trackList variable into the dependency array of useEffect, or, pass a callback function to the setState function to avoid the need for access trackList inside useEffect.

Suggestion:
convert your setTrackList(newArray); in the useEffect function to

setTrackList((trackList) => [...trackList, t.name]);

and do not use console.log(trackList) in the callback function (you won't see the value since it is always []), either put the console log to the function body (quite dirty, only use for debugging), or print the value inside the setTrackList's callback

setTrackList((trackList) => {
const newArray = [...trackList, t.name]
console.log(newArray)
return newArray
});

If that doesn't work, another possible reason you didn't see the updated trackList in your output is React does not update the state immediately, the setState function will trigger a re-render, and the states are updated in a batch in the next re-render.

But in many cases, the update takes effects immediately, but you cannot rely on that.

P.S.
One thing to notice is that the useEffect does not unsubscribe to onChildAdded when the component is unmounted, this might cause some performance issues, so it will be better to re-write the setTrackListener and useEffect to

// In the separate file, return the unsubscribe function from `onChildAdded`
const setTrackListener = (id, onChange) => {
  let tracksRef = ref(database, `rooms/${id}/tracks`);
  return onChildAdded(tracksRef, (snapshot) => {
    const data = snapshot.val();
    console.log("Change detected in setTrackListener");
    onChange(data);
  });
};

// In the useEffect hook, return the unsubscribe function which will get called during unmount
  useEffect(() => {
    const unsubscribe = setTrackListener(roomID, (t) => {
      if (t != null) {
        console.log("Track Name: " + t.name);
        console.log("Current trackList: " + trackList);
        const newArray = [...trackList];
        newArray.push(t.name);
        console.log("NewArray: " + newArray);
        setTrackList(newArray);
        console.log("trackList after set: " + trackList);
      }
    });
    return unsubscribe
  }, []);

References:

https://dmitripavlutin.com/react-hooks-stale-closures/#3-state-closure-in-useeffect

https://blog.logrocket.com/why-react-doesnt-update-state-immediately/

To observe the updated state value, you can make use of the useEffect hook with a dependency on the trackList state.

By adding [trackList] as the dependency array in the useEffect hook, the callback function will be called whenever the trackList state changes.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

useEffect(() => {
setTrackListener(roomID, (t) => {
if (t != null) {
console.log("Track Name: " + t.name);
console.log("Current trackList: " + trackList);
const newArray = [...trackList, t.name];
console.log("NewArray: " + newArray);
setTrackList(newArray);
}
});
}, [trackList]);

<!-- end snippet -->

The useEffect with [] will only run once. You need to add the changing dependencies e.g. [t]. t, t.name, or any props that their changes should trigger the setTrackListener.

Also

console.log("trackList after set: " + trackList)

next to

setTrackList(newArray) 

would not show the latest state of the trackList.

Try below as a seperate useEffect:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  useEffect(() => {
console.log("Current trackList: " + trackList);
}, [trackList]);

<!-- end snippet -->